rel属性とhref属性とtitle属性を組み合わせてリンクを作る方法
- HTML初心者がrel属性とhref属性とtitle属性を組み合わせてリンクを作る方法を調べています。
- アンカータグのhref属性だけではなく、rel属性とtitle属性も組み合わせることでリンクの機能を拡張することができます。
- しかし、正しくコーディングできずにうまくいかない状況です。rel属性に関する理解が不十分なため、より詳しい情報を求めています。
- ベストアンサー
rel属性とhref属性とtitle属性を組み合わせてリンクをつくる
rel属性とhref属性とtitle属性を組み合わせてリンクをつくる お世話になっております。 HTML初心者です。 自作HPを作成しており、よくわからないことが出てきたので質問させてください。 見出しに "前に戻る","次に進む","HOME"などのリンクをつけたいと思っています。 アンカータグに、href属性を組み合わせて、使用すればできることはわかったのですが、 rel属性とhref属性とtitle属性を組み合わせて作ろうと思っています。しかし、 うまくいきません。 たとえば、headerタグ内に、 <link rel="next" href=".PAGE2.html" title="PAGE2について" /> というようなコーディングを行ったのですが、まったくうまくいきません。 ページ１において、”PAGE2について”という文字が出てきてそこをクリックするとページ2にとべる・・ というような仕組みを考えているのですが・・・ rel属性に関しての理解が不十分なためとは思うのですが、ご存知の方が いらっしゃたらご教授願います。 よろしくお願いします。
- clubhomen
- お礼率62% (34/54)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞ソースを見てもAタグが乗っておらずわかりませんでした。 <body>の後の4行目（空行は数えないで）の <p><a href="./elements.html"><<PREV</a> | <a href="./index.html#toc">目次</a> | <a href="./address.html">NEXT>></a></p> の部分。 空行が多いので、下にスクロールしてみること。
その他の回答 (4)
- notnot
- ベストアンサー率47% (4847/10260)
＞ソースを見てもAタグが乗っておらずわかりませんでした。 小文字のaです。検索時に、大文字小文字を区別するにチェックが入っているとか。 というか、検索とかしなくても body部分 の先頭にありますけど。。。 そもそも、HTMLソースの表示の仕方がわからないとか言うことでしょうか？
お礼
見落としていました・・ ありがとうございました！！
- notnot
- ベストアンサー率47% (4847/10260)
#1です。 補足に書かれたサイトをFirefoxで見てますが、relのナビゲーションは当然のことながら、表示されません。機能が無いのですから。 もしかして、ページ上部の緑色の、「<<PREV | 目次 | NEXT>>」をナビゲーションバーだと勘違いしてませんか？それは普通のAタグですよ。ソースを見ればわかると思いますけど。
補足
ご対応ありがとうございます。 ひとつ気になった点があるのでまたですが、質問させてください。 >>それは普通のAタグですよ。ソースを見ればわかると思いますけど。 ソースを見てもAタグが乗っておらずわかりませんでした。 勉強不足でお恥ずかしい限りですが、どのように把握したのか ご教授願います。
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
なんか根本的な勘違いをしているみたい <a rel="next" href=".PAGE2.html" title="PAGE2について">NEXT</a> アンカータグってのは↑ですよ？ あなたのおっしゃる <link rel="next" href=".PAGE2.html" title="PAGE2について" /> LINKタグは関連する文書ファイルを指定するものです。 まったくの別物。 名前が LINK だから混同しちゃったんだろうけど、ハイパーリンク（いわゆるリンク）に使用するのは <link> タグではなく <a> タグです ですから <a> タグを使って <body> 内の好きなところにリンクを設置すれば幸せになれると思うな
- notnot
- ベストアンサー率47% (4847/10260)
ヘッダ中で指定するnext/back/index等は、ブラウザにページ間の関連を知らせるものですが、ブラウザがそれをどう扱うかはブラウザ次第です。 Operaだと、「ナビゲーションツールバー」というのが出て、該当のボタンが表示されるそうです（使ったこと無いのですが)。Opera以外のブラウザでは標準ではサポートされてないはずなので、無意味です。Firefoxだと同様の機能を追加するアドオンがあったはずです。
補足
notnot様 迅速なご対応ありがとうございます。 申し上げにくいのですが、以下のサイトでは、"前に戻る"や"次に進む"などの情報をnextやprevなどを利用して使っているようです。 http://msugai.fc2web.com/web/tut/HTMLtut/headings.html 回答者様に教えていたアドオン機能なしで、Firefoxで見てみましたが表示はきちんとされていました。 すいませんが、これに関してアドバイスがありましたらよろしくお願いします。
関連するQ&A
- link属性のrel="start"についての質問です。
link属性のrel="start"についての質問です。 通常は<link rel="start" href="http://***.jp/" title="タイトル" />ようにトップページを記述すると思うのですが、ディレクトリ毎にサイトを分けている場合<link rel="start" href="http://***.jp/sample/" title="タイトル" />のようにそのディレクトリを記述したほうがよいのでしょうか？ それとも大元のトップページでしょうか？ それと書き方についてですが「http://***.jp/」と書くのと「http://***.jp/index.html」どちらのほうがいいのでしょうか？ 質問ばかりですみませんがよろしくお願いします。
- ベストアンサー
- HTML
- シーサーブログのrel="canonical"属性
seesaaブログでのrel="canonical" 属性について教えてください。 seesaaブログでURLを統一するためにcanonical属性を使おうと思っているのですが、どのように独自タグを使って設定すればいいでしょうか？ 設定したいページは http://○○○.seesaa.net/ のサイトトップページと http://○○○.seesaa.net/article/○○○.html の個別記事ページ の二つを考えています。 seesaaにある独自タグを使って <link rel="canonical" href="独自タグ"/>で設定しようとしたのですが、なかなかうまくいきませんでした。 よかったらご教授御願いします。
- ベストアンサー
- ブログ
- base hrefとlink rel
テキストエディタでhtmlを書いています。 外部cssを使うので、 <link rel="stylesheet" href="style.css" type="text/css"> をヘッダ部に入れていますが、これより上に <base href="～"> で基準URIを指定しようとすると、cssが反映されなくなってしまいます。 先に <link rel="～ を入れてしまうと、文法チェックで引っ掛かるのですが、どうしたら良いのでしょうか？ ソースは、 <Head> <base href="絶対パス"> <link rel="stylesheet" href="style.css" type="text/css"> で、この後にmeta属性を入れています。 よろしくお願い致します。
- ベストアンサー
- HTML
- link relタグは次の記事を先に読みこむタグですが
ブログのhtmlの最初のほうに使うタグのlink relタグというのは、次の記事を先に読み込む為のタグと説明されてますが、 それを使ったタグに「次の頁へ」という表示をしたいのですが、 どう書けば文字を表示できるのでしょうか。 <!--nextpage--><link rel="next" href="<%nextpage_url>" title="次のページへ移動" /><!--/nextpage--> とあるhtmlのどのように変えたらいいのか いろいろいじったのですが 文字が表示されません。 「 》 」このカッコの表示だけなんです。 《 このブログのタイトル 》 この感じでリンクが貼られた状態なんですが、 これを 《前のページへ このブログのタイトル 次のページへ》 という様に 文字も入れたいのですが、出来ないんでしょうか？ a hrefタグを使うのが正解なんでしょうか？ でもこのブログのhtmlのこの場所のかたまりには、link relタグしか 使ってないので、このタグで文字の表示は出来ないかと調べているんですが、方法はないのでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- ブログ
- link要素の意味/使い方について（<link rel="？"なものが多いので
<head></head> 内の、 <link rev="made" href="mailto:～" /> <link rel="next" href="～" /> は、 ●どういう意味あいで書くもので、 ●実際問題どのような影響があるのでしょうか？ ●またどのような記述が正しいのでしょうか？ また、<link .... / > というものをこれら以外にもみかけたのですが、 これらの意味についてお教えいただけないでしょうか？ あるいは、これらについてのまとめサイト的なものはないでしょうか？ （英語でもOK） http://www.kanzaki.com/docs/html/link.html に一部解説がありますが、この解説に掲載されていないものも、たくさん下記にあるようです。 //=========================================================== //ある個人サイトでみかけたもの <link rel="openid.delegate" href="～" /> <link rel="openid.server" href="～" /> <link rel="schema.geo" href="～" /> <link rel="meta" href="/info/webwho.rdf" type="application/rdf+xml" title="～" /> <link rel="meta" href="/w3c/pics-labels.rdf" type="application/rdf+xml" title="～" /> <link rel="alternate" type="text/html" hreflang="en" href="./index.html.en" /> <link rel="alternate" type="application/xml" href="/info/rss.rdf" title="RSS update information" /> <link rel="help" href="/info/navi" /> <link rel="copyright" href="/info/disclaimer" /> <link rel="shortcut icon" href="./favicon.ico" /> <link rev="made" href="mailto:webmaster@example.com" /> ※なお、その個人サイトでは、 <link rev="made" href="mailto:webmaster@example.com" />と記述しているにも関わらず。 本文にて、 「メールアドレスwebmaster@example.comは無効にしています。メッセージは******（別のメアド)にお送り下さい。」 これって、矛盾はしていないのでしょうか？ //----------------------------------------------------------- （↓これはさすがにわかります） <link rel="stylesheet" href="/hoge.css" type="text/css" /> //=========================================================== //wikipediaでみかけたもの // http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8 <link rel="alternate" type="application/x-wiki" title="編集" href="～" /> <link rel="apple-touch-icon" href="～/apple-touch-icon.png" /> <link rel="search" type="application/opensearchdescription+xml" href="～/opensearch_desc.php" title="Wikipedia (ja)" /> <link rel="copyright" href="～/fdl.html" /> <link rel="alternate" type="application/rss+xml" title="Wikipedia をRSSフィード" href="～" /> <link rel="alternate" type="application/atom+xml" title="Wikipedia をAtomフィード" href="～" /> ※話題が若干ずれますが、 RSSが、 「ある個人サイトでみかけたもの」では application/xmlとなっており、 wikipediaでは、application/rss+xml となっていますが、どちらのほうが望ましいのでしょうか？ //----------------------------------------------------------- //=========================================================== //w3cでみかけたもの // http://www.w3.org/ <link rel="meta" href="/Overview-about.rdf" /> <link rel="bookmark" href="#technologies" title="Technologies |" /> <link rel="bookmark" href="#news" title="News |" /> <link rel="bookmark" href="#search" title="Search |" /> <link rel="contents" href="#contents" title="Contents |" /> <link rel="bookmark" href="#Offices" title="Offices |" /> <link rel="bookmark" href="#systems" title="Systems |" /> <link rel="bookmark" href="#donors" title="Supporters |" /> <link rel="bookmark" href="#footnotes" title="Footnotes |" /> <link rel="alternate" type="application/rss+xml" title="W3C Home Page News RSS Channel" href="http://www.w3.org/2000/08/w3c-synd/home.rss" /> ご存じの方がいらっしゃいましたら、お教えいただければ幸いです。 以上、よろしくお願いいたします。
- 締切済み
- HTML
- リンク先のID属性について
ページの途中にリンクしたいとき、aタグにname属性を使用しますが、一般のタグにid属性を付加することもできますよね。 <a href="#jump">ジャンプ</a> ↓ <h3 id="jump">見出し</h3> こんな使い方ができると思うのですが、idを利用したリンク先指定は対応するブラウザが少ない、と某サイトに記されていました。しかし、具体的にブラウザのどのバージョンがだめなのか、などについては言及されていませんでした。 詳細をご存知の方、教えてください。 宜しくお願いします。
- ベストアンサー
- HTML
- title属性内にあるテキストにリンクを貼ることってできますか？
title属性内にあるテキストにリンクを貼ることってできますか？ 例） これを↓ <input type="text" size="25" maxlength="60" title="ここにリンクを貼りたい！"> こうしたい↓ <input type="text" size="25" maxlength="60" title="ここに<a href="">リンク</a>を貼りたい！"> なぜこんなことをしたいのかというと、 登録フォームにjqueryのプラグイン（Input Floating Hint Box）を組み込んで 記入例などをヒントとして表示したいわけで。 ここまでは配布されているプラグインでOKなんですけど、 表示したヒントのテキストにリンクを貼りたいんです！ このプラグインの仕様がinputタグ内のtitle属性にテキストを入れることで ヒントとして表示するようになっているため、title属性内のテキストにリンクを貼るには？ と悩んでいるわけです。 プラグインの仕様は変更してはいけないルールとなっているので、 ヒントの文言をtitle属性以外にいれたら？という案は却下でした。 title属性内のテキストにリンクを貼るなんて術なし！でしょうか？ わかりにくい説明かと思いますが、どうかアドバイスをお願い致します！！
- ベストアンサー
- その他（プログラミング・開発）
- HTMLの属性を自由に作ることはいいのか？
(X)HTMLの規則にそって書け、とよく言われますが、果たして100%従うことだけが善なのでしょうか？ CSSが普及してから、完全に文書とデザインを分けて考えるようになり、進化系として、完全なXML(XHTML)的文書にして、検索エンジンなどにもわかりやすい文書構造に、ということで盲信しているイメージがあります。もしXMLであるならば、より効果的な属性の設定などもあっていいんじゃないかと思うのです。 たとえば、ページングのリンクなどで 1 2 3 4 5 とページへのリンクアンカーがあるとして、通常は <a href="?page=1">1</a> <a href="?page=2">2</a> のような形になるでしょうが、XML(DOM)としては <a href="?page=1" page="1">1</a> <a href="?page=2" page="2">2</a> というような 独自に page という属性にそのページナンバーを入れた方が取得しやすいと思うのですが、こういうのでもルール外だから悪、と言われてしまうのでしょうか？ その文書をparseしても、そのページナンバーを取得するのにもうひと工夫が必要になってしまいます(hrefを正規表現するなどして)。それなら属性に書いた方が絶対楽だし、その値の意味を属性名としてわかりやすく定義できると思うのですが、どうなんでしょうか？ 気になる点としては、今後新しく予約語としてその属性名が定義される可能性があり、その値の意味が異なり、ブラウザの挙動もおかしくなる可能性は理解できます。でも、それはプログラミングしてる人なら、バージョンアップでよく出てくることですし、とりわけHTMLだけやめておけ、というのもおかしいと思いますし。絶対かぶらないように、属性名を作ればいいだけですけどね。servicename_page="2" みたいな(笑)。
- 締切済み
- HTML
- rel属性の値を無効にする方法
<a href="http://" rel="設定値">リンク</a> rel属性の値を無効にしたいのですが、Javaスクリプトなどで可能でしょうか？ 当方まったくJavaスクリプトに対して知識はありません。 もし可能な場合、具体的な記述を教えてください。 宜しくお願い致します。
- 締切済み
- JavaScript
お礼
きづきませんでした。てっきりこれで完結しているかと・・ ありがとうございました！！