リンクを張るその2 -- HTML & CSS入門

この目次のようにページ内の特定箇所にリンクする方法やメールアドレスにリンクする方法、リンクに説明をつける方法などを紹介します。

ページの特定箇所にリンク

このページの目次の項目をクリックするとそれぞれの節の見出しにジャンプしますよね。a要素を使うとページの特定箇所にリンクすることができます。

どうやるかというと、まずリンク先にしたい部分にid属性でid="TOC"のように名前をつけます。id属性ってどこかで出てきましたよね。スタイルを指定するときに使ったあのid属性です。一つのHTML文書の中で同じIDを2回以上使ってはいけないんでした。

リンク先に設定するときはid属性の値を大文字で書くようにしてください。理由はちょっと難しいので説明しませんが、とにかく大文字にしておけば問題ないです。

<h2 id="TOC">目次</h2>

もちろんh2要素以外にIDを振ってもOKです。

リンクを設定するときは、href属性の値に#IDを指定します。

<a href="#TOC">目次へ飛ぶ</a>

これでリンクをクリックするとid="TOC"を設定した場所へジャンプします。

別のファイルの特定箇所にリンクするには、href属性の値をURL#IDとしてください。

<a href="index.html#TOC">目次へ飛ぶ</a>

これだと、index.htmlの中のid="TOC"を設定した場所へジャンプします。

id属性を使わずに、a要素のname属性を使って名前をつけることもできます。

<h2><a name="TOC">目次</a></h2>

aタグの中でtitle属性を使うと、リンクに説明をつけることができます。ブラウザによっては、リンクにマウスを乗せると説明が表示させるかもしれません。

<a href="index.html" title="ちょっと詳しいHTMLとCSSの目次">目次</a>

a要素のhref属性にmailto:メールアドレスを指定すると、メールアドレスにリンクが張れます。リンクをクリックするとメーラーが起動するでしょう。

<a href="mailto:elastic965@gmail.com">elastic965@gmail.com</a>