HTMLやCSSを学び始めると、classという言葉が頻繁に登場します。「どこに書くの？」「CSSの先頭に付けるピリオドは何？」と迷う方も多いのではないでしょうか。
classは、HTML要素に名前を付け、CSSで必要な要素だけを選ぶために使う属性です。この記事では、classの意味と書き方から、複数指定、idとの違い、反映されない原因まで、実際のコードを使って初心者向けに解説します。
HTMLのclassとは要素を見分けるための名前
class（クラス）は、HTML要素をグループ分けするために付ける名前です。HTMLの開始タグへclass="クラス名"と書きます。
<p class="note">ここに補足説明が入ります。</p>この例では、p要素へnoteというclass名を付けています。class名はブラウザに表示されませんが、CSSからこの段落を指定する目印になります。
同じclass名は複数の要素に使えます。そのため、複数の見出しやボタンへ同じデザインをまとめて適用したい場合に便利です。
classを使ってHTMLへCSSを適用する基本
classを使うときは、HTMLで名前を付け、CSSでその名前を選びます。まずは、何も装飾していない状態からカード風の補足欄を作ってみましょう。
変更前のHTMLを用意する
index.htmlへ、見出しと2つの段落を書きます。この時点ではclassを付けていないため、CSSで補足部分だけを選ぶ目印がありません。
<h1>HTMLとCSSの練習</h1>
<p>classの使い方を学びます。</p>
<p>class名は内容が分かる名前にしましょう。</p>装飾したい要素へclass属性を追加する
補足として表示したい2つ目のp要素へ、class="note"を追加します。class属性は開始タグの中に書き、属性値を半角のダブルクォーテーションで囲みます。
<h1>HTMLとCSSの練習</h1>
<p>classの使い方を学びます。</p>
<p class="note">class名は内容が分かる名前にしましょう。</p>CSSでclassセレクターを書く
style.cssでは、class名の先頭に半角のピリオド（.）を付けます。この.noteが、class名noteを持つ要素を選ぶ「classセレクター」です。
.note {
color: #1e3a5f;
background-color: #eaf4ff;
padding: 16px;
border-left: 4px solid #2563eb;
}HTMLではclass="note"、CSSでは.noteと書く点が重要です。HTML側のclass名にピリオドは付けません。
変更後の完成コードを確認する
外部CSSファイルを読み込むlink要素も含めると、HTML全体は次のようになります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>classの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>HTMLとCSSの練習</h1>
<p>classの使い方を学びます。</p>
<p class="note">class名は内容が分かる名前にしましょう。</p>
</body>
</html>ブラウザで開くと、noteを付けた段落だけに青い文字、薄い背景色、余白、左線が付きます。classは「特定の要素だけへCSSを適用したい」という場面で使う目印だと考えると分かりやすいでしょう。
HTMLから外部CSSを読み込む方法が分からない場合は、次の記事でファイル構成から確認できます。
同じclassは複数のHTML要素に使える
classの大きな特徴は、同じclass名を何度でも使えることです。たとえば、複数のリンクへbuttonというclassを付けると、1つのCSSで同じボタンデザインにできます。
<a class="button" href="/about/">詳しく見る</a>
<a class="button" href="/contact/">お問い合わせ</a>.button {
display: inline-block;
color: #ffffff;
background-color: #2563eb;
padding: 12px 20px;
border-radius: 8px;
text-decoration: none;
}デザインを変更するときも、.buttonのCSSを1か所直すだけです。HTMLの各要素へ同じCSSを繰り返し書かずに済むため、コードを管理しやすくなります。
1つのHTML要素に複数のclassを付ける方法
1つの要素には複数のclass名を指定できます。class名とclass名の間を半角スペースで区切り、同じclass属性の中へ並べます。
<p class="message warning">入力内容を確認してください。</p>.message {
padding: 16px;
border-radius: 8px;
}
.warning {
color: #7c2d12;
background-color: #ffedd5;
}このp要素には、messageとwarningの両方のCSSが適用されます。共通デザインをmessage、種類ごとの色をwarningへ分けると、CSSを再利用しやすくなります。
CSSで.message.warningのようにピリオドを続けて書くと、2つのclassを同時に持つ要素だけを選べます。一方、.message .warningのようにスペースを入れると「messageの内側にあるwarning」を選ぶ別の指定になるため、混同しないようにしましょう。
classとidの違い
classとidは、どちらもHTML要素へ名前を付けられる属性です。ただし、同じページ内での使い方とCSSの書き方が異なります。
| 比較項目 | class | id |
|---|---|---|
| HTMLの書き方 | class="note" | id="main" |
| CSSの書き方 | .note | #main |
| 同じ名前 | 複数要素に使える | ページ内で一意にする |
| 主な用途 | 共通デザイン、グループ分け | ページ内リンク、特定要素の識別 |
CSSで見た目を付ける目的なら、繰り返し使えて管理しやすいclassを基本にするとよいでしょう。idはページ内リンクの移動先や、JavaScriptなどから1つの要素を特定したい場面で使われます。
分かりやすいclass名の付け方
class名は自由に決められますが、その要素の役割が分かる英単語を使うと、後からコードを読み返しやすくなります。
page-title：ページのタイトルproduct-card：商品を表示するカードcontact-button：お問い合わせボタンerror-message：エラーメッセージ
redやbigのように現在の見た目だけを名前にすると、デザイン変更後に名前と表示が合わなくなることがあります。error-messageのように役割を表す名前なら、色を赤からオレンジへ変えても意味がずれません。
複数の単語をつなぐ場合は、product-cardのようにハイフンを使うと読みやすくなります。大文字と小文字は区別されるため、プロジェクト内で書き方を統一しましょう。
classのCSSが反映されないときの確認ポイント
HTMLとCSSのclass名が一致しているか
class="note"に対してCSSを.notesと書くと、名前が一致しないため反映されません。スペル、大文字・小文字、ハイフンの位置まで確認します。
CSSの先頭にピリオドがあるか
classセレクターにはピリオドが必要です。note { }と書くと、ブラウザはnoteという名前のHTML要素を探してしまいます。
/* 間違い */
note {
color: blue;
}
/* 正しい */
.note {
color: blue;
}class名をピリオドやカンマで区切っていないか
HTMLで複数のclassを指定するときは、半角スペースで区切ります。class="message.warning"やclass="message, warning"ではありません。
CSSファイルが読み込まれているか
classの書き方が正しくても、style.cssの保存忘れやhrefのパス間違いがあるとCSSは反映されません。HTMLとCSSを保存し、ブラウザを再読み込みして確認してください。
CSSの基本構文や、反映されない場合の確認方法は次の記事でも詳しく解説しています。
HTMLのclassでよくある疑問
class名は日本語でも書けますか？
技術上は日本語を使える場合もありますが、入力や共有で問題が起きにくい半角英数字の使用がおすすめです。役割が分かる短い英単語をハイフンでつなぎましょう。
すべてのHTMLタグにclassを付けられますか？
classはグローバル属性なので、基本的にすべてのHTML要素へ指定できます。ただし、CSSで選ぶ必要がない要素へ機械的に付ける必要はありません。
classはいくつまで付けられますか？
実用上、明確な個数制限を気にする必要はありません。ただし、1つの要素へ多くのclassを付けすぎると役割や上書き関係が分かりにくくなるため、必要なものだけに整理します。
classはCSS以外にも使いますか？
JavaScriptから要素を取得したり、表示状態を切り替えたりするときにも使われます。ただし、この記事では初心者が最初に覚えたいCSSの適用先を選ぶ役割に絞って説明しています。
HTMLタグや属性そのものを復習したい方は、次の記事から確認すると理解しやすくなります。
まとめ
HTMLのclassは、要素をグループ分けし、CSSで必要な要素を選ぶための名前です。HTMLではclass="note"、CSSでは先頭にピリオドを付けて.noteと書きます。
同じclassは複数の要素へ使え、1つの要素に複数のclassを付けることもできます。まずは今回のサンプルをコピーし、class名とCSSの色を変えながら表示を確かめてみてください。