どうも7noteです。idにしかできない事があるんです。

コーディング始めたての頃はなんとなくclassを使っててidと何が違うのかよくわからないままという人は意外と多いんじゃないかなと思います。

何に使えるのかこの記事でハッキリさせます。

idのおさらい。

まず、書き方はこう。

<div id="hogehoge">ほげほげ</div>

id=""をタグの中に書きます。
同じid名は同じページに1つしか存在できないので注意！

そしてCSSはこう。

#hogehoge {
  font-size: 20px;
}

#hogehogeとid名の前に#を書きます。

①idを使ってページ内リンク

<ul>
  <li><a href="#menu1" >メニュー１</a></li>
  <li><a href="#menu2" >メニュー２</a></li>
  <li><a href="#menu3" >メニュー３</a></li>
</ul>

<div id="menu1">
～～～いろいろ書く～～～
</div>
<div id="menu2">
～～～いろいろ書く～～～
</div>
<div id="menu3">
～～～いろいろ書く～～～
</div>

このように書くことで、メニュー１をクリックすると、id="menu1"の場所まで瞬時にスクロールされます。
この仕組みをページ内リンクと言います。

またページ内リンクですが、違うページにアクセスした時にも使うことができます。

<!-- 別ページのidがmenu4のところにリンク -->
<a href="/page/#main4">次のページへ</a>

②離れたlabel要素とinput要素を関連付ける

<label for="hogehoge">ここをクリック</label>

<input value="あいうえお" id="hogehoge">

input要素にidを指定し、label要素に指定したidと同じ名前をforの中に入れます。
こうすることで、離れたinput要素を操作することが可能になります。

さらに詳しくは過去に書いた記事をどうぞ。
【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法

③classよりも優先されてCSSが効く

#red  {color: red;}   /* id */
.blue {color: blue;}  /* class */

この場合、#redが優先され文字色は赤色になります。
これはCSSセレクタの優先順位というものがあり、この順位が高い方が優先されてCSSが反映されます。

idとclassの場合、idの方が優先順位が高いため、両方指定していた場合でもidのCSSが反映されます。

詳しい計算方法は分かりやすくまとまったqiitaの記事があるので、こちらをご覧ください。

まとめ

idは同一ページ内には1つしか存在できないため、ヘッダーやフッターなどレイアウトを示す時くらいしか使われないことがほとんどですが、idにしかできない事はあります。

またjQueryの処理を行う際には、idの方がclassよりも処理がじゃっっっっっっっっかんだけ早くなる（はず）。
しっかりと自分で検証したわけではないのですが、一般的にはそのように言われています。
メンテナンス性もidをしっかりと使っている方が高くなる（手法にもよる）ので上級者を目指すのであればidをしっかり使い分けて書けるようマスターしたいところです！

おそまつ！