CSS命名規則徹底解説！初心者向けの作り方、使い方、無限ループから応用例まで【サンプルコード付き】 – Japanシーモア

CSS命名規則徹底解説！初心者向けの作り方、使い方、無限ループから応用例まで

CSS命名規則の作成例、CSS命名規則の使い方、CSS無限ループを避ける方法、CSS応用例のサンプルコードCSS
この記事は約6分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webデザインにおいて、CSS命名規則は重要な要素です。

初心者にもわかりやすく、徹底的に解説していくので、安心して学んでいきましょう。

●CSSとは

まずは、CSSとは何かを理解しましょう。

CSS（Cascading Style Sheets）は、HTMLやXML文書のスタイル（見た目やレイアウト）を指定するための言語です。

Webデザインにおいて、HTMLが構造を担当し、CSSがデザインを担当しています。

●CSS命名規則の重要性

CSS命名規則は、スタイルシート内のクラス名やID名を統一的かつわかりやすく管理するためのルールです。

命名規則が統一されていれば、コードの見通しが良くなり、他の開発者との協力もスムーズに行えます。

●CSS命名規則の基本

CSS命名規則には、次のような基本的なルールがあります。

  1. アルファベットの小文字を使用する
  2. 単語と単語の間はハイフン(-)でつなげる
  3. クラス名やID名は、機能や役割に応じて命名する

例：

/* 良い例 */
.button { ... }
.header { ... }
.main-content { ... }

/* 悪い例 */
.Btn { ... }
header1 { ... }
MainContent { ... }

●CSS命名規則の作り方

CSS命名規則の作り方は、次の手順で進めます。

  • プロジェクト全体の構造を把握する
  • コンポーネントや機能ごとに分類する
  • 各コンポーネントや機能に適切な名前をつける
  • 命名規則に従ってクラス名やID名を作成する

●CSS命名規則の使い方

CSS命名規則を使うことで、コードが整理され、効率的に開発を進められます。

次の例を参考にしてください。

例： HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <h1 class="header-title">Webサイトタイトル</h1>
  </header>
  <main class="main-content">
    <p class="main-content-text">ここに本文が入ります。</p>
  </main>
  <footer class="footer">
    <p class="footer-text">Copyright &copy; 2023 Your Company</p>
  </footer>
</body>
</html>

CSSファイル（style.css）

.header {
  background-color: #333;
  padding: 20px;
}

.header-title {
  color: #fff;
  font-size: 24px;
}

.main-content {
  padding: 20px;
}

.main-content-text {
  font-size: 16px;
}

.footer {
  background-color: #333;
  padding: 10px;
}

.footer-text {
  color: #fff;
  font-size: 14px;
}

このように、CSS命名規則に従ってクラス名やID名を付けることで、コードが見やすくなり、他の開発者との協力もしやすくなります。

●無限ループを避ける方法

CSSの無限ループは、親要素と子要素が同じスタイルを継承し続けることで発生します。

無限ループを避けるために、次の方法があります。

  1. クラス名やID名を適切に分ける
  2. 必要に応じてスタイルの上書きを行う
  3. CSS設計方法（BEM, OOCSS, SMACSS等）を導入する

●応用例とサンプルコード

CSS命名規則を活用した応用例をご紹介します。

BEM（Block Element Modifier）の導入

BEMは、クラス名の命名方法で、Block（ブロック）、Element（要素）、Modifier（修飾子）の3つのパーツで構成されます。

例： HTMLファイル

<div class="card">
  <img class="card__image" src="sample.jpg" alt="サンプル画像">
  <p class="card__text">サンプルテキスト</p>
  <button class="card__button card__button--primary">ボタン</button>
</div>

CSSファイル（style.css）

.card {
  border: 1px solid #ccc;
  padding: 20px;
}

.card__image {
  width: 100%;
  height: auto;
}

.card__text {
  font-size: 16px;
}

.card__button {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.card__button--primary {
  background-color: #007bff;
}

SMACSS（Scalable and Modular Architecture for CSS）

SMACSSは、CSSの設計方法で、5つのカテゴリ（Base, Layout, Module, State, Theme）に分けてコードを整理します。

例： CSSファイル（style.css）

/* Base */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Layout */
.l-container {
  max-width: 1200px;
  margin: 0 auto;
}

.l-header {
  background-color: #333;
  padding: 20px;
}

/* Module */
.m-title {
  color: #fff;
  font-size: 24px;
}

.m-text {
  font-size: 16px;
}

/* State */
.is-active {
  background-color: #007bff;
}

/* Theme */
.t-dark {
  background-color: #333;
  color: #fff;
}

これらの応用例を参考に、CSS命名規則を使いこなしましょう。

まとめ

CSS命名規則は、効率的なWebデザインに欠かせない要素です。

初心者でも、基本ルールを押さえて、命名規則を使いこなすことができます。

今回紹介した作り方、使い方、無限ループを避ける方法、応用例とサンプルコードを参考に、最適な命名法でWebデザインを楽しみましょう。