HTMLクラス複数の使い方完全ガイド【書き方からCSS適用までわかる】

HTMLで装飾やレイアウトを整えていると、1つの要素にクラスを複数付けたい場面は非常によくあります。
しかし、半角スペースで区切るのか、カンマが必要なのか、CSSやJavaScriptではどう扱うのかなど、細かなルールで迷う方も少なくありません。

この記事では、HTMLで複数クラスを指定する基本から、CSSセレクタの書き方、実務で使いやすい設計の考え方までを体系的に解説します。
初心者の確認用にも、コーディング実務の整理用にも使える内容になっていますので、複数クラスの扱いをすっきり理解したい方はぜひ最後までご覧ください。

HTMLでクラスを複数指定する基本ルール

HTMLでは、class属性に複数のクラス名を並べることができます。
このときの基本ルールはとてもシンプルで、クラス名同士を半角スペースで区切るだけです。

たとえば、ボタンに共通デザインを与えるbtnと、色のバリエーションを表すprimaryを同時に付けたい場合、class属性の中に2つのクラス名を記述します。
この仕組みにより、共通スタイルと個別スタイルを分けて管理しやすくなり、保守性の高いHTMLとCSSを書きやすくなります。

特に最近のフロントエンドでは、1つの役割を1つのクラスに分割する考え方が広く使われています。
そのため、複数クラスの指定は特別な書き方ではなく、むしろ日常的に使う基本技術です。

複数クラスの正しい書き方

複数クラスの正しい書き方は、1つのclass属性の値の中に、複数のクラス名を半角スペース区切りで並べる方法です。
たとえば、次のような書き方になります。

この場合、text、large、emphasisの3つのクラスが1つのp要素に付与されています。
それぞれのクラスに対応するCSSが定義されていれば、同じ要素にまとめて適用されます。

重要なのは、クラス名をカンマで区切らないこと、そしてclass属性を複数回書かないことです。
HTMLでは属性名の重複は適切ではないため、classを2回書くのではなく、1つのclass属性内にまとめて書く必要があります。

半角スペース区切りが必要な理由

HTMLのclass属性は、内部的に空白区切りの一覧として解釈されます。
そのため、ブラウザは半角スペースを使って、それぞれのクラス名を別々の値として認識します。

もしカンマ区切りでclass=”btn,primary”のように書いてしまうと、btnとprimaryの2つのクラスとしては扱われません。
この場合、btn,primaryという1つのクラス名として認識されるため、想定したCSSが当たらない原因になります。

また、スペースが複数入っていても多くの場合は問題なく解釈されますが、可読性の面では不要な空白は減らしたほうがよいです。
実務では、半角スペース1つで統一すると読みやすく、レビューでも指摘が減りやすくなります。

よくある間違いと注意点

複数クラスでよくある間違いとして、まず挙げられるのがclass属性を重ねて書いてしまうケースです。
たとえば、<div class=”card” class=”shadow”>のような書き方は避けるべきです。

次に多いのが、カンマ区切りや全角スペースの使用です。
HTMLでは半角スペースが前提のため、全角スペースが混ざると意図通りに認識されないことがあります。

さらに、CSS側で複数クラスを対象にする書き方を誤解しているケースもあります。
HTML側でクラスを複数指定できても、CSSのセレクタ記述が誤っていればスタイルは反映されません。
複数クラスはHTMLとCSSの両方をセットで理解することが大切です。

複数クラスを付けたときのCSSの適用方法

HTMLに複数のクラスを付ける目的は、多くの場合CSSを柔軟に適用するためです。
共通デザインを持つクラスと、色やサイズ、状態を表すクラスを組み合わせることで、再利用性の高いスタイル設計が可能になります。

ただし、CSSでは書き方によって意味が変わります。
単に複数のクラスに同じスタイルを当てたいのか、複数クラスを同時に持つ要素だけを対象にしたいのかで、セレクタの記述が異なります。

この違いを理解しておくと、思った通りにデザインを制御しやすくなります。
特に、コンポーネント指向の設計やユーティリティクラスを使う場面では、複数クラスのCSS理解が重要です。

単体クラスごとにスタイルを分ける方法

もっとも基本的な使い方は、各クラスにそれぞれ別の役割を持たせる方法です。
たとえば、btnにはボタン共通の形状、primaryにはメインカラー、largeには大きさを定義するといった形です。

この設計の利点は、1つのクラスに責務を詰め込みすぎず、組み合わせで表現できることです。
HTML側でclassを切り替えるだけで見た目を変えやすく、同じスタイル定義を複数箇所で再利用できます。

とくに更新頻度の高いサイトでは、スタイルの重複を減らせるため、後からの修正コストを抑えやすいです。

複数クラスを同時に持つ要素だけを指定する方法

ある要素が複数のクラスを同時に持つ場合だけにスタイルを適用したいこともあります。
その場合は、CSSでクラス名をつなげて記述します。

これはbtnクラスを持ち、かつprimaryクラスも持つ要素だけを対象にする書き方です。
間にスペースを入れると意味が変わるため注意が必要です。

スペースありの .btn .primary は、btnクラスの要素の内側にあるprimaryクラス要素を意味します。
一方で、スペースなしの .btn.primary は、同じ1つの要素に両方のクラスが付いている場合を意味します。
この違いは非常に重要で、CSSが当たらない原因としてよく見られます。

優先順位と競合の考え方

複数クラスを使うと、同じCSSプロパティが重複して指定されることがあります。
たとえば、btnで背景色を指定し、primaryでも背景色を指定した場合、どちらが適用されるかはCSSの詳細度や記述順によって決まります。

一般に、詳細度が同じであれば後に書かれたルールが優先されます。
また、.btn.primary のような複合セレクタは、単体の .btn や .primary より詳細度が高くなるため、より強く適用されやすいです。

複数クラスを扱うときは、単に書けることを知るだけでなく、CSSの優先順位まで理解することが実務では重要です。

HTMLクラス複数指定の実践例と使い分け

複数クラスは、知識として理解するだけでなく、どのような場面で使い分けるかを知ることで真価を発揮します。
特に実務では、見た目、役割、状態を分離して設計するために複数クラスが広く使われています。

たとえば、カード、ボタン、見出し、通知ボックスなど、同じ部品に共通の土台デザインと個別の差分デザインを重ねたいケースは非常に多いです。
ここでは、実際に使いやすいパターンを整理して紹介します。

ボタンデザインで使うパターン

ボタンは複数クラスの代表的な利用例です。
btnで共通スタイルを持たせ、primaryやsecondaryで色分けし、largeやsmallでサイズを変える設計は非常に実用的です。

この方法なら、btn primary largeのように組み合わせるだけで、必要な見た目をすばやく表現できます。
1つのクラスにすべてを書き込むよりも、後から拡張しやすく、管理もしやすいです。

• btn 共通のボタン形状
• primary 目立つ主ボタン
• secondary 控えめな副ボタン
• large 大きめサイズ

UI部品を量産するページでは、このような分割設計が特に有効です。

レイアウトと装飾を分けるパターン

複数クラスは、レイアウト用の指定と装飾用の指定を分けたいときにも役立ちます。
たとえば、flexで配置を制御し、cardで見た目の箱デザインを与え、shadowで影を付けるといった使い方です。

このように役割ごとにクラスを分けると、ある要素から影だけ外したい、余白だけ変えたい、といった細かな調整がしやすくなります。
反対に、1つの巨大なクラスにまとめると再利用性が下がり、似たようなCSSが増えやすくなります。

役割を小さく分割し、必要なものだけ組み合わせるという考え方は、現在のフロントエンド設計でも非常に相性がよいです。

JavaScriptや動的処理との相性

複数クラスはCSSだけでなく、JavaScriptで状態を切り替えるときにも便利です。
たとえば、is-activeやis-openのような状態クラスを追加したり削除したりすることで、見た目や表示状態を制御しやすくなります。

このとき、もともとの部品クラスと状態クラスを分けておくと、処理の意図が明確になります。
たとえばmenu is-openのように書けば、その要素がメニューであり、開いている状態であることがすぐに読み取れます。

静的なHTMLだけでなく、動的なUIを扱う現場でも、複数クラスは可読性と保守性を高める重要な手段です。

複数クラスを使うときの設計ポイントとコツ

複数クラスは便利ですが、無計画に増やすとHTMLが読みにくくなり、CSSの責務も曖昧になります。
そのため、書き方を覚えるだけでなく、設計のルールを持って使うことが大切です。

特にチーム開発や長期運用では、クラス名の意味がぶれないこと、見た目と役割が整理されていることが重要になります。
ここでは、実務で使いやすい考え方をまとめます。

クラス名の役割を明確に分ける

クラス名には、それぞれ明確な役割を持たせると管理しやすくなります。
たとえば、component系、modifier系、state系のように分類すると、どのクラスが何を表しているかが理解しやすくなります。

例として、cardは部品、card-featuredは強調バリエーション、is-hiddenは状態、という形です。
このように意味を整理しておくと、HTMLを見ただけで設計意図が伝わりやすくなります。

名前の付け方に一貫性があると、複数クラスが並んでいても読みにくくなりにくいです。

付けすぎを避けて保守性を高める

複数クラスは便利ですが、何でも細かく分けすぎると逆に複雑になります。
1つの要素にクラスが大量に並ぶと、どれが必須でどれが差分なのか分かりづらくなります。

そのため、共通部品としてまとまりがあるものはある程度1つにまとめ、頻繁に切り替える要素だけを分離するのが現実的です。
再利用性と読みやすさのバランスを取ることが重要です。

迷ったときは、このクラスは単独でも再利用するかを基準に考えると整理しやすくなります。

初心者がまず覚えるべき実務ルール

初心者がまず押さえたい実務ルールは、半角スペース区切り、CSSセレクタの違い、責務分離の3点です。
この3つを理解するだけで、複数クラスの大半の混乱は避けられます。

この基本を押さえておけば、シンプルなページから大きなサイトまで対応しやすくなります。
最初は小さな部品から複数クラスの設計に慣れていくのがおすすめです。

まとめ

HTMLでクラスを複数指定するときは、1つのclass属性の中に半角スペース区切りで書くのが基本です。
このルールを理解するだけでも、多くの初歩的なミスを防げます。

さらに、CSSでは単体クラス、複合セレクタ、子孫セレクタの違いを理解することが大切です。
特に .btn.primary と .btn .primary の違いは実務で頻出するため、確実に押さえておきたいポイントです。

また、複数クラスは単なる記法ではなく、再利用性や保守性を高める設計手法でもあります。
共通、差分、状態を分けて考えることで、HTMLとCSSの構造が整理され、後からの修正もしやすくなります。

HTMLクラス複数の扱いを正しく理解できれば、スタイル設計の自由度は大きく広がります。
基本ルールを守りながら、読みやすく拡張しやすいマークアップを目指していきましょう。