TOP
SEO
HTML初心者のためのクラス名の付け方
HTML初心者のためのクラス名の付け方
2025.10.02
こんにちは、Aoshiです。 前回の記事ではHTMLの基本タグを使ってプロフィールページを作りました。 今回はその次のステップ、タグにクラス名を付ける方法です。
はじめに
こんにちは、Aoshiです。
前回の記事ではHTMLの基本タグを使ってプロフィールページを作りました。
今回はその次のステップ、タグにクラス名を付ける方法です。
私は同じようなクラスを増やしすぎて後から何をどこで使っているか分からなくなる
そんな失敗を何度も経験しました。
この記事では、そんな私が実際につまずきながら覚えたクラス名の付け方を、
初心者目線でまとめます。
同じように「どこから手を付けていいか分からない」と感じている人のヒントになれば嬉しいです。
クラス名はタグに付ける“ハッシュタグ”のようなものです。
「このハッシュタグが付いた部分だけ文字を大きく」
「このハッシュタグの背景を青に」など、
CSSを書く前に、これをやっておくとより細かく、楽になるので押さえておきましょう！
CSSからまとめてデザインの指示を出せます。
同じクラス名を複数の場所に付ければ、一度の変更で全てに反映でき、
コードをスッキリ保てて表示速度の向上＝SEOのプラス効果にもつながります。
クラス名の付け方
初心者でも迷わず付けられるよう、次の3つを意識してみましょう。
- 小文字＋ハイフンで書く（kebab-case）
例：main-header、profile-title
→ これがWeb業界の基本的な書き方。読みやすく、後から見ても分かりやすい。 - 役割をそのまま表す
例：page-title（ページのタイトル）、nav-list（ナビゲーションのリスト）
→ 色や形など見た目ではなく、「何のための部分か」を名前にする。 - 同じ種類の要素は同じパターンでそろえる
例：info-term・info-desc のように同じ接頭語を使うと、どのグループかひと目で分かる。
クラス名は“見た目”ではなく“役割”で決める
クラス名を決めるときは
「どんな色や形にしたいか」ではなく
「どの部分の役割を変えたいか」を基準にしましょう。
| 悪い例（見た目ベース） | 良い例（役割ベース） |
| <h1 class=”red-box”>私のプロフィール</h1> | <h1 class=”profile-title”>私のプロフィール</h1> |
- 悪い例：タイトルを赤くしたいから red-box と命名
→ 色を青に変えた時に名前とデザインが矛盾してしまう - 良い例：プロフィールページのタイトルだから profile-title と命名
→ 色やデザインを変更してもクラス名はそのままでOK
役割ベースにしておけば、デザイン変更があってもクラス名を変える必要がなく、
長く使えるコードになります。
記事をセクションごとに分けてクラスを付ける
Webページは「ヘッダー」「メイン」「フッター」など意味のある区切りごとに<section>で分けると、
コードが整理されて編集しやすくなります。
各セクションにクラスを付けておけば、CSSからそのセクション全体をまとめて装飾できます。
BEM風にBlock名を付ける例
BEMとは？
BEMとは Block（ブロック）・Element（要素）・Modifier（状態やバリエーション） の略で、
クラス名を「どのまとまりの」「どの要素か」「どんな状態か」で表す命名ルールです。
例：
- Block：news（ニュースセクション全体）
- Element：news__title（ニュースの見出し）
- Modifier：news__title–highlight（タイトルを強調した状態）
BEMを使うメリット
- どのセクションの何を指しているかが一目で分かる
- クラス名が衝突しにくい（about__title と news__title は別物）
- 状態違いをModifierで管理できる（例：–active / –disabled）
以下のようにBlock＝section名を先頭に付けるとわかりやすくなります。
前回の記事ではクラス名を付けるほどのものではないですが、つけるとこんな感じです
この書き方のポイント
- Block（セクション名）
- header / about / footer
- Element（パーツ名）
- header__title（ヘッダーのタイトル）
- about__title（自己紹介の見出し）
- about__text（自己紹介の本文）
- footer__copy（フッターのコピーライト）
〇〇__詳細-さらに詳しく（BEM＋ハイフン分割）スタイル
さらに細かい要素を表現したい場合は、
Block → Element → Sub-Element → Modifier の順に詳細化するBEM＋ハイフン分割が便利です。
| 部分 | 記号 | 例 | 意味 |
| Block | — | news | セクション全体（ニュース） |
| Element | __ | news__title | Blockの中のパーツ（タイトル） |
| Sub-Element | – | news__title-jp | Elementの中のさらに小さな要素（日本語タイトル） |
| Modifier | — | news__title–highlight | 状態やバリエーション（強調など） |
初心者がまず覚えたいタグとクラス名（ジャンル別ピックアップ）
レイアウト全体を作るタグ
| タグ | クラス名例 | 役割のイメージ |
| <div> | wrapper / container | ページやセクションを包む箱 |
| <header> | site-header | サイト全体で常に一番上にある領域（ロゴ・メニューなど） |
| <footer> | site-footer | サイト全体で常に一番下にある領域（コピーライトなど） |
| <main> | main-content | ページのメイン部分 |
| <section> | about-section / feature-section | 内容を章ごとにまとめる |
文章・見出しを装飾するタグ
| タグ | クラス名例 | 役割のイメージ |
| <h1> | page-title | ページの大見出し |
| <h2> | section-title | セクションごとの見出し |
| <p> | lead-text / body-text | 段落・本文 |
リストや項目をまとめるタグ
| タグ | クラス名例 | 役割のイメージ |
| <ul> | nav-list | 箇条書き・メニュー全体 |
| <li> | nav-item | リストの各項目 |
| <dl> | info-list | 用語＋説明のセット全体 |
| <dt> | info-term | 用語（タイトル部分） |
| <dd> | info-desc | 説明文 |
| <div> | info-item | dt/ddをまとめて装飾する箱 |
画像を扱うタグ
| タグ | クラス名例 | 役割のイメージ |
| <img> | profile-image | 写真やアイコン |
クラス名はたくさんあって、自分も覚えるのは大変でしたが、無理に覚えようとせず数をこなして、自然に出てくるようにゆっくり覚えていきましょう！
VS Codeで効率よくクラスを付けるコツ
- Emmet
.page-title と打ってTab → <div class=”page-title”></div>を自動生成 - マルチカーソル編集
同じ単語を一括選択して一気にクラスを追加
まとめ
クラス名はタグに付けるハッシュタグのようなもの。
役割ベース＋BEM＋ハイフン分割を意識すると階層がわかりやすいです。
<section>ごとにBlockを作り、about__title のようにBlock名＋__＋要素名を付ければ、どのセクションのどの要素かが一目で分かり、CSS管理が格段に楽になります。
初めは要素名を付けるのが難しいですが慣れなので、ゆっくりやっていきましょう！
リンクをコピー
2025.09.18 
前の記事
