【2026年8月最新】CSSのclassとは？基本の使い方・命名規則からClaude Codeによる自動生成まで徹底解説

「classって結局何なの？」「idと何が違うの？」——HTMLやCSSを学び始めた人が、必ず一度はつまずくのがこのclass属性の理解です。

classはCSSでデザインを当てるときの最も基本的な"目印"ですが、書き方を雑に覚えてしまうと、後からコードが複雑になったときに「どのclassがどこに効いているか分からない」という事故が頻発します。逆に言えば、classの仕組みと命名規則を正しく理解しておくだけで、CSS設計の8割は解決すると言っても過言ではありません。

この記事では、classの基礎からid属性との違い、CSSセレクタの優先順位、BEMなど実務で使われる命名規則までを体系的に解説します。さらに後半では、弊社（株式会社GENAI）がClaude Codeを使ってHTML/CSS制作をどこまで効率化しているかという実運用データも公開します。

この記事を最後まで読むと、次の6つが明確になります。

01 WHAT IS CLASS classとは何か？id属性との違い HTMLの基礎属性を、仕組みから理解する

class属性とは、HTMLの要素（タグ）に「名前（分類ラベル）」をつけるための属性です。CSSやJavaScriptから、その名前を目印にして特定の要素だけを選び出し、デザインを当てたり動きをつけたりするために使います。

たとえば「見出しの色を赤くしたい」「このボタンだけ角丸にしたい」といった場合、対象の要素にclass="見出し"のようなラベルを貼っておき、CSS側でそのラベルを指定してスタイルを書く、という流れになります。

<h2 class="section-title">お知らせ</h2>
<p class="section-title">最新情報をお届けします</p>

1-1. id属性との違い（最重要ポイント）

classとよく混同されるのがid属性です。両者の違いを一言でまとめると、「classは何度でも使い回せる」「idはページ内で一度しか使えない」という点に尽きます。

項目	class属性	id属性
1ページ内での使用回数	何度でも使える（複数要素に同じ名前OK）	1ページに1回だけ（一意でなければならない）
1つの要素への複数指定	可能（半角スペース区切り）	不可（1要素に1つの値のみ）
CSSセレクタでの書き方	.クラス名（ドット）	#ID名（シャープ）
CSSの優先順位（詳細度）	低い	classより高い
主な用途	デザインの使い回し・パターン化	ページ内リンクのアンカー、JS制御の一意な対象指定

実務上の目安としては、「同じデザインを複数箇所で使い回したいならclass」「そのページの中で絶対に1つしかない要素を指すならid」と覚えておけば、まず迷うことはありません。ボタン・カード・見出しといった繰り返し登場するパーツはほぼ100%classで設計します。

1-2. なぜclassという仕組みが必要なのか

そもそも、なぜHTMLにはこのような「名前付け」の仕組みが必要なのでしょうか。理由はシンプルで、HTML（構造）とCSS（見た目）を分離するためです。もしclassという仕組みがなければ、すべての要素に直接スタイルを書き込む（インラインスタイル）しかなく、同じデザインのボタンが100個あれば100箇所すべてを修正する必要が出てきます。

classを使えば、.btnというスタイル定義を1箇所書くだけで、そのclassを持つすべての要素に一括で反映されます。これがWeb制作における「保守性」の根幹であり、サイト規模が大きくなるほどこの仕組みの恩恵は大きくなります。

02 HOW TO USE classの基本的な使い方 付与のルール・複数指定・命名の基礎を押さえる

classの理屈が分かったところで、実際の書き方を見ていきましょう。基本の形は、対象のタグにclass="クラス名"という属性を追加するだけです。

<!-- 基本形 -->
<p class="lead-text">これはリード文です。</p>

<!-- 複数のclassを付与する場合（半角スペース区切り） -->
<button class="btn btn-primary btn-large">送信する</button>

上記の<button>の例のように、1つの要素に複数のclassを空白区切りで並べることができます。これは「ボタンの基本デザイン（btn）」「色のパターン（btn-primary）」「サイズのパターン（btn-large）」のように、役割ごとにclassを分けて組み合わせる設計を可能にする、非常に重要な仕組みです。

2-1. classを付与する流れ

この4ステップさえ理解していれば、classの基本操作でつまずくことはほぼありません。重要なのは、Step 2で付けた名前とStep 3で書くセレクタの文字列を完全に一致させることです。大文字小文字やタイプミスがあると、スタイルが反映されずに悩む原因になります。

2-2. class名の付け方ルール

class名は自由に決められますが、いくつか守るべきルールと慣習があります。

2-3. よくあるミスと注意点

初心者がつまずきやすいのが、class名のスペルミスとタグとの混同です。CSS側で.btn-primery（正しくは primary）のようにタイプミスをすると、エラーは出ずにただスタイルが反映されないため、原因究明に時間がかかりがちです。

03 CSS SELECTOR CSSと組み合わせる：セレクタと優先順位 複数classの組み合わせ方と、詳細度のルールを理解する

classの基本が分かったら、次はCSS側の書き方をもう一歩踏み込んで理解しましょう。classを使ったセレクタには、シンプルな1つ指定だけでなく、複数を組み合わせる書き方があります。

書き方	意味	具体例
.a	classにaを持つ要素すべて	.btn { color: red; }
.a.b（スペースなし）	aとbの両方を持つ要素	.btn.btn-large { }
.a .b（スペースあり）	aの内部にあるbを持つ要素（子孫セレクタ）	.card .title { }
.a > .b	aの直接の子であるbを持つ要素	.list > .item { }
.a:hover	aにマウスが乗っている状態	.btn:hover { opacity: 0.8; }

3-1. 詳細度（Specificity）というルール

CSSで最もつまずきやすいのが「複数のスタイルが同じ要素に競合したとき、どちらが優先されるか」というルールです。これを詳細度（Specificity）と呼びます。

詳細度は大まかに次の優先順位で決まります。数字が大きいほど強いスタイルとして扱われ、後から書いた・読み込んだCSSであっても、詳細度が低ければ上書きされません。

優先順位	種類	具体例
最強（原則勝つ）	!important	color: red !important;
4番目	インラインスタイル	<p style="color:red">
3番目	id セレクタ	#header { }
2番目	class・属性・疑似クラス	.btn { } :hover { }
1番目（最弱）	要素セレクタ	p { } div { }

この優先順位を理解していないと、「CSSを書いたのに反映されない」という現象に必ずぶつかります。特に多いのが、idセレクタで書いたスタイルを、後からclassセレクタで上書きしようとして反映されないというケースです。これは詳細度の観点から見れば当然の挙動で、bugではなく仕様通りの動きです。

04 NAMING METHODOLOGY 【独自】実務で通用するclass設計・命名規則 BEM・OOCSS・Utility-firstを比較して理解する

ここからは、単発のHTML/CSSの書き方を超えて、「サイト全体でclassをどう設計するか」という、より実務的な話に入ります。ページ数が増え、複数人でコードを触るようになると、行き当たりばったりの命名では必ず破綻します。そこで生まれたのが、体系立ったclass設計の手法（命名規則）です。

4-1. 代表的な3つの設計手法

手法	考え方	例	向いている場面
BEM	Block（塊）__Element（要素）--Modifier（修飾）の3層で命名	.card__title--large	チーム開発・大規模サイト
OOCSS	「構造」と「見た目」のclassを分けて使い回す	.box + .skin-red	デザインパターンの使い回しが多いサイト
Utility-first	1つの役割だけを持つ小さなclassをHTML側で組み合わせる	.text-center .p-4	Tailwind CSSなどのフレームワーク前提の開発

4-2. BEMの具体例で理解する

<!-- BEM記法の例：カードコンポーネント -->
<div class="card">
  <h3 class="card__title">記事タイトル</h3>
  <p class="card__text">本文の抜粋がここに入ります。</p>
  <button class="card__button card__button--primary">続きを読む</button>
</div>

上記の例では、cardが「塊（Block）」、card__titleやcard__textが「塊の中の要素（Element）」、card__button--primaryが「ボタンの種類違い（Modifier）」を表しています。この規則を守ると、class名を見ただけで「どのコンポーネントの、どの部分か」が一目で分かるようになります。

4-3. どの手法を選ぶべきか

個人の小規模サイトであれば、BEMほど厳格なルールを敷かなくても困ることは少ないでしょう。一方、複数人で長期運用するサイトや、LPを何十本も量産するようなケースでは、命名規則を統一しておかないと、半年後には「このclassが何のためにあるのか誰にも分からない」状態に陥りがちです。

05 GENAI CASE STUDY 【独自データ】GENAI社内のHTML/CSS制作実運用 Claude Codeでコーディング業務がどれだけ変わったか

ここまでCSSのclassについて技術的な解説をしてきましたが、実際の業務では「class設計を理解した上で、それをどう効率的に手を動かすか」がもう一つの重要なテーマです。弊社（株式会社GENAI）では、Claude Max 20xプラン（月額$200・約30,000円）を契約し、コーポレートサイト・LP・ブログ記事のコーディングを含む全社業務にClaude Codeを組み込んでいます。

項目	内容
契約プラン	Claude Max 20x（月$200 / 約30,000円）
利用開始	2025年後半〜
対象業務	コーポレートサイト・LP制作、WordPress記事投稿、業務スクリプトの書き捨て
主な利用モデル	Sonnet 4.6（日常のコーディング）/ Opus 4.6（複雑な構造設計）

5-1. HTML/CSS制作にかかる時間の変化

弊社の開発業務全般（WordPress・LP制作、スクリプトの書き捨てを含む）は、Claude Codeの導入によって都度数時間単位の削減が肌感として出ています。特にclassの命名や構造設計は、Claude Codeに「BEM記法で」「役割ベースの命名で」と指示するだけで、人間が1つずつ考えるより速く、かつ一貫性のある命名を出力してくれる領域です。

5-2. コーディング作業がどう変わったか（流れ図）

重要なのは、この流れでも「人間のレビュー」というステップは残るという点です。Claude Codeが生成したclass構造やデザインをそのまま鵜呑みにするのではなく、意図した通りの構造・命名になっているかを最終確認する工程は必ず挟んでいます。完全に自動化されたわけではなく、あくまで「実装の初速を大幅に速める」ツールという位置づけです。

06 FOR NON-ENGINEERS 非エンジニアがClaude CodeでCSS設計を任せる方法 ターミナルもコーディング経験も不要な最短ルート

「class設計の重要性は分かったけれど、自分はエンジニアじゃないのでコードは書けない」——そう感じた方も多いはずです。ここが、この記事で一番伝えたいポイントです。2026年現在、classの命名規則やCSSの優先順位を自分で暗記していなくても、Claude Codeに指示すればプロ品質のコーディングを任せられます。

6-1. 実際にどんな指示を出せばいいか

Claude Codeは「BEMで書いて」「詳細度が競合しないように」といった専門用語での指示ももちろん理解しますが、非エンジニアであれば、もっと日常的な言葉で十分です。

6-2. AIに任せても品質が下がらない理由

「AIに書かせたコードは品質が低いのでは」という懸念を持つ方もいますが、classの命名やセレクタの優先順位のような明確なルールが存在する領域は、むしろAIが最も得意とする範囲です。人間が疲れて命名の一貫性が崩れる場面でも、Claude Codeは同じ規則を最後まで適用し続けられます。

もちろん、デザインの良し悪しやブランドイメージとの整合性といった感性が絡む判断は人間のレビューが不可欠です。弊社でも、Claude Codeが生成したコードをそのまま公開することはなく、「構造・命名はAI、最終的な見た目の微調整と承認は人間」という役割分担で運用しています。

07 CONCLUSION まとめ classの仕組みを理解すれば、AIへの指示も的確になる

この記事では、CSSのclass属性の基礎から、id属性との違い、セレクタの優先順位、BEMなどの命名規則、そして弊社GENAIの実運用データとClaude Codeの活用方法までを解説しました。最後にポイントを振り返ります。

classの仕組みそのものはシンプルですが、実務で「破綻しない設計」に落とし込むには、優先順位のルールや命名規則の知識が欠かせません。そしてその知識は、自分でコードを書く人だけでなく、AIに指示を出す立場の人にとっても重要な武器になります。何をどう任せればいいかが分かっていれば、Claude Codeのアウトプット品質は大きく変わってきます。

サイト制作・コーディング業務の自動化を、AI鬼管理が一緒に設計します

class設計やCSSの保守性は、サイト運用が長くなるほど効いてきます。
弊社の実運用ノウハウをベースに、Claude Codeを使ったコーディング業務の効率化を個別にご相談いただけます。

よくある質問

Q. classとidはどちらを優先して使うべきですか？

A. デザインを当てる目的であれば基本的にclassを使うのが安全です。classは何度でも使い回せるため、同じデザインのパーツが増えても保守がしやすくなります。idはページ内で一意な要素を指定する必要がある場合（ページ内リンクの飛び先や、JavaScriptで1つの要素だけを狙って操作したい場合）に限定して使うのが実務上の定石です。

Q. 1つの要素に複数のclassを付けるとどうなりますか？

A. 半角スペースで区切って複数のclass名を書くと、その要素はすべてのclassのスタイルを同時に受け取ります。例えばclass="btn btn-primary"であれば、.btnのスタイルと.btn-primaryのスタイルの両方が適用され、競合する部分は詳細度が同じ場合に限り後から書かれた方が優先されます。詳細度が異なる場合は、記述順にかかわらず詳細度が高い方が優先されます。

Q. CSSを書いたのにスタイルが反映されないのはなぜですか？

A. 主な原因は3つあります。1つ目はclass名のタイプミス（HTML側とCSS側で文字列が一致していない）、2つ目は詳細度の競合（idセレクタなど優先順位が高い別のスタイルに上書きされている）、3つ目はCSSファイルの読み込み順や記述順の誤りです。ブラウザの開発者ツールで実際に適用されているスタイルを確認すると原因が特定しやすくなります。

Q. BEMのような命名規則は個人サイトでも使うべきですか？

A. 個人の小規模サイトであれば、BEMほど厳格なルールがなくても大きな問題にはなりにくいです。ただし、ページ数が増えたり将来的にチームで運用する可能性があるなら、最初から「役割が分かる名前をハイフン区切りで統一する」程度のゆるいルールだけでも決めておくと、後々の保守がかなり楽になります。

Q. Claude CodeにCSS設計を任せても、デザインの一貫性は保たれますか？

A. 保たれやすくなります。Claude Codeはプロジェクト内の既存のclass名や命名規則を読み取った上でコードを生成できるため、人間が疲れて命名がぶれてしまう場面でも、同じルールを最後まで一貫して適用できます。ただし、ブランドイメージに関わる感性的な判断は人間のレビューが必要で、生成された内容をそのまま公開することは推奨しません。

Q. CSSやコーディングの知識が全くなくてもClaude Codeは使えますか？

A. 使えます。専門用語（BEMや詳細度など）を知らなくても、「このボタンのデザインを全部揃えて」といった日常的な言葉での指示で意図を汲んで実装してくれます。2026年にリリースされたデスクトップ版であればターミナル操作も不要で、チャット感覚でコーディング作業を依頼できます。

Q. Utility-first（Tailwind CSSなど）とBEMはどちらが優れていますか？

A. どちらが優れているというより、目的が異なります。Utility-firstはCSSファイルをほとんど書かずにHTML側だけで完結させたいプロジェクト向き、BEMはコンポーネント単位で構造を明確にしたい、複数人でのチーム開発向きです。フレームワークやチームの開発スタイルに合わせて選ぶのが現実的です。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。