<a href="#"></a>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類
要素

以下の指定を行なうと、同じ文書内の特定部分へのリンクが可能になります。


リンク元(出発点)
<a href="#abc">ABCの位置へジャンプ</a>

リンク先(到達点)
<h3 id="abc">ここがABCの位置</h3>

属性 説明
href="" #ID名 リンク先のID名を指定
id="" ID名 固有の識別名を指定

リンク先(到達点)の設定

まず、リンクの到達点となる任意の要素に、ID(識別名)を付けておきます。

以下の例では、h3要素に abc というID名を指定しています。

<h3 id="abc">ここがABCの位置</h3>

リンク元(出発点)の設定

リンク元の href="" には、到達点のID名をハッシュ( # )に続けて記述します。

<a href="#abc">ABCの位置へジャンプ</a>

この abc という名前が、リンク元とリンク先を結びつけることになります。

ID名について

ID名を付ける際には、以下の点に注意してください。

  • 1つのIDは、同じ文書内で1ヵ所にだけ使用できます。(重複させてはならない)
  • 使用できる文字は、半角の英数字、ハイフン( - )、アンダーバー( _ )、コロン( : )、ピリオド( . )、です。(ハイフン以外の記号は使わない方が無難です)
  • アルファベットで始めなければなりません。(数字や記号で始めてはならない)
  • 大文字と小文字の区別があります。

使用例


<h1>TAG index</h1>

<h2>サンプル</h2>

<h3 id="menu">メニュー</h3>
<ul>
<li><a href="#section1">セクション1</a></li>
<li><a href="#section2">セクション2</a></li>
<li><a href="#section3">セクション3</a></li>
</ul>

<h3 id="section1">セクション1</h3>
<p>セクション1の段落。 ...</p>

<h3 id="section2">セクション2</h3>
<p>セクション2の段落。 ...</p>

<h3 id="section3">セクション3</h3>
<p>セクション3の段落。 ...</p>

<hr>

<p><a href="#menu">メニューに戻る</a></p>

表示例

サンプル画面へ新規ウィンドウで表示