HTMLのclass属性とは？使い方やid属性との違いを初心者向けに解説

HTMLを学習していると、タグの中に「class」と書かれているコードをよく見かけます。しかし、「class属性は何のために使うの？」「id属性とは何が違うの？」「CSSとどう関係しているの？」と疑問に感じる方も多いのではないでしょうか。

この記事では、HTMLのclass属性の意味や使い方、CSSとの関係、id属性との違いを初心者向けにわかりやすく解説します。サンプルコード付きで紹介するので、HTMLとCSSを学び始めたばかりの方もぜひ参考にしてください。

オススメ：HTML・CSSの基礎を無料で学べる初心者向け講座はこちら
関連記事：「HTML・CSSが反映されない原因とは？初心者が確認したい対処法を解説」

HTMLのclass属性とは？

class属性とは、HTML要素に名前を付けてグループ化するための属性です。主にCSSやJavaScriptと組み合わせて使用され、特定の要素にデザインや動作を適用するときに活用されます。例えば、Webページ内の複数のボタンに同じデザインを適用したい場合、それぞれの要素に同じclass名を設定することで、一括して管理できます。

class属性の役割

class属性の役割は、複数のHTML要素を同じグループとして扱えるようにすることです。
例えば、以下のように複数の要素へ同じclass名を付けることができます。

<p class="text">文章A</p>
<p class="text">文章B</p>
<p class="text">文章C</p>

この場合、「text」というclass名を持つすべての要素に対して同じCSSを適用できます。

.text {
  color: blue;
}

すると、3つの文章すべてが青色で表示されます。
このように、共通のデザインや設定をまとめて適用できるのがclass属性の大きな特徴です。

なぜclass属性が必要なのか

もしclass属性がなければ、要素ごとに個別のCSSを記述する必要があります。
例えば、複数のボタンを同じデザインにしたい場合でも、一つひとつ指定しなければなりません。
しかし、class属性を利用すれば共通の名前を付けるだけで済みます。

<button class="btn">送信</button>
<button class="btn">確認</button>
<button class="btn">戻る</button>

.btn {
  background-color: #333;
  color: #fff;
}

このように、一度CSSを設定するだけで複数のボタンに同じデザインを適用できます。Webページの規模が大きくなるほど管理しやすくなるため、実際のWeb制作では欠かせない仕組みです。

CSSとの関係

class属性は、CSSから特定のHTML要素を指定するための目印として利用されます。
例えば、同じデザインを複数の要素に適用したい場合、共通のclass名を付けることで一括管理できます。HTMLでclass名を設定し、CSSでそのclass名を指定することで見た目を変更できます。そのため、Web制作ではHTMLとCSSをつなぐ重要な役割を担っています。また、class属性はCSSだけでなく、JavaScriptで要素を取得する際にも利用されます。

HTMLでclass属性を使う方法

class属性は、HTML要素に名前を付けてCSSやJavaScriptから利用しやすくするための属性です。基本的な使い方は難しくありませんが、正しい書き方を理解しておくことで、効率的にWebページを作成できるようになります。ここでは、class属性の基本的な書き方から、CSSでの指定方法、複数のclassを設定する方法まで解説します。

基本的な書き方

class属性は、HTMLタグの中に「class=”クラス名”」という形式で記述します。

<p class="text">
  サンプルテキスト
</p>

この例では、「text」がclass名です。
class名は自由に設定できますが、後から見ても役割がわかる名前を付けるのが一般的です。

例えば、以下のような名前がよく使われます。

title（見出し）
text（文章）
button（ボタン）
header（ヘッダー）
footer（フッター）

class属性はdivタグだけでなく、pタグやh1タグ、buttonタグなど、ほとんどのHTML要素で使用できます。

CSSでclassを指定する方法

HTMLで設定したclass名は、CSSから指定してデザインを適用できます。
CSSでclassを指定する場合は、class名の先頭に「.（ドット）」を付けます。

<p class="text">
  サンプルテキスト
</p>

.text {
  color: blue;
  font-size: 20px;
}

上記の場合、「text」というclass名が付いた要素の文字色が青色になり、文字サイズが20pxで表示されます。同じclass名が付いた要素には、すべて同じスタイルが適用されます。

<p class="text">文章A</p>
<p class="text">文章B</p>
<p class="text">文章C</p>

このように、一度CSSを設定するだけで複数の要素をまとめてデザインできるのがclass属性のメリットです。

複数のclassを設定する方法

class属性には、複数のclass名を設定することもできます。
複数指定する場合は、半角スペースで区切って記述します。

<button class="btn primary">
  送信する
</button>

この場合、「btn」と「primary」の2つのclassが設定されています。
CSSはそれぞれ個別に指定できます。

.btn {
  padding: 10px 20px;
  border-radius: 5px;
}

.primary {
  background-color: blue;
  color: white;
}

すると、ボタンの形状は「btn」、色は「primary」のスタイルが適用されます。

この方法を使うと、共通デザインと個別デザインを分けて管理できるため、実際のWeb制作でもよく利用されています。例えば、「btn」はすべてのボタンに共通のデザイン、「primary」はメインボタン専用のデザインとして使い分けることができます。複数のclassを活用することで、コードの重複を減らしながら効率的にスタイルを管理できるようになります。

class属性とid属性の違い

class属性とid属性は、どちらもHTML要素に名前を付けるための属性です。そのため、初心者の方は「何が違うの？」と疑問に感じることも少なくありません。どちらもCSSやJavaScriptで利用できますが、用途やルールには明確な違いがあります。Web制作では、それぞれの特徴を理解して使い分けることが大切です。

classは何度でも使える

class属性の最大の特徴は、同じ名前を複数の要素で共有できることです。例えば、複数のボタンに同じデザインを適用したい場合は、すべての要素に同じclass名を設定できます。

<button class="btn">送信</button>
<button class="btn">確認</button>
<button class="btn">戻る</button>

CSSで以下のように指定すると、すべてのボタンに同じスタイルが適用されます。

.btn {
  background-color: #333;
  color: #fff;
}

このように、共通のデザインや設定を複数の要素に適用したい場合はclass属性を使用します。
実際のWeb制作では、class属性を使う場面が非常に多くあります。

idはページ内で1回だけ使う

id属性は、ページ内で特定の要素を識別するために使用します。
class属性とは異なり、同じid名を1つのページ内で複数回使用することはできません。

<h1 id="main-title">
  HTML入門
</h1>

例えば、ページのメイン見出しや特定のセクションなど、唯一の要素に対して設定するのが一般的です。また、id属性はページ内リンクにも利用できます。

<a href="#contact">お問い合わせへ移動</a>

<h2 id="contact">
  お問い合わせ
</h2>

このように指定すると、リンクをクリックした際に「お問い合わせ」セクションへ移動できます。

現在のWeb制作では、デザインの指定にはclass属性を使用し、id属性はページ内リンクやJavaScriptの処理で利用することが多くなっています。

CSSでの指定方法の違い

class属性とid属性は、CSSで指定する方法も異なります。
class属性を指定する場合は、class名の先頭に「.（ドット）」を付けます。

.title {
  color: blue;
}

一方、id属性を指定する場合は「#（シャープ）」を付けます。

#main-title {
  color: red;
}

HTMLでは以下のように記述します。

<h1 class="title">
  見出しA
</h1>

<h1 id="main-title">
  見出しB
</h1>

CSSでは、class属性は「.（ドット）」、id属性は「#（シャープ）」を使って指定します。用途に応じて使い分けることが大切です。ただし、近年のWeb制作ではスタイル指定の多くをclass属性で行うのが一般的です。まずは「複数の要素で共有するならclass」「特定の要素を識別するならid」と覚えておくとよいでしょう。

class名を付けるときのポイント

class属性は自由に名前を付けられますが、どのような名前でもよいわけではありません。
わかりにくいclass名を付けると、後からコードを修正する際に管理が難しくなります。また、命名ルールが統一されていないと、チーム開発で混乱の原因になることもあります。ここでは、class名を付ける際に意識したいポイントを紹介します。

わかりやすい名前を付ける

class名は、要素の役割や用途がわかる名前を付けることが大切です。例えば、以下のような名前は役割が想像しやすく、コードを見返したときにも理解しやすくなります。

<header class="header"></header>
<nav class="navigation"></nav>
<button class="button">送信</button>

一方で、以下のような名前は何を表しているのか分かりにくくなります。

<div class="box1"></div>
<div class="test"></div>
<div class="sample"></div>

学習中は問題なくても、コード量が増えると管理が難しくなるため、できるだけ意味が伝わる名前を付けるようにしましょう。

日本語や特殊文字は避ける

class名には英数字やハイフン（-）、アンダースコア（_）を使用するのが一般的です。日本語や特殊文字を使用すると、環境によっては予期しないトラブルが発生する可能性があります。

例えば、以下のようなclass名は避けた方が無難です。

<div class="見出し"></div>
<div class="ボタン"></div>
<div class="button#"></div>

代わりに、英語でシンプルに表現するのがおすすめです。

<div class="title"></div>
<div class="button"></div>
<div class="contact-form"></div>

また、class名の先頭に数字を使用することもできますが、CSSで扱いづらくなる場合があります。

<div class="1box"></div>

実際のWeb制作では、class名は英字から始めるのが一般的です。

命名ルールを統一する

Web制作では、class名の付け方を統一することも重要です。例えば、同じページ内で以下のように書き方がバラバラになっていると管理しづらくなります。

mainTitle
main_title
main-title
MainTitle

どれも間違いではありませんが、プロジェクトごとにルールを決めて統一するのが一般的です。
特にWeb制作では、単語をハイフンでつなぐ「ケバブケース」がよく使われます。

main-title
contact-form
news-list
button-primary

命名ルールが統一されていると、コードの可読性が向上し、修正や管理もしやすくなります。学習段階から「わかりやすい名前を付ける」「命名ルールを揃える」ことを意識しておくと、実務でもスムーズに対応できるようになるでしょう。

class属性を使う際の注意点

class属性は非常に便利な機能ですが、使い方を間違えるとCSSが反映されなかったり、コードの管理が難しくなったりすることがあります。特にHTMLやCSSを学び始めたばかりの方は、些細なミスで思った通りに表示されないことも少なくありません。

class名のスペルミスに注意する

class属性で最も多いトラブルの一つがスペルミスです。HTMLとCSSでclass名が少しでも異なると、スタイルは適用されません。例えば、以下のようなケースです。

<p class="title">
  サンプルテキスト
</p>

.titel {
  color: blue;
}

HTMLでは「title」、CSSでは「titel」となっているため、CSSは反映されません。

文字数が増えるほど見落としやすくなるため、コピー＆ペーストを活用しながら統一するのがおすすめです。CSSが反映されない場合は、まずclass名のスペルを確認してみましょう。

CSSの優先順位を理解する

CSSには優先順位（詳細度）があり、後から指定されたスタイルや優先度の高いセレクタが適用されます。そのため、class属性に指定したスタイルが反映されないように見える場合があります。

例えば、以下のコードでは同じ要素に対して異なる色が指定されています。

<p id="main-title" class="title">
  サンプルテキスト
</p>

.title {
  color: blue;
}

#main-title {
  color: red;
}

この場合、idセレクタの方が優先順位が高いため、文字色は赤色で表示されます。

「CSSを書いたのに反映されない」と感じたときは、他のスタイルによって上書きされていないか確認することも大切です。

不要なclassを増やしすぎない

class属性は自由に追加できますが、必要以上に増やしすぎるとコードが複雑になります。
例えば、以下のように多くのclassを付けると管理が難しくなります。

<div class="box content item section main wrapper">
  サンプル
</div>

どのclassがどの役割を持っているのか分かりづらくなり、修正時の負担も大きくなります。

そのため、class名は役割ごとに整理し、本当に必要なものだけを付けるようにしましょう。シンプルで分かりやすいHTMLは、メンテナンスしやすく、CSSの管理もしやすくなります。学習段階から「必要なclassだけを付ける」ことを意識すると、読みやすいコードを書けるようになります。

HTMLとCSSを効率良く学ぶ方法

class属性はHTMLとCSSを学ぶうえで欠かせない知識です。しかし、仕組みを理解するだけでは実際に使いこなせるようにはなりません。HTMLとCSSのスキルを身につけるためには、実際にコードを書きながら学習し、class属性を使ったWebページ制作に慣れていくことが大切です。

実際にコードを書きながら学習する

HTMLやCSSは、参考書や動画を見るだけでは理解しづらい部分があります。特にclass属性は、実際に使ってみることで役割や便利さを実感しやすくなります。例えば、同じclass名を複数の要素に設定し、CSSでまとめてデザインを変更してみましょう。

<p class="text">文章A</p>
<p class="text">文章B</p>
<p class="text">文章C</p>

.text {
  color: blue;
}

このような簡単なコードでも、class属性の役割やCSSとの関係を理解しやすくなります。また、class名を変更したり複数のclassを組み合わせたりしながら試すことで、実践的な知識が身についていきます。まずは小さなWebページを作りながら、HTMLとCSSの基本操作に慣れていきましょう。

独学が不安ならプログラミングスクールもおすすめ

HTMLやCSSは独学でも学習できますが、「classとidの違いが分からない」「CSSが反映されない原因を特定できない」と悩むことも少なくありません。特にWeb制作では、class属性やCSS設計など学ぶ内容が増えるため、途中で挫折してしまうケースもあります。

独学に不安がある場合は、質問できる環境を活用するのもおすすめです。

忍者CODEでは、HTMLやCSSの基礎からWebサイト制作まで体系的に学習できます。動画教材で学びながら実際にコードを書いてアウトプットできるため、知識だけでなく実践的なスキルも身につけやすいのが特徴です。

効率良く学習を進めたい方は、自分に合った学習環境を選びながらHTMLとCSSのスキルアップを目指してみましょう。

まとめ

本記事では、HTMLのclass属性について解説しました。

class属性は、HTML要素に名前を付けてグループ化し、CSSやJavaScriptから扱いやすくするための属性です。同じclass名は複数の要素で共有できるため、共通のデザインや機能を効率良く適用できます。また、class属性とid属性には役割の違いがあります。class属性は複数の要素で利用できるのに対し、id属性はページ内で一意の要素を識別するために使用します。それぞれの特徴を理解し、適切に使い分けることが大切です。

さらに、class名を付ける際は、わかりやすい名前を付けることや命名ルールを統一することも重要です。スペルミスやCSSの優先順位によってスタイルが反映されないこともあるため、基本的なルールを身につけておきましょう。

HTMLとCSSの学習では、実際にコードを書きながら試すことが上達への近道です。class属性を使いこなせるようになると、Webページのデザインや管理が格段にしやすくなります。ぜひ今回紹介したサンプルコードを参考にしながら、class属性の使い方を実際に試してみてください。