タイトル: 書式
SEOタイトル: 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 文法・規則