CSSでクラスを複数指定する方法｜効率よくデザインを組み合わせるコツ

CSS

Webサイトを作っていると、CSSのクラスを複数つける場面はとても多いです。

例えば「赤色の文字かつ大きい文字」にしたいとき、どうやってCSSで書くのが正解なのでしょうか？

この記事では、以下のことを初心者にもわかりやすく解説します：

  • HTMLで複数クラスを付ける書き方
  • CSSで複数クラスを組み合わせる指定方法
  • よくある間違いと注意点
  • 実際の活用例とベストプラクティス
スポンサーリンク

HTMLで複数クラスを指定する方法

基本の書き方

HTMLではclass属性に空白（スペース）で区切って複数のクラス名を指定できます。

<p class="large red">これは大きくて赤いテキスト</p>

この場合、以下の2つのクラスが同時に適用されます：

  • large クラス
  • red クラス

3つ以上のクラスも可能

<div class="card shadow rounded primary">カード要素</div>

この要素には4つのクラスが適用されます：

  • card → カードの基本スタイル
  • shadow → 影をつける
  • rounded → 角を丸くする
  • primary → プライマリカラーを適用

なぜ複数クラスを使うの？

デザインの再利用性

従来の方法（非効率）

.large-red-text {
  font-size: 24px;
  color: red;
}

.large-blue-text {
  font-size: 24px;
  color: blue;
}

.small-red-text {
  font-size: 14px;
  color: red;
}

複数クラスを活用（効率的）

.large { font-size: 24px; }
.small { font-size: 14px; }
.red { color: red; }
.blue { color: blue; }

<p class="large red">大きくて赤いテキスト</p>
<p class="large blue">大きくて青いテキスト</p>
<p class="small red">小さくて赤いテキスト</p>

メリット

  1. コードの再利用：同じスタイルを何度でも使える
  2. 保守性の向上：色を変えたいときは1箇所だけ修正すればOK
  3. 組み合わせの自由度：必要なデザインだけを組み合わせ可能
  4. CSSファイルの軽量化：重複するコードが減る

実際の使用例

ボタンコンポーネント

<!-- 基本のボタン -->
<button class="btn">ボタン</button>

<!-- 大きな青いボタン -->
<button class="btn large primary">送信</button>

<!-- 小さな赤いボタン -->
<button class="btn small danger">削除</button>

<!-- 全幅のボタン -->
<button class="btn full-width">続行</button>

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.large { padding: 12px 24px; font-size: 18px; }
.small { padding: 4px 8px; font-size: 12px; }
.primary { background: #007BFF; color: white; }
.danger { background: #DC3545; color: white; }
.full-width { width: 100%; }

HTMLでは、クラス名を空白で並べるだけで複数のクラスを同時に使えます。

次は、それをCSS側でどう書くのかを見ていきましょう。

CSSで複数クラスを指定する書き方

パターン1：単独でそれぞれ書く

最も基本的な方法です。それぞれのクラスを個別に定義します。

.large {
  font-size: 24px;
}

.red {
  color: red;
}

<p class="large red">大きくて赤いテキスト</p>

この場合、両方のスタイルが同時に適用されます。

パターン2：複数クラスが同時についているときのみ適用

2つ以上のクラスが同時についているときだけに特別なスタイルを適用したい場合：

.large.red {
  text-decoration: underline;
  font-weight: bold;
}

重要なポイント：クラス名の間に空白を入れない

これは以下のHTMLにのみ適用されます：

<p class="large red">大きくて赤くて下線付きのテキスト</p>

より複雑な組み合わせ

.btn.large.primary {
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

これはbtn、large、primaryの3つのクラスがすべて付いているときだけ影をつけます。

パターン3：複数のクラスに同じスタイルを一括適用

カンマで区切ると、複数のクラスに同じスタイルを適用できます：

.large, .red, .bold {
  line-height: 1.8;
}

これは以下と同じ意味です：

.large { line-height: 1.8; }
.red { line-height: 1.8; }
.bold { line-height: 1.8; }

実用例

.primary, .secondary, .success, .danger {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary { background: #007BFF; color: white; }
.secondary { background: #6C757D; color: white; }
.success { background: #28A745; color: white; }
.danger { background: #DC3545; color: white; }

パターン4：子孫セレクタとの組み合わせ

.card .title {
  font-size: 18px;
  font-weight: bold;
}

.card.featured .title {
  color: #007BFF;
}

<div class="card">
  <h2 class="title">通常のタイトル</h2>
</div>

<div class="card featured">
  <h2 class="title">注目のタイトル（青色）</h2>
</div>

よくある間違いと注意点

HTMLでの間違い

❌ 間違い：クラス名にスペースを含める

<!-- これは間違い -->
<p class="large red text">...</p>
<!-- "large red text" という1つのクラス名として認識される -->

✅ 正しい：スペースで区切って複数クラスを指定

<!-- これが正しい -->
<p class="large red text">...</p>
<!-- large、red、text の3つのクラスとして認識される -->

ハイフンやアンダースコアは1つのクラス名

<p class="large-red-text">...</p>
<!-- これは "large-red-text" という1つのクラス名 -->

<p class="large_red_text">...</p>
<!-- これは "large_red_text" という1つのクラス名 -->

CSSでの間違い

❌ 間違い：空白を入れてしまう

.large .red {
  /* これは「.largeクラスの中にある.redクラス」という意味 */
  text-decoration: underline;
}

この場合、以下のHTMLにのみ適用されます：

<div class="large">
  <p class="red">このテキストに適用される</p>
</div>

✅ 正しい：空白なしで繋げる

.large.red {
  /* これは「.largeと.redの両方が付いている要素」という意味 */
  text-decoration: underline;
}

この場合、以下のHTMLに適用されます：

<p class="large red">このテキストに適用される</p>

セレクタの違いを理解しよう

子孫セレクタ（空白あり）

.parent .child {
  /* .parentの中にある.child要素 */
}

<div class="parent">
  <p class="child">適用される</p>
  <div>
    <span class="child">これも適用される</span>
  </div>
</div>

複数クラスセレクタ（空白なし）

.parent.child {
  /* .parentと.childの両方が付いている要素 */
}

<div class="parent child">適用される</div>
<div class="parent">適用されない</div>
<div class="child">適用されない</div>

優先順位（詳細度）について

基本的な優先順位

CSSでは、より具体的なセレクタが優先されます：

.red {
  color: red;
}

.blue {
  color: blue;
}

.large.red {
  color: orange; /* この色が適用される */
}

<p class="large red blue">オレンジ色になる</p>

詳細度の計算

セレクタ詳細度例
単一クラス0,0,1,0.red
複数クラス0,0,2,0.large.red
子孫セレクタ0,0,2,0.parent .child
ID + クラス0,1,1,0#header .title

同じ詳細度の場合

後に書かれたスタイルが優先されます：

.red { color: red; }
.blue { color: blue; } /* こちらが適用される */

<p class="red blue">青色になる</p>

実践的な活用例

ユーティリティクラスシステム

スペーシング

.m-0 { margin: 0; }
.m-1 { margin: 8px; }
.m-2 { margin: 16px; }
.m-3 { margin: 24px; }

.p-0 { padding: 0; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }

.mt-1 { margin-top: 8px; }
.mb-2 { margin-bottom: 16px; }
.px-3 { padding-left: 24px; padding-right: 24px; }

使用例

<div class="card p-3 m-2">
  <h2 class="title mb-2">カードタイトル</h2>
  <p class="mt-1">カードの内容です。</p>
</div>

レスポンシブクラス

.text-center { text-align: center; }
.text-left { text-align: left; }

@media (max-width: 768px) {
  .mobile-text-center { text-align: center; }
  .mobile-hidden { display: none; }
}

@media (min-width: 769px) {
  .desktop-text-left { text-align: left; }
  .desktop-only { display: block; }
}

<div class="text-left mobile-text-center">
  デスクトップでは左寄せ、モバイルでは中央寄せ
</div>

状態クラス

.button {
  padding: 10px 20px;
  border: none;
  background: #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button.active {
  background: #007BFF;
  color: white;
}

.button.disabled {
  background: #ddd;
  color: #999;
  cursor: not-allowed;
}

.button.loading {
  position: relative;
  color: transparent;
}

.button.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

<button class="button">通常</button>
<button class="button active">アクティブ</button>
<button class="button disabled">無効</button>
<button class="button loading">読み込み中</button>

コンポーネント指向の設計

/* ベースコンポーネント */
.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* バリエーション */
.card.large {
  padding: 30px;
}

.card.small {
  padding: 15px;
}

.card.bordered {
  border: 1px solid #ddd;
  box-shadow: none;
}

.card.elevated {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.card.primary {
  background: #007BFF;
  color: white;
}

<div class="card">基本カード</div>
<div class="card large primary">大きな青いカード</div>
<div class="card small bordered">小さなボーダー付きカード</div>
<div class="card elevated">影付きカード</div>

現代的なアプローチ

BEMとの組み合わせ

/* Block */
.card { }

/* Element */
.card__title { }
.card__content { }

/* Modifier */
.card--large { }
.card--primary { }

<div class="card card--large card--primary">
  <h2 class="card__title">タイトル</h2>
  <div class="card__content">内容</div>
</div>

CSS-in-JSライブラリとの併用

// styled-components の例
const StyledButton = styled.button.attrs(props => ({
  className: `btn ${props.variant} ${props.size}` 
}))`
  /* ベーススタイル */
`;

ユーティリティファースト（Tailwind CSS風）

<div class="bg-white p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4">タイトル</h2>
  <p class="text-gray-600">内容</p>
</div>

パフォーマンスと保守性

CSSファイルサイズの最適化

良い例：共通化されたクラス

.btn { /* 共通スタイル */ }
.primary { background: #007BFF; }
.large { padding: 12px 24px; }

悪い例：重複の多いクラス

.btn-primary-large {
  /* 全スタイルを毎回記述 */
  padding: 12px 24px;
  background: #007BFF;
  /* ... */
}
.btn-secondary-large {
  /* 重複したスタイル */
  padding: 12px 24px;
  background: #6C757D;
  /* ... */
}

命名規則の統一

/* 一貫した命名規則 */
.text-sm { font-size: 14px; }
.text-md { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 24px; }

.color-primary { color: #007BFF; }
.color-secondary { color: #6C757D; }
.color-success { color: #28A745; }
.color-danger { color: #DC3545; }

HTMLの可読性

良い例：意味が分かりやすい

<button class="btn large primary">
  送信ボタン
</button>

改善の余地：クラスが多すぎる

<button class="btn btn-large btn-primary btn-rounded btn-shadow btn-animated">
  送信ボタン
</button>

この場合は、いくつかのクラスをまとめることを検討しましょう。

まとめ

CSSで複数クラスを効果的に使うためのポイントをおさらいします：

HTMLでの指定方法

  • 空白で区切る：class="large red bold"
  • 順序は関係ない：class="red large bold"でも同じ
  • ハイフンやアンダースコアは1つのクラス名として認識される

CSSでの指定方法

個別に定義

.large { font-size: 24px; }
.red { color: red; }

組み合わせ条件

.large.red { font-weight: bold; } /* 両方が付いているとき */

一括適用

.large, .red { line-height: 1.8; } /* どちらかが付いているとき */

成功のポイント

  1. 再利用性を意識する：小さな単位でクラスを作る
  2. 命名規則を統一する：チーム開発では特に重要
  3. 詳細度を理解する：スタイルの優先順位を把握
  4. 適度な粒度を保つ：細かすぎても粗すぎてもダメ
  5. 保守性を考慮する：将来の変更に対応しやすくする

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました