1. Home
  2. HTMLタグ
  3. リンクタグ
  4. 別ページの特定部分へリンクする(旧方式)

別ページの特定部分へリンクする(旧方式)


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

ブラウザ
IE
Fx
Sf
Cr
O
分類
インライン要素
要素
a要素

同じページ内にリンクする(旧方式)」と似た方法で、別文書の特定部分へリンクすることができます。

このページで紹介する内容は、id属性に対応していない古いブラウザを考慮したやり方となります。



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

リンク先(到達点)
example2.html
<a name="abc">ここがABCの位置</a>


属性 説明
href="" URI リンク先の文書と識別名を指定
name="" 識別名 固有の識別名を指定

この旧方式では、リンクの到達点として使用できる要素はa要素のみとなります。これ以外の要素を到達点としたい場合は、id属性を使用して設定する方法を参考にしてください。

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

まず、リンクの到達点となるa要素に、識別名を指定しておきます。

以下の例では、abc という識別名を指定しています。

<a name="abc">ここがABCの位置</a>

※同時にid属性を指定しておくことをお勧めします。この場合、name属性id属性の値は同一である必要があります。

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

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

リンク元の href="" には、到達点のURIを指定します。

例えば、example2.html 内の abc という位置にリンクする場合は、URIは次のようになります。

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

ファイル名の後にハッシュ( # )を入れ、続いて到達点の識別名を記述します。

【識別名について】

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

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

※上記の注意事項は、id属性の規則に合わせた内容となります。(id属性と併用する場合に備えて)

メモ

古いブラウザを考慮する必要がない場合は、id属性を使用して設定する方法を参考にしてください。


使用例

■リンク元の文書(name_example1.html)


<h1>HTML index</h1>

<h2>リンク元のページ</h2>

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


■リンク先の文書(name_example2.html)


<h1>HTML index</h1>

<h2>リンク先のページ</h2>

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

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

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

<hr>

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

表示例


リンクタグ

ページの先頭へ


inserted by FC2 system