ページの内容が多い時に便利 aタグ(要素)を使ったページ内リンク

1つのページ内の情報が長くなった場合、上の方に戻ったり途中から確認したりする場合があります。
その際に便利なのがページ内リンクです。

リンクはaタグ(要素)を使うことには変わりありませんが、移動先には目印(ラベル)を設定する必要があります。
(別ページにリンクする際にはパスとファイル名を組み合わせますが、ページ内で移動先に指定するにはファイル名のような目印が無い為、ラベルという目印を利用する)

例えば、項目をクリックすると項目の場所まで移動するようなリンクや、上に戻るボタンを設けてページ上部に移動させる際に利用します。

以下例

  1. ページ内リンクを利用した移動先A
  2. ページ内リンクを利用した移動先B
  3. ページ内リンクを利用した移動先C

ページ内リンクを利用した移動先A

内容を記述。

ページ内リンクを利用した移動先B

内容を記述。

ページ内リンクを利用した移動先C

内容を記述。

上に戻る

移動したい場所にはラベルを利用しますが、ラベルはaタグのname属性で指定ができます。
<a name=”ラベル”>移動する先</a>

また、移動するリンクにもhref属性にラベルを使用しますが、#を付ける必要があります。
<a href=”#ラベル”>クリックする移動元</a>
別ページのラベル指定部に移動する際には、以下のように指定します。
<a href=”ページまでのパスとファイル名#ラベル”>クリックする移動元</a>

具体的には、以下のような記述となります。
(上に戻るの部分のみ、パスとファイル名も指定しています)

補足:
最近ブログなどで多く使われている上へボタンをクリックすると、スクロール(アニメーション)しながら上に行くのはJQueryやライブラリを使用しています。
(検索で「JQuery 上へ」などと検索すると導入方法などを紹介しているページが閲覧できます)

スポンサードリンク
レクタングル広告(大)
レクタングル広告(大)
スポンサードリンク
レクタングル広告(大)

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)