この記事の要点

CSS は セレクタ + 宣言ブロック（{ ... }）の繰り返しで構成される 宣言ブロック内は プロパティ名: 値; を ; 区切りで並べる セレクタは要素名 / クラス (.x) / ID (#x) / 属性 ([type=text]) / 擬似クラス (:hover) / 擬似要素 (::before) を組み合わせ可 カスケード（優先順位）: !important > インライン > ID > クラス・属性・擬似クラス > 要素・擬似要素 値にはキーワード（red, auto） / 数値（10px, 1.5em, 50%） / 関数（rgb(), var(), calc()）を使える 関連: CSS 文法・規則

CSS の書式とは

CSS (Cascading Style Sheets) は HTML 要素に見た目を適用するための言語です。基本構造はセレクタ + 宣言ブロックのペアで、ブラウザはこれらをカスケード順位に従って解釈・適用します。本記事では用語の正確な定義と書式の規則を整理します。

基本構造

h1#title {
    color: white;
    font-size: 24px;
}

用語	該当箇所	意味
セレクタ (selector)	h1#title	スタイルを適用する対象を指定
宣言ブロック (declaration block)	{ ... } 全体	適用する宣言の集合
宣言 (declaration)	color: white;	プロパティと値のペア
プロパティ名 (property name)	color	変更する属性の名前
プロパティ値 (property value)	white	その属性に与える値
セパレータ	;	宣言と宣言の区切り

セレクタの種類

分類	記法	マッチ対象
要素セレクタ	p	すべての p 要素
クラスセレクタ	.btn	class="btn" を持つ要素
ID セレクタ	#header	id="header" を持つ要素
属性セレクタ	[type="text"]	type 属性が text の要素
擬似クラス	:hover / :nth-child(2)	状態や位置によるマッチ
擬似要素	::before / ::after	要素の前後に挿入される仮想要素
子孫	div p	div の子孫の p
子	div > p	div の直下の p
隣接兄弟	h2 + p	h2 の直後の p
一般兄弟	h2 ~ p	h2 の後ろの全 p
グループ化	h1, h2, h3	すべてに同じ宣言を適用

プロパティ値の種類

• キーワード — auto, inherit, none, red など定義済みの語
• 数値 + 単位 — 10px, 1.5em, 50%, 0.5rem, 2vh
• 色 — #fff, rgb(255, 0, 0), hsl(120, 50%, 50%), rgba(0, 0, 0, 0.5)
• 関数 — calc(100% - 20px), var(--primary), url("img.png"), linear-gradient(...)
• 複数値（ショートハンド） — margin: 10px 20px;, font: 16px/1.5 Arial;

セレクタの詳細度（カスケード）

同じ要素に複数のルールがマッチした場合、詳細度 (Specificity) の高いものが勝ちます。同じ詳細度ならファイル後方の宣言が優先（カスケード）。

優先順位	対象	詳細度（a, b, c, d）
1（最高）	!important 付き	—
2	style 属性（インライン）	1, 0, 0, 0
3	ID セレクタ	0, 1, 0, 0
4	クラス / 属性 / 擬似クラス	0, 0, 1, 0
5	要素 / 擬似要素	0, 0, 0, 1
6	ユニバーサル（*）	0, 0, 0, 0

コメント

/* これはコメントです */
.box {
    /* 単一の宣言にもコメント可能 */
    padding: 10px;
}

CSS には // ... 形式の単一行コメントはありません（Sass / SCSS では使えます）。/* ... */ のみです。

at-rule（アットルール）

セレクタの代わりに @ で始まる特殊規則。レスポンシブやフォント読み込みで多用します。

• @media (max-width: 768px) { ... } — メディアクエリ
• @import url("reset.css"); — 外部 CSS の取り込み
• @font-face { ... } — Web フォント定義
• @keyframes fade { ... } — アニメーション定義
• @supports (display: grid) { ... } — 機能サポート判定

変数（カスタムプロパティ）

:root {
    --primary: #2980b9;
    --gap: 16px;
}

.btn {
    background: var(--primary);
    margin: var(--gap);
}

--name で定義し var(--name) で参照。すべてのモダンブラウザがサポートし、テーマ切り替えやダークモード実装の定番です。

ショートハンドプロパティ

関連する複数プロパティを 1 行で書けるのがショートハンド。コードが短く読みやすくなる反面、未指定の値が初期値に戻る点に注意が必要です。

ショートハンド	展開先	例
margin / padding	top / right / bottom / left	margin: 10px 20px;
border	width / style / color	border: 1px solid #ccc;
background	color / image / repeat / position / size	background: #fff url(x.png) no-repeat center / cover;
font	style / weight / size / line-height / family	font: bold 16px/1.5 sans-serif;
animation	name / duration / timing / delay / count / direction / fill / state	animation: fade 1s ease 0s 1 both;

!important の使い所と弊害

!important は通常のカスケード順位を無視して最優先される強力なフラグですが、多用すると後から上書きできなくなり保守性が大幅に低下します。

• サードパーティライブラリの強制上書き — やむを得ない場合のみ
• ユーティリティクラス（.text-center 等）— 設計として割り切る
• 印刷スタイル（@media print）— 確実に効かせたい
• 通常の見た目調整 — 使わない。詳細度を上げて対応

FAQ

Q: 最後の宣言の ; は省略していい？
A: 省略可能だが付ける慣例。追加時のミスを防げる。

Q: !important は使ってよい？
A: 多用すると後から上書きできなくなる。ユーティリティクラスやサードパーティ上書きなど最終手段に限定。

Q: セレクタを長くしすぎると遅い？
A: 現代ブラウザでは無視できる程度。可読性と保守性を優先。

Q: 大文字小文字は区別される？
A: プロパティ名・キーワード値は大小区別なし（color と COLOR は同じ）。ただしクラス名・ID は HTML が大小区別するのでセレクタも一致が必要。

関連: CSS 文法・規則