初心者向けCSSクラスの書き方｜基本からキレイに書くコツまで徹底解説

CSS

HTMLやCSSを触りはじめたとき、まずつまずくのが「クラス（class）の書き方」。

「どこに書くの？」「ドットは何？」「複数付けるとどうなる？」など、最初は疑問だらけですよね。

この記事では、CSSでのクラス指定の基本の書き方から、実際の例、さらに複数クラスの使い分け方や注意点まで、初心者にもわかりやすく解説します。

スポンサーリンク

CSSでのクラス指定の基本

クラスとは？

クラス（class）は、HTMLの要素に付けて、その要素に特定のデザイン（スタイル）を当てるための名前札のようなものです。

基本的な仕組み

HTML側： 要素にclass属性で名前を付ける

<p class="example">この文章はclassで装飾されています</p>

CSS側： その名前を使ってスタイルを指定

.example {
  color: blue;
  font-size: 20px;
}

この場合、exampleという名前のクラスがついた要素が、青色で大きな文字になります。

なぜクラスを使うの？

クラスを使わない場合の問題

<p style="color: blue; font-size: 20px;">文章1</p>
<p style="color: blue; font-size: 20px;">文章2</p>
<p style="color: blue; font-size: 20px;">文章3</p>

問題点：

  • 同じスタイルを何度も書く必要がある
  • 変更したいとき、すべて手動で修正
  • HTMLが見づらくなる
  • 保守性が悪い

クラスを使った場合の改善

HTML：

<p class="highlight">文章1</p>
<p class="highlight">文章2</p>
<p class="highlight">文章3</p>

CSS：

.highlight {
  color: blue;
  font-size: 20px;
}

メリット：

  • スタイルの再利用が簡単
  • 一括変更が可能
  • HTMLがすっきり
  • 保守性が向上

CSSでのクラス指定の書き方

基本の書式

.クラス名 {
  プロパティ: 値;
  プロパティ: 値;
}

重要なルール

  1. 必ずドット（.）から始める
  2. 中括弧 { } で囲む
  3. 各プロパティはセミコロン（;）で終わる

実際の例

.red-text {
  color: red;
}

.large-font {
  font-size: 24px;
}

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

クラス名の付け方のルール

使える文字

  • 英小文字（a-z）
  • 数字（0-9）
  • ハイフン（-）
  • アンダースコア（_）

使えない文字・注意点

  • 日本語は使えない
  • 空白は使えない
  • 数字から始まる名前は避ける
  • 大文字小文字は区別される

良いクラス名の例

/* 良い例 */
.header-title { }
.main-content { }
.btn-primary { }
.card-image { }
.form-input { }

悪いクラス名の例

/* 悪い例 */
.赤い文字 { }     /* 日本語は使えない */
.my text { }      /* 空白は使えない */
.123abc { }       /* 数字から始まる */
.a { }            /* 短すぎて意味不明 */

この章のまとめ

クラスは「HTMLにclass属性をつける → CSSで.クラス名を指定する」の流れで使います。ドット（.）を忘れずに付けることが最重要ポイントです。次は、よくある複数クラスや複合指定について見ていきましょう。

複数のクラスを付ける・書く場合

複数クラスをHTMLに書く方法

基本的な書き方

1つの要素に複数のクラスを同時に適用することができます：

<p class="large red bold">複数クラスを使う例</p>

この場合、large、red、boldという3つのクラスが同時に適用されます。

空白での区切りがポイント

<!-- 正しい：空白で区切る -->
<div class="card primary shadow">

<!-- 間違い：カンマで区切る -->
<div class="card,primary,shadow">

<!-- 間違い：他の記号で区切る -->
<div class="card|primary|shadow">

CSS側での書き方

それぞれ別々に定義

.large {
  font-size: 24px;
}

.red {
  color: red;
}

.bold {
  font-weight: bold;
}

実際の適用例

HTML：

<p class="large red bold">この文章は大きく、赤く、太字になります</p>
<p class="large">この文章は大きいだけです</p>
<p class="red bold">この文章は赤くて太字です</p>

結果：

  • 1行目：大きく + 赤く + 太字
  • 2行目：大きいだけ
  • 3行目：赤くて太字

複数クラスの活用パターン

パターン1：ベース + バリエーション

/* ベースとなるボタンスタイル */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* 色のバリエーション */
.btn-primary {
  background-color: blue;
  color: white;
}

.btn-secondary {
  background-color: gray;
  color: white;
}

.btn-success {
  background-color: green;
  color: white;
}

HTML：

<button class="btn btn-primary">メインボタン</button>
<button class="btn btn-secondary">サブボタン</button>
<button class="btn btn-success">成功ボタン</button>

パターン2：機能別の組み合わせ

/* 位置調整 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 余白 */
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mt-1 { margin-top: 10px; }

/* 色 */
.text-red { color: red; }
.text-blue { color: blue; }
.bg-yellow { background-color: yellow; }

HTML：

<h1 class="text-center text-blue mb-2">中央揃えの青い見出し</h1>
<p class="text-right text-red mb-1">右揃えの赤い文章</p>

パターン3：状態の表現

.message {
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.message-info {
  background-color: lightblue;
  border-left: 4px solid blue;
}

.message-warning {
  background-color: lightyellow;
  border-left: 4px solid orange;
}

.message-error {
  background-color: lightpink;
  border-left: 4px solid red;
}

HTML：

<div class="message message-info">情報メッセージ</div>
<div class="message message-warning">警告メッセージ</div>
<div class="message message-error">エラーメッセージ</div>

複数クラスの優先順位

CSSの記述順が重要

.red { color: red; }
.blue { color: blue; }

<p class="red blue">この文字は何色？</p>
<p class="blue red">この文字は何色？</p>

答え：どちらも青色

理由： CSSで後に書かれた.blueが優先されるため

詳細度（specificity）による優先順位

.text { color: black; }        /* 詳細度: 10 */
.red-text { color: red; }      /* 詳細度: 10 */
.important-red { color: red; } /* 詳細度: 10 */

同じ詳細度の場合： 後に書かれたものが優先 詳細度が違う場合： 詳細度の高いものが優先

この章のまとめ

複数クラスを付けると、スタイルをパーツごとに分けて管理できるので便利です。「ベース + バリエーション」のパターンは特によく使われるので、覚えておきましょう。次は、もっと細かい複合指定のやり方を紹介します。

複合セレクタの書き方

同じ要素に複数クラスがついているとき

基本的な書き方

特定の複数クラスの組み合わせだけにスタイルを当てたい場合：

.btn.primary {
  background-color: blue;
  color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

重要： クラス名の間に空白を入れない

HTMLでの対応

<!-- 適用される -->
<button class="btn primary">メインボタン</button>

<!-- 適用されない -->
<button class="btn">普通のボタン</button>
<button class="primary">プライマリだけ</button>

より複雑な組み合わせ

.card.featured.premium {
  border: 3px solid gold;
  background: linear-gradient(45deg, #fff, #f9f9f9);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

HTML：

<!-- 適用される：3つのクラスすべてが必要 -->
<div class="card featured premium">プレミアムカード</div>

<!-- 適用されない：クラスが足りない -->
<div class="card featured">通常のカード</div>

要素名 + クラスの組み合わせ

基本的な使い方

特定のHTMLタグに付いた特定のクラスだけにスタイルを適用：

p.highlight {
  background-color: yellow;
  line-height: 1.8;
}

div.highlight {
  border: 2px solid orange;
  padding: 20px;
}

HTML：

<p class="highlight">この段落だけ黄色い背景</p>
<div class="highlight">このdivだけオレンジの枠線</div>
<span class="highlight">このspanには何も適用されない</span>

実用的な例

/* リスト項目の特別スタイル */
li.important {
  color: red;
  font-weight: bold;
}

/* 入力フィールドのエラー表示 */
input.error {
  border: 2px solid red;
  background-color: #ffe6e6;
}

/* 見出しの特別スタイル */
h2.section-title {
  color: navy;
  border-bottom: 3px solid navy;
  padding-bottom: 10px;
}

子孫セレクタとの組み合わせ

空白を使った子孫指定

.header .nav-item {
  margin-right: 20px;
}

.sidebar .menu-link {
  color: gray;
  text-decoration: none;
}

HTML：

<div class="header">
  <ul>
    <li class="nav-item">ホーム</li>
    <li class="nav-item">サービス</li>
  </ul>
</div>

複合セレクタと子孫セレクタの組み合わせ

.card.featured .card-title {
  color: gold;
  font-size: 24px;
}

.form.login .form-input {
  border-radius: 25px;
  border: 2px solid blue;
}

疑似クラスとの組み合わせ

hover効果の適用

.btn.primary:hover {
  background-color: darkblue;
  transform: translateY(-2px);
}

.menu-item.active:hover {
  background-color: lightgray;
}

その他の疑似クラス

.form-input.required:focus {
  border-color: red;
  box-shadow: 0 0 5px rgba(255,0,0,0.3);
}

.nav-link.current:visited {
  color: purple;
}

複合セレクタと単純セレクタの違い

単純セレクタ（空白あり）

.header .menu {
  /* .headerの中にある.menuすべて */
}

複合セレクタ（空白なし）

.header.menu {
  /* .headerと.menuの両方がついた要素 */
}

図解での理解

<div class="header menu">両方のクラス</div>
<div class="header">
  <div class="menu">headerの中のmenu</div>
</div>

.header.menu → 1番目のdivだけ .header .menu → 2番目のdivの中のmenu

この章のまとめ

複合指定を使うと、スタイルをよりピンポイントに当てられるので便利です。空白の有無で意味が変わることを理解しておきましょう。次は、初心者がやりがちなミスを確認します。

クラス指定でよくある間違い

ドット（.）を忘れる

よくあるミス

/* 間違い：ドットがない */
example {
  color: blue;
}

/* 正しい */
.example {
  color: blue;
}

なぜ間違い？

  • ドットなしは要素名として認識される
  • <example>という存在しないHTML要素を指定している
  • 結果としてスタイルが適用されない

実際の例での比較

<p class="highlight">この段落をスタイリング</p>

/* 間違い：適用されない */
highlight {
  background-color: yellow;
}

/* 正しい：適用される */
.highlight {
  background-color: yellow;
}

classとidの混同

基本的な違い

項目classid
HTMLでの書き方class="名前"id="名前"
CSSでの書き方.名前#名前
使用回数複数回使用可能1ページに1回のみ
用途スタイリングがメイン一意の識別がメイン

よくある間違い

<div id="header">ヘッダー</div>

/* 間違い：idにドットを使っている */
.header {
  background-color: gray;
}

/* 正しい：idにはシャープを使う */
#header {
  background-color: gray;
}

適切な使い分け例

<!-- id：ページに1つだけの要素 -->
<header id="main-header">サイトヘッダー</header>
<nav id="main-navigation">メインメニュー</nav>

<!-- class：繰り返し使う要素 -->
<article class="blog-post">記事1</article>
<article class="blog-post">記事2</article>
<article class="blog-post">記事3</article>

クラス名に空白を入れてしまう

間違いの例

<!-- 間違い：「my button」を1つのクラス名と思っている -->
<button class="my button">ボタン</button>

実際の解釈：

  • myとbuttonという2つの別々のクラス
  • my buttonという1つのクラス名ではない

正しい書き方

<!-- 正しい：ハイフンやアンダースコアを使う -->
<button class="my-button">ボタン1</button>
<button class="my_button">ボタン2</button>

<!-- または：複数クラスとして意図的に使う -->
<button class="button primary">ボタン3</button>

セレクタの書き間違い

空白の位置の間違い

/* 間違い：意図しない空白 */
. example {    /* ドットの後に空白 */
  color: red;
}

.example , .demo {  /* カンマの前に空白 */
  color: blue;
}

/* 正しい */
.example {
  color: red;
}

.example, .demo {
  color: blue;
}

中括弧の忘れ

/* 間違い：中括弧がない */
.example
  color: red;
  font-size: 20px;

/* 正しい */
.example {
  color: red;
  font-size: 20px;
}

セミコロンの忘れ

/* 間違い：セミコロンがない */
.example {
  color: red
  font-size: 20px
}

/* 正しい */
.example {
  color: red;
  font-size: 20px;
}

大文字・小文字の混同

クラス名は大文字小文字を区別

<div class="MyClass">要素</div>

.myclass {      /* 適用されない */
  color: red;
}

.MyClass {      /* 適用される */
  color: red;
}

推奨：すべて小文字で統一

/* 推奨 */
.my-class { }
.button-primary { }
.form-input { }

/* 避ける */
.MyClass { }
.buttonPrimary { }
.Form_Input { }

命名規則の不統一

悪い例：統一性がない

.redText { }      /* キャメルケース */
.blue_button { }  /* スネークケース */
.green-link { }   /* ケバブケース */

良い例：ケバブケースで統一

.red-text { }
.blue-button { }
.green-link { }
.main-header { }
.side-menu { }

デバッグのコツ

ブラウザの開発者ツールを活用

  1. F12キーで開発者ツールを開く
  2. Elementsタブで要素を選択
  3. StylesパネルでCSSの適用状況を確認
  4. 適用されていないスタイルには取り消し線

よくあるチェックポイント

  • [ ] **ドット（.）**は付いているか？
  • [ ] クラス名のスペルは正しいか？
  • [ ] 大文字小文字は合っているか？
  • [ ] 中括弧やセミコロンは正しいか？
  • [ ] CSSファイルは正しく読み込まれているか？

この章のまとめ

  • CSSのクラスは必ず**ドット（.）**で指定
  • 複数クラスはHTMLでは空白で区切り、CSSではそれぞれ.で書く
  • idは**シャープ（#）**で指定、役割が違うので注意
  • 命名規則を統一して、読みやすいコードを心がける

実践的なクラス設計のコツ

BEM記法を使った命名

BEMとは？

Block Element Modifierの略で、コンポーネント指向のCSS設計手法です。

基本的な構造

/* Block（ブロック）：独立したコンポーネント */
.card { }

/* Element（要素）：ブロックの中の部品 */
.card__title { }
.card__content { }
.card__button { }

/* Modifier（修飾子）：状態やバリエーション */
.card--large { }
.card--featured { }
.card__button--primary { }

実際の使用例

<div class="card card--featured">
  <h2 class="card__title">記事タイトル</h2>
  <p class="card__content">記事の内容が入ります。</p>
  <button class="card__button card__button--primary">詳細を見る</button>
</div>

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.card--featured {
  border-color: gold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card__title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.card__content {
  line-height: 1.6;
  color: #666;
  margin-bottom: 15px;
}

.card__button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.card__button--primary {
  background-color: blue;
  color: white;
}

機能別クラス設計

ユーティリティクラス

小さな機能を提供するクラス：

/* テキスト関連 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-bold { font-weight: bold; }
.text-italic { font-style: italic; }

/* 色関連 */
.text-primary { color: #007bff; }
.text-success { color: #28a745; }
.text-danger { color: #dc3545; }
.text-warning { color: #ffc107; }

/* 余白関連 */
.m-0 { margin: 0; }
.m-1 { margin: 10px; }
.m-2 { margin: 20px; }
.mt-1 { margin-top: 10px; }
.mb-1 { margin-bottom: 10px; }
.ml-1 { margin-left: 10px; }
.mr-1 { margin-right: 10px; }

/* 表示・非表示 */
.show { display: block; }
.hide { display: none; }
.invisible { visibility: hidden; }

コンポーネントクラス

再利用可能な部品のクラス：

/* ボタンコンポーネント */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

.btn-small {
  padding: 8px 16px;
  font-size: 14px;
}

レスポンシブ対応のクラス設計

ブレイクポイント別クラス

/* 基本スタイル */
.col {
  width: 100%;
  padding: 15px;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .col-md-1 { width: 8.33%; }
  .col-md-2 { width: 16.66%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.33%; }
  .col-md-6 { width: 50%; }
  .col-md-12 { width: 100%; }
}

/* デスクトップ以上 */
@media (min-width: 992px) {
  .col-lg-1 { width: 8.33%; }
  .col-lg-2 { width: 16.66%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.33%; }
  .col-lg-6 { width: 50%; }
  .col-lg-12 { width: 100%; }
}

使用例

<div class="col col-md-6 col-lg-4">
  <!-- スマホ：100%、タブレット：50%、PC：33.33% -->
</div>

パフォーマンスを考慮したクラス設計

効率的なセレクタ

/* 良い：シンプルで高速 */
.header { }
.nav-item { }
.btn-primary { }

/* 避ける：複雑で低速 */
div.header ul li a.nav-link:hover { }
#main > .content .sidebar ul li:nth-child(odd) { }

クラスの再利用性

/* 再利用しやすい */
.margin-bottom { margin-bottom: 20px; }
.red-text { color: red; }
.center { text-align: center; }

/* 再利用しにくい */
.homepage-main-section-title-red { 
  color: red; 
  text-align: center; 
  margin-bottom: 20px;
}

まとめ

CSSでのクラスの書き方は、慣れればとてもシンプルです。

基本のポイント

  • HTMLではclass="名前"
  • CSSでは.名前 { ... }
  • 複数クラスはHTMLで空白区切り、CSSはそれぞれ.クラス名で指定
  • 複合指定で細かくデザインをコントロール

実践のコツ

  • 意味のある名前を付ける
  • 命名規則を統一する（ケバブケース推奨）
  • 再利用性を考慮した設計
  • BEM記法などの手法を活用

よくある間違いの回避

  • **ドット（.）**を忘れずに付ける
  • classとidを混同しない
  • 空白の扱いに注意する
  • 大文字小文字を統一する

デバッグのポイント

  • ブラウザの開発者ツールを活用
  • スペルミスや記号の漏れをチェック
  • 適用順序や詳細度を理解する
  • 段階的に確認して問題を特定

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました