【HTMLとCSS】div classの多用に違和感を感じたらdiv idを使ってみよう

HTMLとCSSを勉強しているとあっちもこっちも <div class> を使いまくっていました。

<div class=”〇〇”>
<div class=”〇〇”>
<div class=”〇〇”>
<div class=”〇〇”>
<div class=”〇〇”>

コードを見返すと気づけば全部にdiv class!

サイトとして表示させるだけならdiv classだらけでもいいのですが、好ましくはありません。

このdiv classの多用から一歩抜け出すためにまずは div id を使ってみましょう。

div classとは?

サイトはたくさんの要素でできています。

divというタグ内を要素ごとに分けるために使いますが、たくさんあるdivをclass名をつけてそれぞれを区別するために使います。

同じclass名をつけて、同じcssを適用することもできます。

idとは?

divと同じように使えますが、一つだけ異なる点があります。

それは「idは1度しか使えない」という点です。

<div class=”〇〇”>はなんども使うことができますが、<div id=”〇〇”>は一度しか使うことができません。

idはどのような時に使う?

では一度しか使えないidはどのような時に使うべきでしょうか。

Webサイト内で必ず一つしか使わないコンテンツなどに使います。

例えばヘッダーとフッターはサイト内に各一つしかありませんので、
<div id=”header”>や<div id=”footer”>として使うことができます。

idを使うときのCSS

div classはCSSでclass名の前に「 . (ドット)」をつけていましたが、
div idはCSSでid名の前に「 # (シャープ)」をつけます。

idを使うメリット

div classがなんども使えるなら別にdiv classを多用してもいいのではないか?と疑問に思うかもしれませんが

自分の書いたコードを他の人が読む時に、div idと書かれていたら一つしなないのだな、とわかります。

最後に

実はdiv classとdiv idの他にもタグはありますが、まずはすぐに使えそうなdiv idからマスターし、使い分けられるようにしましょう。