HTML要素のclass属性

class属性は、HTML要素に対して1つ以上のCSSクラスを指定するために使用されます。この属性は、スタイリングやスクリプト操作を容易にするための主要な方法です。本章では、HTML要素（html）における class属性の使用法を詳しく解説します。

概要

class属性は、CSSやJavaScriptと連携するために用いられるグローバル属性の一つです。HTML文書の最上位要素である html に class属性を追加することで、以下の目的で利用されることがあります。

特定のスタイルを適用する。
JavaScriptでHTML文書全体を対象とした処理を行う。
クラス名を用いた状態管理。

属性の構文

class属性の値には、1つ以上のクラス名をスペース区切りで指定します。

例:

<html class="light-theme responsive">

light-theme: テーマを表すクラス名。
responsive: レスポンシブデザインに関するクラス名。

基本的なセレクタ

CSSで class 属性を使用する際には、クラス名に対応するセレクタを記述してスタイルを適用します。以下に、基本的なセレクタの使用例を示します。

単一クラス名を指定する場合

クラス名に基づいてスタイルを適用する基本的な方法です。

<html class="dark-theme">
  <head>
    <style>
      .dark-theme {
        background-color: #333;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h1>ダークテーマ</h1>
  </body>
</html>

この例では、.dark-theme セレクタが html 要素に適用されています。

複数クラス名を指定する場合

複数のクラス名を組み合わせてスタイルを適用できます。

<html class="dark-theme responsive">
  <head>
    <style>
      .dark-theme {
        background-color: #333;
        color: #fff;
      }
      .responsive {
        font-size: 1.2em;
      }
    </style>
  </head>
  <body>
    <h1>ダークテーマ + レスポンシブ</h1>
  </body>
</html>

この例では、dark-theme と responsive の両方のクラスが html 要素に適用され、それぞれのスタイルが有効になります。

子孫セレクタを使用する場合

html 要素内の子孫要素に対してスタイルを適用するには、子孫セレクタを使用します。

<html class="light-theme">
  <head>
    <style>
      .light-theme body {
        background-color: #fff;
        color: #000;
      }
    </style>
  </head>
  <body>
    <h1>ライトテーマ</h1>
    <p>このテーマでは背景が白く、文字色が黒になります。</p>
  </body>
</html>

この例では、.light-theme body セレクタを使用して、body 要素にスタイルを適用しています。

使用例

以下に、html 要素に class属性を追加して使用する例を示します。

CSSと連携する例

<html class="dark-theme">
  <head>
    <style>
      .dark-theme body {
        background-color: #333;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h1>ダークテーマ</h1>
    <p>このテーマでは背景が暗く、文字色が白になります。</p>
  </body>
</html>

この例では、dark-theme クラスを用いて、文書全体にダークテーマのスタイルを適用しています。

JavaScriptと連携する例

<html class="light-theme">
  <head>
    <script>
      const toggleTheme = () => {
        if (document.documentElement.classList.contains('light-theme')) {
          htmlElement.classList.replace('light-theme', 'dark-theme');
        } else {
          document.documentElement.classList.replace('dark-theme', 'light-theme');
        }
      }
    </script>
  </head>
  <body>
    <h1>テーマ切り替え</h1>
    <button onclick="toggleTheme()">テーマを切り替える</button>
  </body>
</html>

この例では、JavaScriptを使用して class属性を切り替えることで、テーマを変更する機能を実現しています。

注意事項

html 要素に class属性を指定する場合、そのクラス名が他の要素で使用されるクラス名と競合しないよう注意してください。
クラス名には英数字やハイフン（-）、アンダースコア（_）を使用できます。ただし、CSSセレクタやJavaScriptでの操作を考慮して、規則性のある命名を行うことが推奨されます。
ブラウザのデフォルトスタイルや既存のフレームワークのスタイルと衝突しないように注意しましょう。

まとめ

HTML要素（html）に class属性を設定することで、文書全体に特定のスタイルや動的な振る舞いを適用することが可能です。CSSやJavaScriptと連携する際には、class属性を活用することで効率的な開発が行えます。

HTML Living Standard/class属性