【HTML】 ページ内リンクについて
カテゴリ : html/css, HTMLとは同じページ内で移動をするページ内リンクについて説明をします。
1ページの高さが大きい場合、ユーザーはスクロールをして下のコンテンツを閲覧することとなります。
ページ上部にページ中部や下部へ移動するナビゲーションが設置されていると、ページ内の移動がスムーズになり使いやすいページとなります。
ページ内リンクの記述法
リンクの記述はこれまで通りa要素のhref属性で指定を行います。
移動したいページのid名を「#id名」の形式で記述します。
記述例：
<div class="container"> <nav> <ul> <li><a href="#content1">コンテンツ1へ移動する</a></li> <li><a href="#content2">コンテンツ2へ移動する</a></li> <li><a href="#content3">コンテンツ3へ移動する</a></li> </ul> </nav> <article> <section id="contents"> <p>コンテンツ1のエリアになります。</p> </section> <section id="contents"> <p>コンテンツ2のエリアになります。</p> </section> <section id="contents"> <p>コンテンツ3のエリアになります。</p> </section> </article> </div>
上の記述でページ上部のナビゲーション（nav要素部分）から、各コンテンツ（section要素部分）へ移動します。
id属性の記述法
HTMLの要素に特別な名前を付ける際にid属性を使用し、値で名前を指定します。
指定したい要素の開始タグ内に「id=”id名”」の形で記述を行います。
記述例：
<section id="contents"> <p>コンテンツ1のエリアになります。</p> </section>
id属性の記述ルール
id名は基本的に空白文字を使うことができず、また1つの文書内（ページ内）で一意である必要があります。
同じid名を同じ文書内で使用することはできません。
全角・半角は問いませんが、他のプログラムと関わることを考慮して半角英数字で記述するのが無難です。
記号もハイフンまたはアンダーバーを使うと良いでしょう。
