HTMLに付けるclass(クラス)ってなに?すごく簡単に説明します【学校のクラスと同じです】

うーさん

HTMLにつけるclassの意味が分かりません。どうして付ける必要があるの??

この記事ではこんな疑問にお答えします。

classを付けるのは、divやsection部分の固まりに、名前を付けてグループ分けするためです。

グループ分けできれば、CSSで装飾するのが楽になるんです。

グループに名前をつけて分かりやするするためにclassをつけます。

classをつけるメリットとは

classを付けるとコードのかたまりに名前を付けることができます。

子供がたくさんいる公園で、1年生だけに帽子をかぶらせるのって大変ですよね。

だれが1年生がわからない。

ですが、1年生が黄色のTシャツを着ていれば、一目でわかります。

簡単に1年生に帽子をかぶらせることができますね。

<div>や<section>にclassをつけるのも、名前を付けてグループ分けするためです。

HTMLにclassをつけてCSSで装飾する具体例

<p class=”morning”>おはよう</p>

<p class=”afternoon” >こんにちは</p>

<p class=evening”” >こんばんは</p>

上のようなHTMLを書いてみます。

ここで、全ての文章を赤色にしたい場合は、

p {

color: red;

}

とCSSで書きます。

でも、「こんにちは」だけ赤くした時ってありますよね?(ないかな。。。)

そんな時にclassが威力を発揮します。

. afternoon {

color: red;

}

とCSSで記載すれば、「こんにちは」だけが赤くなってくれます。

classの名前の付け方はどうするの

classの名前の付け方は奥が深いのですが、最初から完璧に覚える必要はありません。

まずを次のことを覚えてください。

  • 使える記号は半角英数だけ
  • 記号は「-」(ハイフン)、「_」(アンダースコア)だけ
  • 数字から始めない
  • 日本語ローマ字は使わない(ex. ✖otoiawase 〇contact)

慣れてきたら、徐々に命名規則を覚えていきましょう

CSSにはクラス名をコピペする

HTMLを書いて、CSSにクラス名を記述するときは、必ずコピペしてください。

なぜなら、class名にスペルミスがあるとCSSが反映されないからです。

そして、CSSが反映されない原因がわからない → 正解な部分のコードをいじりだす

→原型が分からなくなる →時間ばかりが過ぎていく

という負のループに入るからです。

かならずコピペしましょう!

classはHTMLグループに名前を付ける

classをつけると、HTMLのグループを装飾しやすくなります。

最初は、思いついたグループ名をつけてみてください。

徐々に慣れてきますよ。

深く悩みすぎずに、前に進むことも意識してください。

それでは。