CSSの基本

CSS基本 — セレクタ・プロパティ・値・詳細度・単位

HTML がページの構造を担うのに対し、CSS（Cascading Style Sheets）は見た目を担います。フォントの大きさ、色、余白、レイアウト、アニメーションまで、ブラウザ上の視覚的な表現はすべて CSS によって制御されます。このレッスンでは、CSS の基本文法であるセレクタ・プロパティ・値の三要素、スタイルの適用ルールを決めるカスケードと詳細度、そして数値の単位である px / rem / % / vw を体系的に学びます。

---

CSS の基本構文

CSSの基本構造：セレクタ・プロパティ・値・詳細度

CSS の基本単位は宣言ブロックと呼ばれる次の構造です。

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
}

具体例を見てみましょう。

h1 {
  color: #1d4ed8;
  font-size: 2rem;
  margin-bottom: 16px;
}

ここでは h1 がセレクタ、color font-size margin-bottom がプロパティ、#1d4ed8 2rem 16px が値です。セミコロン（;）で各宣言を区切り、中括弧（{}）で囲みます。

💡 CSSファイルの読み込み方: HTMLの <head> 内に <link rel="stylesheet" href="style.css"> と記述してCSSファイルを外部読み込みするのが標準です。<style> タグ内に直接書く内部スタイルや、style="..." 属性に書くインラインスタイルも動作しますが、保守性の観点から外部ファイル化を強く推奨します。

---

セレクタの種類

セレクタはどの HTML 要素にスタイルを適用するかを指定します。代表的なセレクタを整理します。

タグセレクタ

HTML タグ名をそのまま指定します。ページ上のすべての同名タグに適用されます。

p { color: #374151; }
a { text-decoration: none; }

クラスセレクタ

.クラス名 で指定します。同じクラスを複数要素に付与でき、再利用性が高いため最もよく使われます。

.card { background: white; border-radius: 8px; }
.btn-primary { background: #2563eb; color: white; }

HTML 側では <div class="card"> のように記述します。

IDセレクタ

#ID名 で指定します。同じIDはページ内に1つだけというルールがあります。詳細度が高いため、使いすぎると後述の詳細度問題を引き起こします。

#header { position: sticky; top: 0; }

複合セレクタ・擬似クラス

セレクタは組み合わせて使うことでより精密な指定ができます。

💡 クラスを中心に設計する: IDセレクタは詳細度が高く、後で上書きしにくくなります。原則としてスタイル指定にはクラスを使い、IDはJavaScriptの操作対象として使う設計が保守しやすいです。

---

カスケードと詳細度

CSS の C は「Cascading（カスケード）」の頭文字です。複数のスタイルが同じ要素に指定された場合、どれが優先されるかを決めるルールがカスケードです。

詳細度（Specificity）の計算

詳細度は 4 桁のスコアで表されます。スコアが高いほど優先されます。

複合セレクタは各スコアを足し算します。例えば nav ul li.active のスコアは 0,0,1,3（クラス1 + タグ3）です。

!important について

!important をプロパティ値の後ろに付けると詳細度を無視してそのスタイルが最優先になります。

.override { color: red !important; }

⚠️ !important の乱用は禁物: 一度 !important を使い始めると、上書きするためにさらに !important が必要になる「詳細度戦争」が起きます。使うのはサードパーティのCSSを上書きせざるを得ないケースなど、本当に必要な場面に限定してください。

カスケードの順序

詳細度が同じ場合は、後から書かれたスタイルが優先されます。これがカスケード（滝のように流れる）の意味です。

p { color: blue; }
p { color: red; }  /* こちらが適用される */

---

主なプロパティ一覧

CSSには200以上のプロパティがありますが、日常的に使うものは限られています。カテゴリ別に整理します。

テキスト・フォント系

背景・ボーダー系

💡 background の短縮記法: background: #f3f4f6 url('bg.png') no-repeat center / cover; のように1行で複数のプロパティをまとめて書けます。ただし、読み取りにくくなるため個別指定を好む開発者も多いです。

---

単位の使い分け

CSSの数値には単位が必要です（0 だけは単位不要）。用途に応じて使い分けます。

px（ピクセル）

画面上の点数を直接指定する絶対単位です。

• ◆用途: ボーダー幅、シャドウのぼかし量、アイコンサイズなど固定が必要な箇所
• ◆注意: ユーザーがブラウザのフォントサイズを変更しても変わらない。アクセシビリティに影響することがある

border: 2px solid #e5e7eb;
border-radius: 8px;

rem

ルート要素（<html>）のフォントサイズを基準とする相対単位です。デフォルトでは 1rem = 16px。

• ◆用途: 文字サイズ、余白（margin / padding）。アクセシビリティに優しい
• ◆メリット: ユーザーがブラウザのフォントサイズを変更すると、remベースの要素も追従する

html { font-size: 16px; }
h1 { font-size: 2rem; }    /* = 32px */
p  { font-size: 1rem; }    /* = 16px */

%（パーセント）

親要素の対応プロパティ値に対する割合を指定します。

• ◆用途: 幅・高さのレイアウト、フォントサイズの相対調整
• ◆注意: height: 50% は親要素に高さが指定されていないと機能しない

.container { width: 90%; max-width: 1200px; }
.half { width: 50%; }

vw / vh（ビューポート単位）

ブラウザのビューポート（表示領域）の幅（vw）または高さ（vh）に対する割合です。

• ◆vw: 1vw = ビューポート幅の1%
• ◆vh: 1vh = ビューポート高さの1%
• ◆用途: フルスクリーンセクション、レスポンシブな文字サイズ

.hero { height: 100vh; }          /* 画面の高さいっぱい */
.fluid-text { font-size: 4vw; }   /* 画面幅に応じて変化 */

⚠️ 文字サイズには px より rem を使う: font-size: 16px とすると、ユーザーがブラウザの設定でフォントサイズを大きくしても変わりません。font-size: 1rem にすることでユーザー設定を尊重でき、アクセシビリティが向上します。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆詳細度の計算: header nav ul li.active a:hover のセレクタ詳細度スコアを計算してください。（ヒント: タグ・クラス・擬似クラスの数を数える）
2. ◆単位の比較: font-size: 16px、font-size: 1rem、font-size: 100% の3つをHTMLに実装し、ブラウザのフォントサイズ設定を変更して挙動の違いを確認してください。
3. ◆カスケードの確認: 同じ要素に複数のCSSルールを書き、詳細度と順序を変えながらどのスタイルが適用されるかをDevToolsで確認してください。
4. ◆セレクタ実装: nav > ul > li:first-child a を使ったスタイルを書き、意図した要素だけに適用されることを確認してください。

📝まとめ

CSS の基本構文はセレクタ・プロパティ・値の三要素で構成されます。セレクタはタグ・クラス・IDの順に詳細度が高くなり、詳細度が高いほど優先適用されます。同詳細度なら後書きが優先で、これがカスケードの本質です。単位はpx（絶対）・rem（ルート相対）・%（親要素相対）・vw/vh（ビューポート相対）を用途に応じて使い分けます。文字サイズにはアクセシビリティのために rem を優先し、!important の乱用は避けましょう。次のレッスンではボックスモデルを学び、余白とレイアウトの基礎を習得します。