ページの内容が多い時に便利 aタグ(要素)を使ったページ内リンク
1つのページ内の情報が長くなった場合、上の方に戻ったり途中から確認したりする場合があります。
その際に便利なのがページ内リンクです。
リンクはaタグ(要素)を使うことには変わりありませんが、移動先には目印(ラベル)を設定する必要があります。
(別ページにリンクする際にはパスとファイル名を組み合わせますが、ページ内で移動先に指定するにはファイル名のような目印が無い為、ラベルという目印を利用する)
例えば、項目をクリックすると項目の場所まで移動するようなリンクや、上に戻るボタンを設けてページ上部に移動させる際に利用します。
移動したい場所にはラベルを利用しますが、ラベルはaタグのname属性で指定ができます。
<a name=”ラベル”>移動する先</a>
また、移動するリンクにもhref属性にラベルを使用しますが、#を付ける必要があります。
<a href=”#ラベル”>クリックする移動元</a>
別ページのラベル指定部に移動する際には、以下のように指定します。
<a href=”ページまでのパスとファイル名#ラベル”>クリックする移動元</a>
具体的には、以下のような記述となります。
(上に戻るの部分のみ、パスとファイル名も指定しています)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<a name="rei">以下例</a> <ol> <li><a href="#jump1">ページ内リンクを利用した移動先A</a></li> <li><a href="#jump2">ページ内リンクを利用した移動先B</a></li> <li><a href="#jump3">ページ内リンクを利用した移動先C</a></li> </ol> <h3><a name="jump1">ページ内リンクを利用した移動先A</a></h3> <p>内容を記述。</p> <h3><a name="jump2">ページ内リンクを利用した移動先B</a></h3> <p>内容を記述。</p> <h3><a name="jump3">ページ内リンクを利用した移動先C</a></h3> <p>内容を記述。</p> <p><a href="http://web-sai.info/html/tag-a-label#rei">上に戻る</a></p> |
補足:
最近ブログなどで多く使われている上へボタンをクリックすると、スクロール(アニメーション)しながら上に行くのはJQueryやライブラリを使用しています。
(検索で「JQuery 上へ」などと検索すると導入方法などを紹介しているページが閲覧できます)
スポンサードリンク
スポンサードリンク