HTMLを学習すると必ず出てくるのが「class属性」です。
classを使えば、複数の要素に同じスタイルを適用できるため、Web制作では欠かせない存在です。
本記事では、初心者でも理解できるように
- class属性の基本
- CSSとの組み合わせ方
- よくある使い方の例
を、実際のサンプルコードとあわせて解説します。
class属性とは？基本の役割を理解しよう
HTMLのclass属性は、タグに名前（クラス名）をつけるための属性です。
CSSと組み合わせることで、同じclass名を持つ要素に共通のデザインを適用できます。
classを使うメリット
- 複数の要素に同じデザインを適用できる
- 再利用性が高く、効率的にコーディングできる
- CSSやJavaScriptと連携して動きをつけられる
👉 例えば、複数の段落（pタグ）に同じ文字色を設定する場合、classを使うとコードがシンプルになります。
class属性の基本的な書き方
class属性は以下のようにHTMLタグに記述します。
CSSで以下のように指定すると、同じclassを持つすべての要素にデザインが反映されます。
👉 このように、classは「複数のタグにまとめてデザインを適用したいとき」に使います。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
複数のclassを同時に指定する方法
class属性はスペースで区切って複数指定できます。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
👉 このように組み合わせることで、柔軟にデザインをカスタマイズできます。
classとidの違い
初心者がよく混乱するのが「class」と「id」の違いです。
- class属性 → 複数の要素に適用できる（再利用向き）
- id属性 → ページ内でひとつだけの要素に適用
👉 例えば、複数の段落を同じデザインにしたいときはclass、ページ内で唯一のナビゲーションなどに使うのはidです。
よく使われるclassの活用例
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
Summary
- class属性は複数の要素に同じスタイルを適用できる便利な機能
- CSSと組み合わせて使うのが基本
- 複数のclassを指定することで、柔軟なデザインが可能
- classは再利用向き、idは一つだけの要素に使う
HTMLのclassを理解すると、Web制作がグッと効率的になります。ぜひ練習しながら活用してみましょう。
（関連リンク → 【CSS入門】セレクタ(selector)とは？初心者にもわかりやすい3つの基本（タグ・クラス・ID）を解説
Comments