HTMLクラスを複数使う5つの方法！初心者向け徹底解説

はじめに
●HTMLクラスとは
- ○複数のクラスを使う理由
●複数のクラスを使う方法
●各方法のサンプルコード
●応用例とサンプルコード
まとめ

はじめに

この記事を読めば、HTMLのクラス属性を複数使う方法が身に付きます！

●HTMLクラスとは

HTMLのクラス属性（class）は、要素にスタイル（CSS）や振る舞い（JavaScript）を適用する際に使用されます。

クラスは複数の要素に同じ名前を付けることができるため、一括してスタイルや振る舞いを制御することができます。

○複数のクラスを使う理由

複数のクラスを使うことで、要素に異なるスタイルや振る舞いを組み合わせることが可能になります。

これにより、コードの再利用性が向上し、保守性も高まります。

●複数のクラスを使う方法

それでは、複数のクラスを使う方法を5つ紹介します。

○方法1：スペースで区切る

最もシンプルな方法は、class属性の値に複数のクラス名をスペースで区切って記述することです。

<div class="class1 class2 class3">複数のクラスを適用した要素です。</div>

○方法2：クラス名の組み合わせ

別の方法として、複数のクラス名を組み合わせることで、新しいクラスを作成することができます。

この方法では、既存のクラスをベースにして、新しいクラスを作成します。

<!-- HTML -->
<div class="class1 class1-variant">複数のクラスを組み合わせた要素です。</div>

<!-- CSS -->
<style>
  .class1 {
    /* 基本スタイル */
  }
  
  .class1-variant {
    /* 追加スタイル */
  }
</style>

○方法3：CSSセレクタを活用

複数のクラスを適用する際に、CSSセレクタを活用することができます。

これにより、複数のクラスが適用された要素に対して、特定のスタイルを適用することが可能になります。

<!-- HTML -->
<div class="class1 class2">複数のクラスを適用した要素です。</div>

<!-- CSS -->
<style>
  .class1.class2 {
    /* 両方のクラスが適用された要素に対するスタイル */
  }
</style>

○方法4：JavaScriptを利用

JavaScriptを利用して、動的に複数のクラスを適用することもできます。

これにより、イベントなどに応じてクラスを追加・削除することが可能になります。

<!-- HTML -->
<div id="target" class="class1">複数のクラスを適用したい要素です。</div>

<!-- JavaScript -->
<script>
  const target = document.getElementById('target');
  
  // クラスを追加
  target.classList.add('class2');

  // クラスを削除
  target.classList.remove('class1');
</script>

○方法5：カスタムデータ属性を使う

カスタムデータ属性（data-*）を使って、複数のクラスを適用することができます。

この方法では、要素に独自の属性を追加し、JavaScriptやCSSでその属性を利用します。

複数のクラスを適用した要素です。

●各方法のサンプルコード

上記で紹介した5つの方法に関連するサンプルコードを、まとめておきます。

スペースで区切る

<div class="class1 class2 class3">複数のクラスを適用した要素です。</div>

クラス名の組み合わせ

<!-- HTML -->
<div class="class1 class1-variant">複数のクラスを組み合わせた要素です。</div>

<!-- CSS -->
<style>
  .class1 {
    /* 基本スタイル */
  }
  
  .class1-variant {
    /* 追加スタイル */
  }
</style>

CSSセレクタを活用

<!-- HTML -->
<div class="class1 class2">複数のクラスを適用した要素です。</div>

<!-- CSS -->
<style>
  .class1.class2 {
    /* 両方のクラスが適用された要素に対するスタイル */
  }
</style>

JavaScriptを利用

<!-- HTML -->
<div id="target" class="class1">複数のクラスを適用したい要素です。</div>

<!-- JavaScript -->
<script>
  const target = document.getElementById('target');
  
  // クラスを追加
  target.classList.add('class2');

  // クラスを削除
  target.classList.remove('class1');
</script>

カスタムデータ属性を使う

<!-- HTML -->
<div class="class1" data-variant="class2">複数のクラスを適用した要素です。</div>

<!-- CSS -->
<style>
  .class1[data-variant="class2"] {
    /* class1とclass2が適用された要素に対するスタイル */
  }
</style>

<!-- JavaScript -->
<script>
  const target = document.querySelector('.class1[data-variant="class2"]');

  // クラスを追加
  target.classList.add(target.dataset.variant);
</script>

●応用例とサンプルコード

それでは、複数のクラスを使った応用例とサンプルコードを紹介します。

例1: 見出しのスタイルを組み合わせる

<!-- HTML -->
<h1 class="main-title main-title--red">赤い見出しです</h1>
<h1 class="main-title main-title--blue">青い見出しです</h1>

<!-- CSS -->
<style>
  .main-title {
    font-size: 2rem;
    font-weight: bold;
  }
  
  .main-title--red {
    color: red;
  }

  .main-title--blue {
    color: blue;
  }
</style>

例2: ボタンの状態を切り替える

<!-- HTML -->
<button id="myButton" class="btn btn--active">ボタン</button>

<!-- CSS -->
<style>
  .btn {
    /* ボタンの基本スタイル */
  }
  
  .btn--active {
    /* アクティブなボタンのスタイル */
  }
</style>

<!-- JavaScript -->
<script>
  const myButton = document.getElementById('myButton');

  myButton.addEventListener('click', () => {
    myButton.classList.toggle('btn--active');
  });
</script>

例3: タブメニューの切り替え

<!-- HTML -->
<ul class="tab-menu">
  <li class="tab-menu__item tab-menu__item--active" data-target="tab1">タブ1</li>
  <li class="tab-menu__item" data-target="tab2">タブ2</li>
  <li class="tab-menu__item" data-target="tab3">タブ3</li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-content__item">タブ1の内容です。</div>
  <div id="tab2" class="tab-content__item tab-content__item--hidden">タブ2の内容です。</div>
  <div id="tab3" class="tab-content__item tab-content__item--hidden">タブ3の内容です。</div>
</div>

<!-- CSS -->
<style>
  .tab-menu__item {
    /* タブメニューの基本スタイル */
  }
  
  .tab-menu__item--active {
    /* アクティブなタブメニューのスタイル */
  }
  
  .tab-content__item {
    /* タブコンテンツの基本スタイル */
  }
  
  .tab-content__item--hidden {
    display: none;
  }
</style>

<!-- JavaScript -->
<script>
  const tabMenuItems = document.querySelectorAll('.tab-menu__item');
  const tabContentItems = document.querySelectorAll('.tab-content__item');

  tabMenuItems.forEach((item) => {
    item.addEventListener('click', () => {
      // タブメニューのアクティブ状態を切り替え
      tabMenuItems.forEach((i) => i.classList.remove('tab-menu__item--active'));
      item.classList.add('tab-menu__item--active');

      // タブコンテンツの表示状態を切り替え
      tabContentItems.forEach((i) => i.classList.add('tab-content__item--hidden'));
      document.getElementById(item.dataset.target).classList.remove('tab-content__item--hidden');
    });
  });
</script>