ホームページ作成講座ページ内リンク

ページ内リンクの作成

ページ内にリンクを張り、そこに移動すためのタグは以下の通りです。

<a id="id名"></a>

ページ内のジャンプしたい場所に記述します。

<a href="#＋id名">～</a>

id名を指定したaタグの位置にジャンプします。

ジャンプして移動したい位置に、id属性を付けたaタグを配置します。id名は任意の名前を付けます。

ページ内の特定の位置にジャンプしたい場合は、#を付けたid名をhref属性で指定します。

別ページの特定の位置にもジャンプできます。その場合はhref属性値に「***.html#***」と指定します。

ページ内リンクのサンプル

ページ内リンクのサンプルを見てみましょう。

temp.htmlを開いて、HomePageフォルダの中に「plink.html」というファイル名で保存して下さい。 そしてbody内に以下のHTMLソースをコピー＆貼り付けてみてください。

灰色の背景の部分は、スクロールバーを出すためにCSS編で出てくる技術を使っています。 今は分からないかも知れませんが、そのままコピーして下さい。

<h1><a id="top"></a>ページ内リンク</h1>
<a href="#cp1">項目１へ</a><br>
<a href="#cp2">項目２へ</a>

<div style="height:800px"></div>

<h2><a id="cp1"></a>項目１</h2>
<a href="#cp2">次の項目へ</a>

<div style="height:800px"></div>

<h2><a id="cp2"></a>項目２</h2>

<div style="height:800px"></div>

<a href="#top">ページトップへ</a>

上記サンプルをブラウザで表示したら、下のようになります。リンクをクリックして目的の位置に移動されるか確認してください。

<a id=""></a>はサンプルにあるように、 開始タグと終了タグの間に文字を挟む必要はありません。