CSSのクラス：特定の要素にスタイルを適用する

CSSの基本に続いて、「クラス」を学びました。クラスを使うことで、特定の要素だけにスタイルを適用できます。

問題：すべての要素に適用されてしまう

要素名をセレクタにすると、同じ要素すべてにスタイルが適用されてしまいます。

<p>この段落は赤色にしたい</p>
<p>この段落は青色にしたい</p>

p {
  color: red;
}

この場合、両方の <p> が赤色になってしまいます。

解決策：クラスを使う

クラスを使えば、特定の要素だけにスタイルを適用できます。

HTMLでクラスを指定

class 属性を使って、要素に名前をつけます。

<p class="red-text">この段落は赤色</p>
<p class="blue-text">この段落は青色</p>

CSSでクラスを指定

クラス名でCSSを指定する場合、先頭に .（ドット）が必要です。

.red-text {
  color: red;
}

.blue-text {
  color: blue;
}

重要: クラス名の前に . をつけることで、「これはクラスです」ということを示します。

要素名とクラス名の違い

セレクタ書き方対象
要素名p { }すべての <p> 要素
クラス名.red-text { }class="red-text" の要素のみ
/* 要素名：すべてのh1に適用 */
h1 {
  font-size: 30px;
}

/* クラス名：class="title"の要素にのみ適用 */
.title {
  color: blue;
}

クラス名は自由につけられる

クラス名は、分かりやすい名前を自由につけることができます。

<p class="introduction">導入文</p>
<p class="important">重要なお知らせ</p>
<p class="note">補足</p>

.introduction {
  font-size: 18px;
  color: #666;
}

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

.note {
  font-size: 14px;
  color: gray;
}

クラス名の命名ルール

  • 英数字、ハイフン（-）、アンダースコア（_）が使える
  • 数字で始めることはできない
  • 意味のある名前をつける
<!-- ✅ 良い例 -->
<div class="header">
<p class="main-text">
<span class="price-tag">

<!-- ❌ 避けるべき例 -->
<div class="a">
<p class="text1">
<span class="xxx">

同じクラスを複数の要素に適用

同じクラス名は、複数の要素に使えるます。

<h2 class="section-title">セクション1</h2>
<p>本文テキスト</p>

<h2 class="section-title">セクション2</h2>
<p>本文テキスト</p>

.section-title {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
}

すべての class="section-title" に同じスタイルが適用されます。

実用例：記事ページ

<article>
  <h1 class="article-title">HTMLとCSSの基礎</h1>
  
  <p class="lead-text">この記事では、HTMLとCSSの基本を学びます。</p>
  
  <h2 class="section-heading">HTMLとは</h2>
  <p class="body-text">HTMLは...</p>
  
  <h2 class="section-heading">CSSとは</h2>
  <p class="body-text">CSSは...</p>
</article>

.article-title {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
}

.lead-text {
  font-size: 18px;
  color: #666;
  line-height: 1.8;
}

.section-heading {
  font-size: 24px;
  color: #2c3e50;
  margin-top: 30px;
}

.body-text {
  font-size: 16px;
  line-height: 1.6;
}

今日の学びのポイント

  • クラス: 要素に名前をつけることができる
  • HTML: <p class="クラス名">
  • CSS: .クラス名 { } （先頭に . が必要）
  • 要素名セレクタはドット不要、クラスセレクタはドットが必要
  • クラス名は分かりやすい名前を自由につけられる
  • 同じクラスを複数の要素に使える

クラスを使うことで、HTMLの特定の部分だけにスタイルを適用できるようになります。これがCSSの強力な機能です。

コメント