【入門】クラス名の付け方・付ける際のポイントについて解説！

INDEX

はじめに
1. この記事の対象者
2. この記事で学べること
CSSスタイリングの基本
クラス名の基本的な考え方
クラス名の管理方法
最後に

はじめに

ウェブ制作において、HTML要素のクラス属性に付与するクラス名をどのように定義するかはとても重要な課題です。

適切なクラス名を選択することで、要素の役割やスタイルを明確に把握することができ、コードの可読性や保守性が向上します。

この記事ではウェブ制作初心者の方向けに、クラス名の付け方について具体的な例や実践的なアドバイスを交えて解説します。

この記事の対象者

ウェブ制作初心者の方
クラス名の付け方に悩んでいる方
保守性を意識したコーディングについて学びたい方

この記事で学べること

クラス名を付ける際の基本的な考え方
初心者向けのクラス名の管理方法
クラス名によく使われる単語

CSSスタイリングの基本

ウェブ制作において、ウェブサイトのスタイリングを行う際は基本的にCSSを使用します。CSSはウェブページの要素にスタイルを適用するための言語であり、HTMLと組み合わせてウェブサイトのデザインを制御します。

スタイリングを行うには、適切なクラス名の選択とスタイルの定義が重要です。クラス名は要素に関連付けられ、スタイルを適用するための識別子として機能します。

適切なクラス名を付けることでコードの可読性を向上させることができ、メンテナンスや更新の際にも変更箇所の特定が容易になるなど、ウェブ制作において多くの利点をもたらします。

クラス名の基本的な考え方

要素に適切なスタイルを適用するためには、適切なクラス名を選ぶことが重要です。適切なクラス名を付けることで、コードの理解と保守性が向上し、チーム内での協力も円滑になります。

クラス名を付ける際の基本的な考え方として３つのポイントをご紹介します。

一貫性を意識する
直感的に理解しやすいものを選ぶ
過度な詳細さを避ける

一貫性を意識する

クラス名の考え方において、一貫性を意識することはとても重要です。一貫性があるクラス名はコードの可読性を向上させ、保守性を高める効果があります。

また、一貫性を意識することでスタイルを共通化することができ、CSSコードの記述量を少なくすることができます。

一貫性を意識したクラス名の例

header: 主にheader要素に使用します。複数ページで同じスタイルシートを読み込むことで、コードの重複を避けることができます。
footer: 主にfooter要素に使用します。複数ページで同じスタイルシートを読み込むことで、コードの重複をさけることができます。
section-wrapper: div要素やsection要素に使用します。各section要素あるいはセクションを区切るdiv要素に指定することで、セクション間のmarginやセクション内のpadding等を共通化することができます。
section-title: セクションの見出しに使用します。見出しのデザインが同じ場合、各見出しに指定することでスタイルを共通化することができます。
button: ウェブサイトに配置されるボタンの基本スタイルを共通化します。
primary-button: ウェブサイトに配置される主要なボタンのスタイルを共通化します。
container: ウェブページの表示幅を共通化する目的で使用できます。メインコンテンツやサイドバーのレイアウトを制御する場合もあります。

直感的に理解しやすいものを選ぶ

直感的に理解しやすい名前を使うことで、スタイルの意図や要素の役割を把握しやすくなります。

要素の役割や目的を考慮し、意味のある単語やフレーズを用いることで、他の開発者や未来の自分にとって理解しやすいコードになるでしょう。

直感的に理解しやすいクラス名の例

header-logo: ヘッダー内のロゴに使用します。

slider: スライダーに使用します。

contact-form: お問い合わせフォームに使用します。

news-list: お知らせ一覧に使用します。

過度な詳細さを避ける

詳細なクラス名を付けることで、どのようなスタイルが適用されるか把握しやすいというメリットがあります。しかし、詳細すぎるクラス名はコードを複雑にし、保守性に悪影響を与えます。

具体的には、クラス名に余分な詳細を含めると将来的なスタイルの変更や再利用が難しくなります。詳細すぎるクラス名はスタイルの分散を招き、特定のスタイルを複数の場所に散在させる可能性を生み出します。

また、あまりにも長すぎるクラス名は可読性を損ない、コードを読む際に混乱を招く恐れがあります。最低限の情報を含んだ名前を選び、必要なスタイル情報はCSS内で定義するとよいでしょう。

過度に詳細なクラス名の例

text-align-center-header: ヘッダー要素のテキストを中央寄せにするクラス名。ヘッダー以外で使用すると混乱を招くので再利用ができません。

mein-section-title-font: メインコンテンツ内にあるセクションタイトルのフォントスタイルを定義するクラス名。見出しはフォントスタイル以外にもスタイルを適用する可能性があるため、更にクラス名を追加しなければならなくなります。

blue-button-in-header-for-website: 複数ページ共通のヘッダーに表示される青いボタンを定義するクラス名。forやin、websiteなどは無くても意味が伝わります。また、ヘッダーのボタンが固有のデザインでなければheaderの必要もありません。

borderBottom-red-and-font-bold: 赤色の下線付きで太字のテキストを表すクラス名。レベルの低い見出しのスタイリングに使用できそうですが、段落内のstrongやem要素にも使用できそうです。これらは要素の意味合いが異なるので、共通のクラス名で管理することは予期せぬ表示崩れを招く可能性があります。

適切なクラス名を選ぶことは、スタイリングの基盤を築く大切なステップです。意味のある名前を選び、プロジェクト内で一貫性を保つことで、スタイルの管理が効果的に行えます。

クラス名の管理方法

クラス名を管理するにあたり、極端に分けると2つのアプローチが考えられます。

基本的な役割を持つ要素のみにクラス名を付ける
全ての要素にクラス名を付ける

どちらにも一長一短があり、デメリットを緩和するために命名規則やコーディングガイドラインを決めることでバランスを保ちます。

それぞれの特徴やメリット・デメリットについて解説します。

基本的な役割を持つ要素のみにクラス名を付ける

このアプローチはランディングページや小規模サイトをスピーディーに開発する際に有効です。

HTMLのセマンティクスを尊重しつつ、クラス名を効果的に活用することでスタイルを管理します。HTMLの階層構造を活用したセレクタを使用することで、それぞれの要素にスタイルを適用させていきます。

クラス名の定義を基本的な役割に留めることでHTMLコードをシンプルに保つことができますが、要素の役割やスタイルが不明確になり、書いた本人にしか分からないコードになりやすいです。

また、特定のスタイルや機能を持つ要素を特定するのが難しいため、中規模以上のサイトではスタイルの再利用がうまく行われずにスタイルシートが肥大化する可能性があります。

ガイドラインを策定することでこれらの問題に対応することができますが、どの程度クラス名の定義が必要になるかはプロジェクトの規模やデザインによって大きく異なります。

全ての要素にクラス名を付ける

このアプローチでは、HTML要素ごとにクラス名を付与することでHTMLコードが明示的になるというメリットがあります。適切なクラス名を付けることで、コードを書いた本人以外でも理解しやすくなります。

CSSでスタイリングする際にクラスセレクタのみの指定で記述できるため、不用意に詳細度を上げることがありません。また、スタイルを部品ごとや機能ごと、役割ごとなど自由に定義できるため、再利用性の高いスタイルを記述できます。

ただし、適切なクラス名が付けられない場合は混乱を招く可能性があります。また、意味のないクラス名の定義は冗長であり、1つの要素に対して付与するクラスが多くなる場合も考えられるため、HTMLの可読性が損なわれる場合があります。

2つのアプローチをサンプルコードで比較

2つのアプローチを比較してみます。違いを理解しやすいよう極端な例にしています。

以下はクラス属性を定義していない状態のHTMLです。

<body>
  <header>
    <h1>LOGO</h1>
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>サービス</h2>
      <p>当社の提供するサービスの内容です。</p>
    </section>

    <section>
      <h2>お問い合わせフォーム</h2>
      <form>
        <label for="name">お名前:</label>
        <input type="text" id="name" name="name">
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email">
        <button type="submit" class="submit-button">送信</button>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2023 サイト名</p>
  </footer>
</body>

以下のように表示されるようにコーディングを行います。

まずはヘッダーから見ていきましょう。

ヘッダー

ヘッダーは以下の部分です。

基本的な役割を持つ要素のみにクラス名を付けた場合

<header class="header">
  <h1>LOGO</h1>
  <nav class="global-nav">
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

この例では、クラス名の指定はheader要素とnav要素のみに行っています。CSSは以下になります。

/* ヘッダースタイル */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

.header h1 {
  font-size: 24px;
}

/* ナビゲーションスタイル */
.global-nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.global-nav a {
  color: tomato;
  text-decoration: none;
  font-weight: bold;
  display: block;
}

このアプローチのポイントは、「子孫セレクタを使用する」ところにあります。

これは、h1やa、ulなどのタイプセレクタに対して直接スタイリングすることは予期せぬ表示崩れを招く可能性があるためです(基本設定やリセットの記述は除く)。「.header h1」とすることで、ヘッダー内のh1要素のみにスタイルが適用されることになります。

子孫セレクタを使用する際は、ネストの深さによって詳細度が変化することに注意が必要です。例えば上の例で以下のようなスタイルを追加してみます。

/* ナビゲーションスタイル */
.global-nav ul {
  /* 省略 */
}

/* 追記 */
.global-nav ul a {
  color: orange;
}

.global-nav a {
  color: tomato;
  text-decoration: none;
  font-weight: bold;
  display: block;
}

この例では、グローバルナビゲーションの文字色はオレンジになります。子孫セレクタは具体的であるほど詳細度が上がるため、下に記述されている「.global-nav a { color: tomato; }」よりも優先的に適用されます。

次に、全ての要素にクラス名を付けた場合で同じスタイリングをしてみます。

全ての要素にクラス名を付けた場合

<header class="header">
  <h1 class="header-logo">LOGO</h1>
  <nav class="global-nav">
    <ul class="nav-menu">
      <li class="nav-item"><a href="#" class="nav-item-link">ホーム</a></li>
      <li class="nav-item"><a href="#" class="nav-item-link">サービス</a></li>
      <li class="nav-item"><a href="#" class="nav-item-link">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

全ての要素にクラスを付けました。HTMLの記述量が増えたため、先ほどの例と比べると少し読みづらいように感じます。

以下はCSSです。スタイルの内容は上記の例と変わらないため省略しています。

.header {
 /* 省略 */
}

.header-logo {
  /* 省略 */
}

.nav-menu {
  /* 省略 */
}

.nav-item-link {
  /* 省略 */
}

クラスセレクタのみでスタイリングをしているので、意図的にクラスを付与しない限り他の要素に影響を与えることなく、スタイリングを確実に行うことができます。

この例ではnav-itemとglobal-navのクラスは使っていませんが、これはあくまでも「私が実装した結果」なので、他のコーダーがコーディングした場合は違う結果になる可能性も考えられます。

また、コーディングが進むことで必要になる場合や、把握できていないところで使用されている可能性も考えられます。

このアプローチを採用する場合は、HTMLが読みづらいという理由のみで使われていないクラスを削除することは望ましくありません。クラス名を省略したい場合は、ガイドラインとして取り決めが必要になります。

続いて、メインコンテンツについて見てみます。

メインコンテンツ

メインコンテンツは以下の部分です。

基本的な役割を持つ要素のみにクラス名を付けた場合

<main>
  <section class="service-section">
    <h2>サービス</h2>
    <p>当社の提供するサービスの内容です。</p>
  </section>

  <section class="contact-section">
    <h2>お問い合わせフォーム</h2>
    <form>
      <label for="name">お名前:</label>
      <input type="text" id="name" name="name">
      <label for="email">メールアドレス:</label>
      <input type="email" id="email" name="email">
      <button type="submit" class="submit-button">送信</button>
    </form>
  </section>
</main>

メインコンテンツではsection要素とbutton要素のみにクラス名を付けています。CSSでは以下のようにスタイリングすることができます。

/* メインコンテンツスタイル */
/* セクション共通 */
.service-section,
.contact-section {
  padding: 80px 0;
}

.service-section h2,
.contact-section h2 {
  font-size: 20px;
  text-align: center;
}

/* サービスセクション */
.service-section p {
  text-align: center;
}

/* お問い合わせフォームスタイル */
.contact-section {
  background: #555;
}

.contact-section h2 {
  color: #fff;
}

.contact-section form {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  background-color: #fff;
  max-width: 600px;
  padding: 24px 16px;
  margin: 0 auto;
}

.submit-button {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

ここでのポイントは、セクションやセクションタイトルの共通のスタイルがどのように行われているかが重要です。

上記の例ではこのようにセレクタを指定しました。

.service-section,
.contact-section {}

.service-section h2,
.contact-section h2 {}

この方法は、セクションが増えた場合にそれぞれのルールセットに追記しなければならないという問題があります。

.service-section,
.contact-section,
.new-section {}

.service-section h2,
.contact-section h2,
.new-section h2 {}

それぞれのセクションに共通のクラス名を追加することで問題を解決することができます。

  <section class="section service-section"> … </section>
  <section class="section contact-section"> … </section>

.section {
  /* セクション共通のスタイル */
}

.section h2 {
  /* セクションタイトル共通のスタイル */
}

しかし、このアプローチは子孫要素にタイプセレクタを多用しているため、将来的に発生する問題がはかり知れません。

コーディングが進んだ後で共通用のクラスを定義する場合、スタイルの影響を受ける要素を全て正確に確認することは困難なので、多くの時間と手間を費やす可能性があります。

次に、全ての要素にクラス名を付けた場合を考えます。

全ての要素にクラス名を付けた場合

<main>
  <section class="section">
    <h2 class="section-title">サービス</h2>
    <p class="section-lead">当社の提供するサービスの内容です。</p>
  </section>

  <section class="section background-black">
    <h2 class="section-title text-white">お問い合わせフォーム</h2>
    <form class="form">
      <label for="name" class="form-label">お名前:</label>
      <input type="text" class="form-input" id="name" name="name">
      <label for="email" class="form-label">メールアドレス:</label>
      <input type="email" class="form-input" id="email" name="email">
      <button type="submit" class="button button__submit">送信</button>
    </form>
  </section>
</main>

このアプローチのメリットとして、スタイルが共通化しやすいことと、HTMLコードが明示的になることが挙げられます。

HTMLの記述のみで要素に適用されているスタイルが予測しやすくなりますが、HTMLの構造やデザインが複雑になると可読性を損なうというデメリットもあります。

上記の例はこれらのメリットを生かす目的でクラス名が付けられており、カテゴリー名などの用途が限定されるクラス名は控えています。また、デメリットを軽減するために、なるべく簡潔なクラス名を付けています。

以下はこのHTMLで使用しているクラス名の一覧です。

section: セクション共通のスタイルを定義します。
section-title: セクションの見出しのスタイルを定義します。
section-lead: セクションの概要文のスタイルを定義します。
background-black: 背景色を黒色にするスタイルを定義します。
text-white: 文字色を白色にするスタイルを定義します。
form: フォームのスタイルを定義します。
form-label: フォームのラベル部分の共通スタイルを定義します。今回は使用しません。
form-input: フォームのinput要素の共通スタイルを定義します。今回は使用しません。
button: ボタンの共通スタイルを定義します。
button__submit: 送信ボタン専用のスタイルを定義します。

また、スタイルを共通化するためにCSSも少し変わります。

/* セクション関連のスタイル */
.section {
  padding: 80px 0;
}

.section-lead {
  text-align: center;
}

.section-title {
  font-size: 20px;
  text-align: center;
}

/* フォーム関連のスタイル */
.form {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  background-color: #fff;
  max-width: 600px;
  padding: 24px 16px;
  margin: 0 auto;
}

/* ボタン関連のスタイル */
.button {
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
}

.button__submit {
  background-color: #333;
  color: #fff;
  border: none;
}

/* ユーティリティクラス */
.background-black {
  background-color: #555;
}

.text-white {
  color: #fff;
}

セレクタとコメント、ルールセットの記述位置が変わっただけですが、buttonのみ基本スタイルを分離して共通化しています。

/* ボタン関連のスタイル */
.button {
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
}

.button__submit {
  background-color: #333;
  color: #fff;
  border: none;
}

.buttonの共通化にあたって、display: inline-block;をbuttonクラスに追加しています。これは、.buttonクラスを適用する要素がインライン要素かブロック要素かを特定できないための処置です。aタグのようなインライン要素にbuttonクラスを付与する可能性も考えられるため記述しています。

ちなみに、text-whiteやbackground-blackのように、様々な要素に対して汎用的に使えるものはユーティリティクラス（またはヘルパークラス）と言われたりします。

この例はシンプルでとても小規模なので、HTML・CSSともにかなり冗長なコードになりました。フッターに関しては書かないと気持ち悪いという理由だけで記述したので解説の意図はありません。

初心者にオススメのアプローチはどちらか

ウェブ制作を学び始めたばかりの方は、クラス名を付ける際に迷うことが多いと思います。HTMLやCSSの基本を学びながら制作を行うことになるため、クラス名の決定に多くの時間を費やすとこれらの学習効率を下げてしまいます。

クラス名は後からでも追加できます。この記事の内容が少し難しく感じられた方は、「分かりやすくシンプルなクラス名」を意識して、最低限のクラス名を定義しながらHTMLやCSSの学習を進めると良いです。

適切なクラス名を考えるよりも、まずはHTMLやCSSの基礎を身に付ける方が重要です。基礎が身に付けば、スタイルの共通化についてのアイディアが自然と閃くようになります。

クラス名が必要な要素はウェブサイトの規模やデザインによって異なりますが、一定のパターンがあります。

クラス名でよく使われる単語をご紹介しますので、クラス名の付け方に悩む方はこれらを組み合わせてクラス名を決めると良いでしょう。

クラス名でよく使われる単語

セクション・カテゴリー名など具体的なもの: about：　○○について; news：　お知らせ; consept：　コンセプト; service：　サービス; access：　アクセス; privacy：　プライバシー
まとまったコンテンツなど: section(sect)：　セクション; wrapper(wrap)：　ラッピング; container：　コンテナ; sidebar：　サイドバー; post：　投稿; description(desc)：　概要
修飾: main：　メインの; common：　共通の; global：　全体の; sub：　補助的な; small(sm)：　小さい; medium(md)：　中くらい; large(lg)：　大きい; left：　左; center：　真ん中; right：　右; reverse：　反転
状態: open：　開く; close：　閉じる; active：　有効; show：　表示; hide：　非表示

最後に

この記事ではウェブ制作初心者の方向けに、スタイリングを行う際に必須となるクラス名の付け方について解説しました。

基本的な考え方やポイントなど、少し具体的な説明になったため難しく感じた方もいるかもしれませんが、これらはコーディング経験を積むことで段階的に理解できるようになります。

初心者のうちからクラス名の付け方に頭を抱えすぎると、かえって学習の妨げになってしまいます。HTMLやCSSの基礎を優先的に学び、コーディングに慣れてから積極的にクラス名を活用した効率化を考えると良いでしょう。