複数の要素に同じスタイルを適用するCSSプロパティ：classセレクタ
Webページのデザインにおいて、複数の要素に同じスタイルを適用したい場面は多くあります。例えば、特定の段落を強調表示したり、ボタンのデザインを統一したりする場合などが挙げられます。このような場合に便利なのが、CSSの「classセレクタ」です。
classセレクタとは
classセレクタは、HTML要素に適用された「class属性」の値を基に、スタイルを適用する仕組みです。同じclass属性を持つ複数の要素に対して、同じスタイルを一括で適用することができます。
classセレクタの使い方
classセレクタを使用するには、以下の手順に従います。
- HTML要素にclass属性を追加し、任意の値を設定します。
<p class="highlight">強調表示したい段落です。</p> <button class="btn">ボタン</button> - CSSで、class属性の値をセレクタとして指定し、スタイルを定義します。
<style> .highlight { color: red; font-weight: bold; } .btn { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; } </style>
上記のように設定することで、「highlight」というclass属性を持つ段落には赤字と太字が、「btn」というclass属性を持つボタンには緑色の背景、白い文字、padding、ボーダーなしのスタイルが適用されます。
classセレクタのメリット
classセレクタを使用するメリットは以下の点が挙げられます。
| メリット | 説明 |
|---|---|
| 複数要素への適用 | 同じclass属性を持つ複数の要素に、同じスタイルを一括で適用できます。 |
| 柔軟なスタイル設定 | 異なるclass属性を組み合わせることで、より複雑なスタイル設定も可能です。 |
| 再利用性が高い | 一度定義したclassセレクタは、他のHTML要素にも繰り返し使用できます。 |
classセレクタ使用時の注意点
- class属性の値は重複して使用できますが、1つの要素に複数のclass属性を指定する場合は、半角スペースで区切って記述します。（例：<p class="highlight important">）
- class属性の値には、英数字、ハイフン、アンダースコアを使用できます。ただし、数字から始まる値や、ハイフンで始まる値は使用できません。
参考資料
関連QA
Q1. classセレクタとIDセレクタの違いは何ですか？
A1. classセレクタは複数の要素に同じスタイルを適用できますが、IDセレクタは1つの要素にのみ適用されます。ページ内でユニークな要素にスタイルを適用したい場合はIDセレクタ、複数の要素に共通のスタイルを適用したい場合はclassセレクタを使用します。
Q2. 複数のclassセレクタを組み合わせて使用できますか？
A2. はい、複数のclassセレクタを組み合わせて使用できます。要素に複数のclass属性を指定することで、複数のスタイルを同時に適用できます。
Q3. JavaScriptでclassセレクタを操作できますか？
A3. はい、JavaScriptでclassセレクタを操作できます。要素のclass属性を取得・追加・削除・変更することで、動的にスタイルを変更できます。
その他の参考記事:jquery css 複数