【CSS】セレクタに複数のクラスを指定する方法

セレクタに複数のクラスを指定する方法について、ご説明します。

基本的な指定方法

複数のクラスを指定する場合は、クラス属性の中で、スペースを使って区切ります。

<div class="box red-bg large-text">複数クラスの例</div>

これで、一つの要素に3つのクラスを適用できます。

複数クラス指定のメリット

1. スタイルの再利用性アップ: 共通のスタイルを別々のクラスに分けることで、組み合わせて使い回せます。
2. 細かいスタイル調整が可能: 要素ごとに必要なクラスだけを追加できるので、柔軟なデザイン調整ができます。

実践的な使用例

例えば、ブログの記事タイトルにこんな風に使えます：

<h2 class="article-title large-heading blue-text">HTMLでクラスを使いこなそう！</h2>

この例では、「article-title」「large-heading」「blue-text」という3つのクラスを同時に適用しています。

CSSでの活用法

複数クラスを持つ要素に対して、特定の組み合わせにだけスタイルを適用したいときは、CSSでこんな風に書けます。

<h2 class="article-title large-heading blue-text">HTMLでクラスを使いこなそう！</h2>
<h2 class="article-title large-heading red-text">HTMLでクラスを使いこなそう！</h2>

<style>
.article-title.blue-text {
  /* article-titleで、かつblue-textのクラスを持つ要素にのみ適用されるスタイル */
  text-decoration: underline;
  color:blue;
}
</style>

これで、青い記事タイトルだけに下線を引くことができます。

まとめ

複数クラスの指定は、HTMLとCSSを使ったウェブデザインの可能性を大きく広げてくれます。柔軟性が高く、コードの再利用性も向上するので、ぜひ積極的に活用してみてください。

デザインの幅が広がり、より効率的なコーディングができるようになります。