CSSのメンテナンス性が良くなる「class名・id名」の付け方について
Webサイト制作において、classやidの理解はCSSを上手く適用させるためにも必須です。
HTMLタグにこのclass名やid名を付け、それをCSSのセレクタに指定することで、ピンポイントでCSSを適用させることができるようになるわけですが、ここではWeb制作を効率よく行うためのclass名・id名の付け方についてお伝えします。
※ただし、コードの書き方は人それぞれなので必ずしも正しいとは限らないことをご理解ください。
この記事の目次
class名・id名とは？
「class」「id」は、HTML属性の1つで、この属性に付けた値（class名・id名）をCSSやJavascriptのセレクタとして指定することで適用させることができるようになります。
（もちろん、全てのHTMLタグに設置することができます）
また、CSSの項目でもお伝えしていますが、このclass名・id名には以下のルールがあります。
- class名はページ内に同じ名前を複数設置できる。
- id名はページ内に1つしか設置してはいけない。
- 値を半角スペースで区切ることで、複数のclass名・id名を設定することができる。
ひとまずこのあたりのルールを覚えておけば良いでしょう。
class名・id名の必要性について
なぜclsass名・id名というのが必要になるのかと言いますと、Web制作では要素ごとにスタイル（CSS）を変える必要があるため、<header>や<footer>などページ内に１つしか使わないHTMLではあまり影響はありませんが、<div>などいろんなところでいろんな使い方をするようなHTMLタグの場合、すべての<div>が同じスタイルになってしまいます。
例として、「色違いのテキストをサイズ違いのボックスを設置する場合」で確認してみます。
HTML（class名を付けない場合）
<div>
<div>
<p>赤テキスト</p>
<p>200px × 200px</p>
</div>
<div>
<p>青テキスト</p>
<p>250px × 300px</p>
</div>
<div>
<p>緑テキスト</p>
<p>300px × 200px</p>
</div>
</div>
CSS
div {
display: flex;
gap: 20px;
margin-bottom: 50px;
background: #ccc;
}
p {
font-size: 18px;
color: #ff0000;
}
上記のようなコードでは、全てのHTMLタグに同じCSSが適用されるため、このような表示になってしまいます。
そういったことにならないよう、class名・id名を付けることで的確にCSSやJavascriptを適用させることができるようになります。
HTML
<div class="wrap">
<div class="box red">
<p>赤テキスト</p>
<p>200px × 200px</p>
</div>
<div class="box blue">
<p>青テキスト</p>
<p>250px × 300px</p>
</div>
<div class="box green">
<p>緑テキスト</p>
<p>300px × 200px</p>
</div>
</div>
CSS
.wrap {
display: flex;
gap: 20px;
margin-bottom: 100px;
}
.box {
font-size: 18px;
text-align: center;
background: #ccc;
padding: 10px;
}
.box.red {
color: red;
width: 200px;
height: 200px;
}
.box.blue {
color: blue;
width: 250px;
height: 300px;
}
.box.green {
color: green;
width: 300px;
height: 200px;
}
このようにclass名を付けてそれぞれにCSSを指定することで、的確にスタイルが反映されるようになります。
効率を良くする「class名・id名」の付け方
class名・id名を付けることで的確にCSSを適用させることができるのですが、あまり付けすぎるとCSSのコードが不必要に長くなったり、後の修正が大変になってしまいます。
そのため、これからお伝えする項目に加え、「セレクタ」の特性を理解しながらclass名・id名を付けていくことで、的確にかつメンテナンスがしやすいCSSを書くことができるようになります。
1.要素の役割をclass名・id名にする
基本的なclass名・id名の付け方としては、その要素の役割をそのままclass名・id名にすることです。
特にページ内に複数設置し、場所によって役割が変わる<div>などでは「〇〇-wrap」を親要素に付け、「〇〇-item」を子要素に付けることで、
- wrap=包む＝親要素
- item=個別のアイテム＝子要素
と「〇〇（役割）」の「〇〇（親・子要素、テキスト、画像など）」といった感じで付けようにすることで「ここな何のclass名か？」が一目でわかるようになり、メンテナンス性が良くなります。
他にも例として、「.newposts-img=class名newpostsにある画像」「.newposts-text=class名newpostsにあるテキスト」といった感じでclass名を付けるとわかりやすくなるかと思います。
2.同じスタイルを複数の要素に適用するときは、同じclass名を付ける。
こちらの画像のように同じレイアウトの要素を並べる場合、同じclass名を付けることでそれぞれに同じスタイルが適用され、ページ内に統一感が出ます。
※ただし、id名はページ内に1つしか使えないため、この方法はできません。
3.CSSのセレクタには「親子・子孫要素」で指定する。
こちらの画像のように、子要素（.newposts-item）の中の個別の要素（img,time,h3）が入っている場合、個別の要素それぞれにclass名を付けても良いのですが、HTMLタグが1つずつしかない場合はclass名を付けなくても「親子・子孫要素のセレクタ」を使うことで、的確にCSSを適用することができます。
セレクタは、半角スペースで区切ることで「XXの中にある〇〇」といった指定ができるため、
- 「.newposts-item img」＝「.newposts-itemの中にある<img>タグ」に対してCSSを適用
- 「.newposts-item h3」＝「.newposts-itemの中にある<h3>タグ」に対してCSSを適用
といった書き方をすることで、個別の要素にclass名を付けなくても「どこにする適用CSSか？」がわかりやすいセレクタになります。
1.で書いた内容とは少し矛盾する部分もありますが、自分が管理しやすい方法で書いていただくと良いでしょう。
4.複数のclass名を設定する
ヒーロー画像や文字・背景色など、「同じレイアウトだけど個別に変更したい要素がある」という状況はWeb制作をしているとよくあります。
その場合はclass名を複数付けることで、「大まかな設定は1つめのclass名で適用し、ページや要素ごとに切り替える時は2つ目のclass名で適用する」といったことができるようになります。
上記に書いているHTMLを再び例として取り上げます。
<div class="wrap">
<div class="box red">
<p>赤テキスト</p>
<p>200px × 200px</p>
</div>
<div class="box blue">
<p>青テキスト</p>
<p>250px × 300px</p>
</div>
<div class="box green">
<p>緑テキスト</p>
<p>300px × 200px</p>
</div>
</div>
この場合ですと、
- 大まかな部分（文字サイズ、背景色など）の設定は「.box」で指定。
- 個別の設定（文字色、ボックスの大きさ）を「.red .blue .green」で指定。
という感じでCSSを適用することができます。
他の例としては、ページによってヒーロー画像を切り替えたい場合、
<!-- トップページ -->
<div class="hero index">
<h1>ページタイトル</h1>
</div>
<!-- その他のページ -->
<div class="hero other">
<h1>ページタイトル</h1>
</div>
- 大まかな部分（要素の範囲、背景画像の設定など）の設定は「.hero」で指定。
- 個別の要素（背景に使用する画像、要素の範囲を変える場合）の設定は「.other」で指定。
とすることで、大まかな設定と個別の設定を分けてスタイルを適用することができるようになります。
このようにclass名を付けることで的確にCSSを適用させることができますが、セレクタの性質と組み合わせることで、見やすくてメンテナンスのしやすいコードを書くことができるようになります。
ですが、まだ理解の浅い段階では難しく感じるところもありますので、
- 1.要素の役割をclass名・id名にする
- 2.同じスタイルを複数の要素に適用するときは、同じclass名を付ける。
この2点に注意しながら書いていくと良いでしょう。
