「別のファイルにハイパーリンクする」では、自分のサイト内にある別のファイルへのハイパーリンクについて学んだが、ここではファイルの中の特定の場所へのハイパーリンクを扱う。
リンクの終点を指定する
ファイルの中の特定の場所をリンク先にするには、その場所(フラグメントfragment)に名前をつけておく必要がある。そのためには、開始タグに《id属性》id attributeを用いて、次のように記述する(例では〈h3要素〉の開始タグに記述しているが、その他の要素の開始タグでもよい)。
<h3 id="場所の名前">〜</h3>
また、次のように〈アンカー要素〉を用いることもできる。
<a id="場所の名前">〜</a>
ここで名前をつけた場所へハイパーリンクするには、〈アンカー要素〉の《href属性》に「#場所の名前」と記述すればよい(必ず「#」をつけること)。
名前をつけるときに注意すること
場所に名前をつけときに、以下のことに注意すること。
- 《id属性》の値には、アルファベット(a,b,c,d...A,B,C,D...)を使う(漢字や仮名は使うべきではない)
- 《id属性》の値は、同じ文書内で重複してはいけない(《id属性》は同じ文書で何度でも使えるが、その値[名前]はすべて違うものにしなければならない)
- 《id属性》の値を極端に長くしない(《id属性》は、場所を特定するidentifyためのものなので、必要以上に長いものは無意味である)
特定の場所へのリンクを記述する
同じファイルの別の場所にリンクする
「苗栗の紹介」のページで、ページの最後からページの最初に戻るハイパーリンクを設定してみよう。
まず、リンク先にするため、「index.html」ファイルの〈h1要素〉に『pagetop』という名前をつけてみる(『先頭』のような名前をつけてはいけない。必ずアルファベットを使うこと)。以下のように記述すればよい。
<h1 id="pagetop">苗栗の紹介</h1>
次に「index.html」ファイルに、ページの末尾からページの先頭に戻るハイパリンクを設定してみる。次のように記述すればよい。
...
<li>文旦</li>
</ul>
<p>↑<a href="#pagetop">ページの先頭</a></p>
</body>
「index.html」ファイルを保存save(儲存檔案)してからブラウザで開き、ハイパーリンクでページの先頭へ移動することを確認する。【→ファイルをブラウザで開く】
別のファイルの特定の場所にリンクする
別のファイルの特定の場所にリンクするには、〈アンカー要素〉の《href属性》の値に「ファイル名/#場所の名前」と書けば良い。例えば、「data.html」から『「index.html」の先頭』にハイパーリンクするには、次のように書く。
<a href="index.html/#pagetop">トップページの先頭</a>にジャンプ