日文文書処理

ウェブページの作成

特定の場所にハイパーリンクする

別のファイルにハイパーリンクする」では、自分のサイト内にある別のファイルへのハイパーリンクについて学んだが、ここではファイルの中の特定の場所へのハイパーリンクを扱う。

リンクの終点を指定する

ファイルの中の特定の場所をリンク先にするには、その場所(フラグメントfragment)に名前をつけておく必要がある。そのためには、開始タグに《id属性》id attributeを用いて、次のように記述する(例では〈h3要素〉の開始タグに記述しているが、その他の要素の開始タグでもよい)

<h3 id="場所の名前">〜</h3>

また、次のように〈アンカー要素〉を用いることもできる。

<a id="場所の名前">〜</a>

ここで名前をつけた場所へハイパーリンクするには、〈アンカー要素〉の《href属性》に「#場所の名前」と記述すればよい(必ず「#」をつけること)。

名前をつけるときに注意すること

場所に名前をつけときに、以下のことに注意すること。

  1. 《id属性》の値には、アルファベット(a,b,c,d...A,B,C,D...)を使う(漢字や仮名は使うべきではない)
  2. 《id属性》の値は、同じ文書内で重複してはいけない(《id属性》は同じ文書で何度でも使えるが、その値[名前]はすべて違うものにしなければならない)
  3. 《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>にジャンプ
ページの先頭へ↑
←ひとつ前に戻る
目次へ
トップページへ