【CSS入門 #03】クラス（.class）を使ってスタイルを当てよう！

6/24/2025

著者: yasuzaki

カテゴリ: CSS

タグ:

アイキャッチ

今回の目標

これまでタグ（h1, p など）に直接CSSを当ててきましたが、今回は**「クラス（class）」を使って自由にスタイルをコントロールする方法**を学びます。

複数の要素に同じスタイルを当てたいときに必須のテクニックです！

class属性とは？

HTMLの要素に class="クラス名" を付けることで、CSSで特定のスタイルを適用できるようになります。

<p class="important">これは重要な文章です。</p>

CSS側では「.クラス名」と書きます。

.important {
  color: red;
  font-weight: bold;
}

フォルダ構成とファイル

📁 my-site
├── index.html
└── style.css

CSSファイルの内容（style.css）

.important {
  color: red;
  font-weight: bold;
  font-size: 18px;
}

.note {
  color: gray;
  font-style: italic;
}

HTMLファイルの内容（index.html）

<!DOCTYPE html>
<html>
  <head>
    <title>CSSクラスの例</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p class="important">これは重要なメッセージです。</p>
    <p class="note">※補足情報として表示されます。</p>
  </body>
</html>

ポイント解説

  • class名は自由につけてOK（英数字・ハイフン推奨）
  • CSSでは . を頭につけて .クラス名 と書く
  • HTML要素に class="〜" をつけるだけで適用できる
  • 1つの要素に複数クラスをスペースで並べて付けることも可能
<p class="important note">重要だけど補足でもある文章</p>

よくあるつまずきポイント

  • クラス名の前に . を付け忘れる（CSS側）
  • スペルミスや大文字小文字の違い
  • CSSを読み込んでいない（linkタグのパス間違い）

まとめ

  • class 属性で自由なスタイル分類が可能に
  • .クラス名 でスタイルを適用できる
  • クラスは複数同時に適用でき、柔軟なデザインが可能

次回予告

次回は、要素の配置や並べ方の基本となる「ボックスモデル」と「margin・padding」の使い方に進みます！

＜＜ 前の記事：