HTML class 属性

Volardev 編集部 April 12, 2026

HTMLの class 属性は、要素に対して特定のスタイルクラスを定義するために使用されます。これにより、複数の要素に対して同一のスタイルを一括で適用したり、JavaScriptから特定の要素群を操作したりすることが可能になります。

1. class 属性の基本

class 属性は、HTML要素に対してクラス（class）を指定するために使用されます。

複数のHTML要素で同じクラスを共有することができ、これが後述する id 属性との大きな違いです。

2. CSS でのクラスの使用方法

CSS（Cascading Style Sheets）を使用して特定のクラスを持つ要素をスタイリングする場合、ピリオド（.）文字の後にクラス名を記述するクラスセレクタを使用します。

2.1 スタイリングの実装例

以下の例では、city というクラス名を持つすべての <div> 要素に対して、共通の背景色、文字色、余白を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>ロンドン</h2>
  <p>ロンドンはイギリスの首都です。</p>
</div>

<div class="city">
  <h2>パリ</h2>
  <p>パリはフランスの首都です。</p>
</div>

<div class="city">
  <h2>東京</h2>
  <p>東京は日本の首都です。</p>
</div>

</body>
</html>

3. インライン要素へのクラス適用

class 属性は、<span> などのインライン要素に対しても使用できます。これにより、文章中の特定の部分だけを強調したり装飾したりすることが容易になります。

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>私の <span class="note">重要な</span> 見出し</h1>
<p>これは <span class="note">重要な</span> テキストの一部です。</p>

</body>
</html>

^{4. 異なる要素タイプでのクラス共有}

異なるHTMLタグであっても、同じクラス名を割り当てることで共通のスタイルを適用できます。

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">ロンドン</h2>
<p class="city">ロンドンはイギリスの首都です。</p>

</body>
</html>

この例では、<h2> と <p> の両方に city クラスを適用し、同じデザインを共有させています。

5. 複数のクラスを指定する

HTML要素には、複数のクラスを同時に指定することができます。各クラス名は半角スペースで区切って記述します。

要素には、指定したすべてのクラスのスタイルが組み合わされて適用されます。

<h2 class="city main">ロンドン</h2>
<h2 class="city secondary">マンチェスター</h2>

この場合、<h2> 要素は city クラスのスタイルと main（または secondary）クラスの両方のスタイルを持つことになります。

6. JavaScript での class 属性の使用

JavaScriptを使用して、特定のクラスを持つ要素を操作することも一般的です。

JavaScriptでは、getElementsByClassName() メソッドを使用して、特定のクラスを持つ要素を取得できます。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript でのクラス操作</h2>
<p>ボタンをクリックすると、「city」クラスを持つすべての要素を非表示にします。</p>

<button onclick="myFunction()">要素を隠す</button>

<div class="city">
  <h2>ロンドン</h2>
  <p>ロンドンはイギリスの首都です。</p>
</div>

<div class="city">
  <h2>パリ</h2>
  <p>パリはフランスの首都です。</p>
</div>

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

</body>
</html>

7. まとめ

HTMLの class 属性をマスターすることは、モダンなフロントエンド開発において最も基礎的かつ重要なステップです。

項目	詳細
再利用性	同じクラス名を複数の要素で使用できる。
CSS セレクタ	`.`（ピリオド）から始まる名前で定義する。
複数指定	スペース区切りで一つの要素に複数の役割を持たせられる。
役割の分離	`id` は一意な要素の特定に、`class` は共通の装飾に使用する。