【HTML Living Standard】class属性の使い方
class属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
classプロパティは、HTML要素に適用されるクラス名、または複数のクラス名を保持するプロパティです。これは、HTMLのほとんど全ての要素で使用できるグローバル属性の一つです。class属性を使用すると、特定のHTML要素または複数の要素に、任意の名前（クラス名）を割り当てることができます。
このクラス名は、主に二つの目的で使用されます。一つは、CSS（Cascading Style Sheets）で特定の要素グループにスタイルを適用する際のセレクタとして機能することです。例えば、同じデザインを適用したい複数の見出しや段落に同じクラス名を付与し、そのクラス名に基づいてCSSで一括してスタイルを設定できます。もう一つは、JavaScriptにおいてDOM（Document Object Model）を操作する際に、特定の要素を識別し選択するための手段として利用されることです。開発者はdocument.querySelector('.className')のようなメソッドを使って、特定のクラス名を持つ要素を効率的に取得し、動的な処理を実装できます。
複数のクラス名を指定する場合は、半角スペースで区切って記述します。これにより、一つの要素が複数の特性や役割を持つことを表現できます。class属性は、ウェブページの構造とプレゼンテーション、および動作を分離するための重要な役割を果たし、保守性の高いコードを書く上で不可欠な要素です。
構文(syntax)
1<element class="classname1 classname2 ..."></element>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML class属性の複数指定でスタイルを適用する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML class属性の複数指定</title> 7 <style> 8 /* スタイルシートでクラスを定義します */ 9 10 /* .highlight クラスが適用された要素は背景が黄色になります */ 11 .highlight { 12 background-color: yellow; 13 } 14 15 /* .bold-text クラスが適用された要素は文字が太字になります */ 16 .bold-text { 17 font-weight: bold; 18 } 19 20 /* .large-font クラスが適用された要素は文字が大きく青色になります */ 21 .large-font { 22 font-size: 1.2em; 23 color: blue; 24 } 25 26 /* .bordered クラスが適用された要素は枠線と内側の余白が付きます */ 27 .bordered { 28 border: 1px solid #ccc; 29 padding: 10px; 30 margin-bottom: 10px; /* 下部に少し余白を追加 */ 31 } 32 </style> 33</head> 34<body> 35 36 <!-- 37 HTMLのclass属性には、スペースで区切ることで複数のクラス名を指定できます。 38 これにより、定義された複数のCSSスタイルが1つの要素にまとめて適用されます。 39 --> 40 <p class="highlight bold-text bordered"> 41 この段落には「highlight」「bold-text」「bordered」の3つのクラスが適用されています。<br> 42 背景が黄色で、文字が太字になり、枠線と内側の余白が付きます。 43 </p> 44 45 <div class="large-font bordered"> 46 このdiv要素には「large-font」「bordered」の2つのクラスが適用されています。<br> 47 文字が大きく青色になり、枠線と内側の余白が付きます。 48 </div> 49 50 <span class="highlight large-font"> 51 このspan要素には「highlight」「large-font」の2つのクラスが適用されています。<br> 52 背景が黄色で、文字が大きく青色になります。 53 </span> 54 55</body> 56</html>
HTMLのclass属性は、各HTML要素に名前（クラス名）を付けるためのグローバル属性です。これは、主にCSSで要素にスタイルを適用したり、JavaScriptで特定の要素を操作したりする際に使用されます。
このclass属性には、半角スペースで区切ることで複数のクラス名を指定することが可能です。これにより、定義された複数のCSSスタイルを1つのHTML要素にまとめて適用できます。例えば、ある要素に「背景色を変える」クラスと「文字を太字にする」クラスを同時に適用したい場合、それぞれのクラス名をスペースで区切って記述するだけで、両方のスタイルがその要素に適用されます。
class属性自体には、関数のように直接的な引数や戻り値の概念はありません。代わりに、属性の値として半角スペース区切りのクラス名を文字列として指定します。その結果として、指定されたクラス名に対応するCSSの定義がHTML要素に適用され、見た目やレイアウトが変更されるという形で要素の「挙動」が変化します。
提供されたサンプルコードでは、<p>要素にclass="highlight bold-text bordered"と指定することで、「背景が黄色になる（highlight）」、「文字が太字になる（bold-text）」、「枠線と余白が付く（bordered）」という三つのスタイルを同時に適用しています。同様に、<div>要素や<span>要素でも複数のクラスを組み合わせて、要素に様々なスタイルを複合的に適用できることを示しています。
HTMLのclass属性には、スペースで区切ることで複数のクラス名を指定できます。これにより、各クラスで定義されたスタイルが1つの要素に複合的に適用され、柔軟なデザインが可能です。
複数のクラスを適用する際、クラス名の順序はスタイルの適用結果に影響しません。ただし、異なるクラスで同じCSSプロパティが競合する場合、CSSのカスケードルールに従いスタイルが適用されることに留意してください。
クラスの多用は可読性やメンテナンス性を損なうため、注意が必要です。意味が明確なクラス名を使い、管理しやすい設計を心がけましょう。
HTML class属性でスタイルを適用する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML class属性の基本</title> 7 <style> 8 /* 9 * class属性に指定した名前（例: "highlight"）を使って、 10 * CSSで要素のスタイルを定義できます。 11 * 12 * classセレクタはドット(.)から始めます。 13 */ 14 15 /* 「highlight」クラスが適用された要素のスタイル */ 16 .highlight { 17 background-color: yellow; /* 背景色を黄色にする */ 18 padding: 10px; /* 内側の余白を設定 */ 19 border: 1px solid orange; /* 枠線を追加 */ 20 } 21 22 /* 「text-center」クラスが適用された要素のスタイル */ 23 .text-center { 24 text-align: center; /* テキストを中央揃えにする */ 25 color: #333; /* 文字色を濃いグレーにする */ 26 } 27 28 /* 「large-font」クラスが適用された要素のスタイル */ 29 .large-font { 30 font-size: 1.2em; /* フォントサイズを大きくする */ 31 font-weight: bold; /* 太字にする */ 32 } 33 </style> 34</head> 35<body> 36 <h1>HTMLのclass属性とは</h1> 37 38 <!-- class属性に「highlight」を指定した例 --> 39 <div class="highlight"> 40 <!-- このdiv要素には「highlight」クラスが適用され、CSSで定義されたスタイルが反映されます。 --> 41 <p>このブロックは「highlight」クラスによって背景が黄色になっています。</p> 42 </div> 43 44 <br> 45 46 <!-- class属性に「text-center」を指定した例 --> 47 <p class="text-center"> 48 <!-- このp要素には「text-center」クラスが適用され、テキストが中央揃えになります。 --> 49 この段落のテキストは中央揃えになります。 50 </p> 51 52 <br> 53 54 <!-- 複数のクラスを適用する例: スペースで区切って記述します --> 55 <p class="highlight text-center large-font"> 56 <!-- このp要素には「highlight」「text-center」「large-font」の3つのクラスが適用されています。 --> 57 この段落は、ハイライトされ、中央揃えで、さらに大きなフォントになります。 58 </p> 59 60 <br> 61 62 <!-- 同じクラスを複数の要素に適用する例 --> 63 <div class="large-font"> 64 <!-- このdiv要素内のh3とp要素も「large-font」クラスの影響を受けます。 --> 65 <h3>同じ「large-font」クラスが適用された見出し</h3> 66 <p>この段落も、同じ「large-font」クラスが適用されているため、大きなフォントになります。</p> 67 </div> 68</body> 69</html>
HTMLのclass属性は、ウェブページ内のHTML要素に名前（クラス名）を付けるためのグローバル属性です。この属性の主な目的は、CSS（Cascading Style Sheets）を使って複数のHTML要素に共通のスタイルを適用したり、JavaScriptで特定の要素を操作したりする際の識別子として利用することにあります。
サンプルコードでは、<div class="highlight">や<p class="text-center">のように、HTMLタグの属性としてclass="クラス名"の形式で記述します。CSS側では、.highlight { ... }や.text-center { ... }のように、ドット（.）の後にクラス名を記述することで、そのクラスが指定された要素にスタイルを適用できます。
一つの要素に複数のクラスを適用したい場合は、class="highlight text-center large-font"のように、スペースで区切って複数のクラス名を記述します。これにより、それぞれのクラスで定義されたスタイルがその要素に同時に適用されます。また、同じクラス名を異なる複数のHTML要素に指定することで、一度の定義で複数の要素に同じスタイルや動作を適用できるため、非常に効率的です。
class属性は、HTML要素に情報を付与するための属性であり、プログラミング言語の関数のように直接引数を受け取ったり、特定の値（戻り値）を返したりするものではありません。そのため、引数や戻り値は定義されていません。この属性を使いこなすことで、ウェブページの構造と見た目をきれいに分離し、効率的にデザインや機能を追加することが可能になります。
HTMLのclass属性は、要素に任意の名前を付け、CSSでそのスタイルを定義・適用するための重要な機能です。サンプルコードのように、一つの要素に複数のクラス名を半角スペースで区切って指定すると、複数のスタイルを組み合わせて適用できます。CSS側では、.クラス名のようにドット(.)を付けてスタイルを定義してください。クラス名は英数字、ハイフン、アンダースコアで構成することが一般的で、数字で始めることはできません。この属性を使うことで、同じスタイルを多くの要素に繰り返し適用でき、Webページのデザインを効率的に管理し、コードの再利用性と保守性を高めることができます。また、JavaScriptから特定の要素を操作する際の目印としても頻繁に利用されます。