hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

ページ内リンクの利用例と id 属性

id 属性はページ内の固有の要素を示すもであるため、

1つの HTML ページ内に同じ id 名は1度しか使えない。

このようなルールを持っているのは、

CSS の id セレクタで装飾するためだけでなく、

ページ内リンクなどにも id 属性が利用されるためである。

 

例えば、

ページの最下部にある「ページの先頭へ戻る」といったリンクもページ内リンクであり、

その他、ページ目次などとしても利用される。

 

◉ 目次を使用した場合を例にとって考える。

       ⚫︎目次のリンクリストをクリックすると、ページ内の該当するセクションへ移動する。

    ⚫︎ ページ内に同じid 名の要素があると、クリックしても

   どちらへ移動すればいいかわからなくなってしまう。

 ⬇️

以上より、同じ id 名は1度しか使えない。

 

では、どのように区別すればいいのか??

  ⚫︎ 「 −(ハイフン)数字 」をつけるなど違いをつける。

  ⚫︎      id 属性じゃなく、 class 属性で名前をつける。

 

id 属性は、ページ内リンクのほかにも、

JavaAScript などのプログラムを実装した際、固有の要素を特定する場合に用いられる。

そのため、CSSを適用するためだけに id 属性を多用することは避けた方が良い。

 

一般的に、

ページのブロック分けやサイト名など、ページ内に1つしか存在しない要素であることを

明確にする際に id 属性を用いる。

その他の要素には、クラス属性などで指定しておくと良い。