HTMLで複数のクラスを要素に付ける方法：div、h1、その他の要素の活用ガイド

YUKIKO@AIビジョナリスト（月275万セキュリティエンジニア職でオファー経験有り）

2025年4月25日 20:01

こんにちは！今回は、HTML要素に複数のクラスを付ける方法について詳しく解説します。divやh1などの要素に複数のクラスを適用することで、スタイリングやJavaScriptの処理をより柔軟に行うことができます。

1. クラスとは？基本の復習

クラス（class）は、HTML要素にラベルを付けるための属性です。CSSでスタイルを適用したり、JavaScriptで特定の要素を操作したりする際に使用します。

基本的なクラスの付け方

<div class="container">
  これはcontainerクラスを持つdiv要素です
</div>

<h1 class="title">
  これはtitleクラスを持つh1要素です
</h1>

2. 複数クラスの付け方と文法

HTML要素に複数のクラスを付ける場合は、クラス名をスペースで区切るだけです。これが最も重要なポイントです。

基本構文

<要素名 class="クラス1 クラス2 クラス3">
  内容
</要素名>

実際の例

<div class="container bg-gray rounded">
  これは3つのクラス（container、bg-gray、rounded）を持つdiv要素です
</div>

<h1 class="title large-text center-align">
  これは3つのクラス（title、large-text、center-align）を持つh1要素です
</h1>

重要なポイント

クラス名の間は半角スペース1つで区切ります
クラス名の順序は基本的に影響しません（CSSの特異性には影響する場合があります）
クラス数に理論上の制限はありませんが、管理しやすさを考慮して適切な数にしましょう

3. 複数クラスの実践的な使い方

3-1. レイアウトとスタイルの分離

<!-- レイアウト用クラスとスタイル用クラスを分ける -->
<div class="container flex-row"> <!-- レイアウト関連 -->
  <div class="card bg-blue text-white rounded"> <!-- スタイル関連 -->
    コンテンツ1
  </div>
  <div class="card bg-red text-white rounded"> <!-- スタイル関連 -->
    コンテンツ2
  </div>
</div>

3-2. 状態の表現

<!-- アクティブ状態を表現する -->
<ul class="nav-menu">
  <li class="nav-item active">ホーム</li> <!-- activeクラスが追加されている -->
  <li class="nav-item">サービス</li>
  <li class="nav-item">お問い合わせ</li>
</ul>

3-3. レスポンシブデザインの制御

<!-- 画面サイズに応じた表示制御 -->
<div class="content visible-pc hidden-sp">
  PCでのみ表示されるコンテンツ
</div>

4. クラスの命名規則とベストプラクティス

複数クラスを効果的に使うためには、命名規則が重要です。

4-1. BEM（Block, Element, Modifier）方式

<!-- BEM方式の例 -->
<div class="card card--featured card--large">
  <h2 class="card__title">カードのタイトル</h2>
  <p class="card__content">カードの内容</p>
</div>

Block: 独立したコンポーネント（例：card）
Element: Blockの一部（例：card__title）
Modifier: BlockやElementのバリエーション（例：card--featured）

4-2. 機能ベースの命名

<!-- 機能ベースの命名例 -->
<button class="btn primary large disabled">
  送信
</button>

4-3. ユーティリティクラスの活用

<!-- ユーティリティクラスの例 -->
<div class="mt-10 mb-20 p-15 text-center bold">
  余白や文字のスタイルをクラスで直接指定
</div>

5. 実践的なコード例

例1: カードコンポーネントに複数クラスを適用

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複数クラスの例</title>
  <style>
    /* ベースカードスタイル */
    .card {
      border: 1px solid #ddd ;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
    }
    
    /* サイズバリエーション */
    .card.small {
      max-width: 300px;
    }
    
    .card.medium {
      max-width: 500px;
    }
    
    .card.large {
      max-width: 800px;
    }
    
    /* カラーバリエーション */
    .card.primary {
      background-color: #e3f2fd ;
      border-color: #2196f3 ;
    }
    
    .card.success {
      background-color: #e8f5e9 ;
      border-color: #4caf50 ;
    }
    
    .card.warning {
      background-color: #fff8e1 ;
      border-color: #ffc107 ;
    }
    
    /* 共通ユーティリティクラス */
    .shadow {
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .rounded {
      border-radius: 16px;
    }
    
    .text-center {
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- 基本カード -->
  <div class="card">
    <h2>基本カード</h2>
    <p>これは基本的なカードです。</p>
  </div>
  
  <!-- 複数クラスを持つカード -->
  <div class="card medium primary shadow">
    <h2>中サイズのプライマリカード</h2>
    <p>これは中サイズのプライマリカラーで影付きのカードです。</p>
  </div>
  
  <!-- さらに複数クラスを持つカード -->
  <div class="card small warning rounded text-center">
    <h2>小さな警告カード</h2>
    <p>これは小さなサイズの警告カラーで角が丸く、テキストが中央揃えのカードです。</p>
  </div>
</body>
</html>

例2: 見出し要素に複数クラスを適用

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>見出しに複数クラス</title>
  <style>
    /* 見出しの基本スタイル */
    .heading {
      margin-bottom: 1rem;
      font-family: 'Arial', sans-serif;
    }
    
    /* サイズバリエーション */
    .heading.xl {
      font-size: 2.5rem;
    }
    
    .heading.lg {
      font-size: 2rem;
    }
    
    .heading.md {
      font-size: 1.5rem;
    }
    
    /* 装飾バリエーション */
    .heading.underline {
      border-bottom: 2px solid #333 ;
      padding-bottom: 0.5rem;
    }
    
    .heading.fancy {
      font-family: 'Georgia', serif;
      color: #663399 ;
    }
    
    /* 配置クラス */
    .text-center {
      text-align: center;
    }
    
    .text-right {
      text-align: right;
    }
    
    /* アニメーションクラス */
    .animated {
      transition: all 0.3s ease;
    }
    
    .animated:hover {
      transform: translateY(-3px);
      color: #f44336 ;
    }
  </style>
</head>
<body>
  <!-- 基本見出し -->
  <h1 class="heading">
    基本見出し
  </h1>
  
  <!-- 複数クラスを持つ見出し -->
  <h1 class="heading xl underline">
    大きな下線付き見出し
  </h1>
  
  <!-- さらに複数クラスを持つ見出し -->
  <h2 class="heading md fancy text-center animated">
    中サイズの装飾付き中央揃えでホバーアニメーション付き見出し
  </h2>
  
  <!-- 別の組み合わせ -->
  <h3 class="heading lg text-right">
    大きめの右揃え見出し
  </h3>
</body>
</html>

例3: 実践的なレイアウトとコンポーネント

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複数クラスの実践例</title>
  <style>
    /* リセット */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333 ;
    }
    
    /* レイアウトクラス */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    .row {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -15px;
    }
    
    .col {
      flex: 1;
      padding: 0 15px;
    }
    
    /* セクションクラス */
    .section {
      padding: 50px 0;
    }
    
    .section.hero {
      background-color: #f5f5f5 ;
      text-align: center;
    }
    
    .section.features {
      background-color: #fff ;
    }
    
    .section.contact {
      background-color: #333 ;
      color: #fff ;
    }
    
    /* 見出しクラス */
    .heading {
      margin-bottom: 1rem;
    }
    
    .heading.primary {
      color: #2196f3 ;
    }
    
    .heading.light {
      color: #fff ;
    }
    
    .heading.center {
      text-align: center;
    }
    
    /* カードクラス */
    .card {
      background: #fff ;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      border: 1px solid #eee ;
    }
    
    .card.shadow {
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .card.hover {
      transition: transform 0.3s ease;
    }
    
    .card.hover:hover {
      transform: translateY(-5px);
    }
    
    /* ユーティリティクラス */
    .mt-20 {
      margin-top: 20px;
    }
    
    .mb-20 {
      margin-bottom: 20px;
    }
    
    .text-center {
      text-align: center;
    }
    
    .bg-gray {
      background-color: #f9f9f9 ;
    }
    
    /* ボタンクラス */
    .btn {
      display: inline-block;
      padding: 10px 20px;
      border-radius: 4px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .btn.primary {
      background-color: #2196f3 ;
      color: white;
    }
    
    .btn.large {
      padding: 12px 24px;
      font-size: 18px;
    }
    
    .btn.rounded {
      border-radius: 30px;
    }
  </style>
</head>
<body>
  <!-- ヒーローセクション -->
  <section class="section hero">
    <div class="container">
      <h1 class="heading primary center">複数クラスの実践例</h1>
      <p class="mb-20">HTML要素に複数のクラスを適用することで、柔軟なスタイリングが可能です。</p>
      <a href="#features" class="btn primary large rounded">詳細を見る</a>
    </div>
  </section>
  
  <!-- 機能セクション -->
  <section id="features" class="section features">
    <div class="container">
      <h2 class="heading center mb-20">特徴</h2>
      
      <div class="row">
        <!-- カード1 -->
        <div class="col">
          <div class="card shadow hover">
            <h3 class="heading primary">再利用性</h3>
            <p>複数のクラスを組み合わせることで、コードの再利用性が高まります。</p>
          </div>
        </div>
        
        <!-- カード2 -->
        <div class="col">
          <div class="card shadow hover">
            <h3 class="heading primary">柔軟性</h3>
            <p>様々なクラスを組み合わせることで、柔軟なスタイリングが可能です。</p>
          </div>
        </div>
        
        <!-- カード3 -->
        <div class="col">
          <div class="card shadow hover">
            <h3 class="heading primary">保守性</h3>
            <p>機能ごとにクラスを分けることで、コードの保守性が向上します。</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- コンタクトセクション -->
  <section class="section contact">
    <div class="container">
      <h2 class="heading light center mb-20">お問い合わせ</h2>
      <div class="card bg-gray">
        <p class="text-center">この例では、様々な要素に複数のクラスを適用してレイアウトとスタイルを制御しています。</p>
        <div class="text-center mt-20">
          <a href="#" class="btn primary rounded">お問い合わせ</a>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

まとめ：複数クラスを効果的に活用するポイント

クラス名はスペースで区切る 複数のクラスを指定する基本ルールです。
1. <div class="card large shadow rounded">...</div>
単一責任の原則を意識する 1つのクラスは1つの役割（レイアウト、色、サイズなど）を持つようにする。
1. <div class="card primary large shadow">...</div>
ベースクラスと修飾クラスを分ける 基本となるスタイルと、それを変更する修飾を分けて考える。
1. <button class="btn primary large">送信</button>
命名規則を統一する チーム内で命名規則（BEM、機能ベースなど）を統一して混乱を避ける。
クラスの優先順位を理解する 複数のクラスでスタイルが競合する場合、CSSの詳細度や記述順序でスタイルが決まることを理解する。

この記事で紹介した方法を活用すれば、HTMLとCSSのコードをより効率的に、そして柔軟に書くことができるようになります。特に大規模なプロジェクトでは、複数クラスの活用がコードの保守性と再利用性を大きく向上させるでしょう。ぜひ実践してみてください！