HTML/CSS 小林 秀樹

HTMLタグに必ずクラスをつけるべき理由

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月２桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

こんにちは。今回はHTMLタグになぜ必ずクラスをつけるべきなのか、その理由を解説していきます。

目次

タグの意味をわかりやすくするため

例えば、こんな要素があったとします。

htmlはこんな感じ。

1
2
3
4
5
6
7
8
9
10
11
12
 
<div>
  <div>
    <img src="./test.jpeg">
  </div>
  <div>
    <h3>見出しです</h3>
    <p>
      ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    </p>
  </div>
</div>

どうでしょう、どの要素が何に対応しているか非常に見づらいですね。これが数百行になると考えると、とても読めたものではありません。

クラスをつけると以下のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="Card">
  <div class="Card__Left">
    <img class="Card-Img" src="./test.jpeg">
  </div>
  <div class="Card__Right">
    <h3 class="Card-Headline">見出しです</h3>
    <p class="Card-Text">
      ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    </p>
  </div>
</div>

どの要素がどこに対応しているか、わかりやすくなりました。
まずは右側/左側でパーツが分かれていて、その中にそれぞれ画像やテキストなどが入っているんだとクラス名から判断できます。

CSSに対して扱いやすくするため

CSSからの観点でもクラスはつけたほうが良いです。
上記のHTMLに対して、クラスなしでcssを書くとこうなります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
body > div {
  border: 1px solid #ccc;
  width: 600px;
  display: flex;
  background-color: #eee;
}
body > div div:first-child {
  width: 40%;
  height: 100%;
}
body > div div:first-child img {
  display: block;
  width: 100%;
  height: auto;
}
body > div div:last-child {
  padding-left: 15px;
  padding-right: 15px;
  width: 60%;
  height: 100%;
}
body > div div:last-child h3 {
  margin-top: 15px;
  margin-bottom: 0;
  color: #111;
}
body > div div:last-child p {
  margin-top: 15px;
  margin-bottom: 0;
  color: #111;
}

子孫セレクタや直下セレクタ、果ては擬似セレクタを使って何重にもしないといけません。
また、セレクタが多重になるとその分ページの読み込み速度が遅くなるデメリットもあります。

なぜこんな書き方になるかというと、そうしなければ特定の要素を指し示せないからです。
例えばbody > divを単にdivと書いたとします。

1
2
3
4
5
6
7
8
 
//body > div を divに
div {
  border: 1px solid #ccc;
  width: 600px;
  display: flex;
  background-color: #eee;
}

そうすると以下のように崩れます。全てのdivに対してスタイルが当たってしまうからです。意図しない要素にスタイルが当たらないようにセレクタが多重になっていました。

クラスをつけた場合のCSSは以下の通りです。コメントでタグセレクタの時はどこだったか書いています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
//body > div
.Card {
  border: 1px solid #ccc;
  width: 600px;
  display: flex;
  background-color: #eee;
}
//body > div div:first-child
.Card__Left {
  width: 40%;
  height: 100%;
}
//body > div div:first-child img
.Card-Img {
  display: block;
  width: 100%;
  height: auto;
}
//body > div div:last-child
.Card__Right {
  padding-left: 15px;
  padding-right: 15px;
  width: 60%;
  height: 100%;
}
//body > div div:last-child h3
.Card-Headline {
  margin-top: 15px;
  margin-bottom: 0;
  color: #111;
}
//body > div div:last-child p
.Card-Text {
  margin-top: 15px;
  margin-bottom: 0;
  color: #111;
}

このように全て単一セレクタになりました。クラスが設定してあれば一発で目的の要素を指し示すことができますし、読み込み速度も早まります。
前述の「意図しない要素にスタイルが当たってしまう問題」も回避しやすいです。

まとめ

このように、HTML/CSSを書く時はクラスを付けた方が混乱しづらくなります。
最初は面倒かもしれませんが、ぜひクラスセレクタを使いこなしてみてください。

この記事を読んだ人へのおすすめ記事

HTMLだけじゃない？emmetを使ってCSSを爆速で書く方法

2019年3月29日

【html/css】よくあるWebページ、結局どう作るの？ 第0回

2019年2月6日

1 個のコメント

    • コメントを残す

    メールアドレスが公開されることはありません。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

    RECOMMENDこちらの記事も人気です。

    ABOUTこの記事をかいた人

    大学でプログラミングを学ぶ→経営に興味を持ち勉強→月２桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

    NEW POSTこのライターの最新記事