CSS

CSS とは

CSS (Cascading Style Sheets) は、Web ページの見た目を定義するための言語だ。HTML が文書の「構造」を表すのに対し、CSS は色・フォント・余白・レイアウトといった「装飾と配置」を担う。構造と見た目を分離することで、同じ HTML に異なるデザインを適用したり、デザインだけを一括変更したりできる。

役割分担

言語	担当
HTML	文書の構造・意味
CSS	見た目・レイアウト
JavaScript	動き・振る舞い

この 3 つが役割を分け合うことで、Web ページは成り立つ。構造と装飾を分けるのは、保守性を高めるための基本原則だ。

カスケードが順位を決める

CSS の名前にある「カスケード (Cascading)」は、同じ要素の同じプロパティに複数の指定が当たったとき、段階を追って 1 つに絞り込む仕組みを指す。規格 (CSS Cascading and Inheritance Level 5) は、まず宣言の出どころ (原点) と重要度で並べ、上にあるものが下に勝つと定めている。

順位	宣言の種類
1	トランジションの宣言
2	!important 付きのブラウザ既定
3	!important 付きの利用者スタイル
4	!important 付きの制作者スタイル
5	アニメーションの宣言
6	通常の制作者スタイル
7	通常の利用者スタイル
8	通常のブラウザ既定

見落としやすいのは、!important を付けると制作者と利用者の上下が入れ替わる点だ。通常の宣言では制作者 (6) が利用者 (7) より強いのに、両方が !important を付けると利用者 (3) が制作者 (4) を上回る。文字を大きくする利用者側の設定がサイトの指定に勝てるのは、この逆転があるからだ。原点と重要度で決着しなければ次の判定材料である詳細度を見て、それも並べば最後は文書順で後に書かれた宣言が勝つ。

詳細度は桁上がりしない

詳細度は、セレクターごとに 3 つの数を数えて決まる。ID セレクターの個数 (A)、クラス・属性・擬似クラスの個数 (B)、型セレクターと擬似要素の個数 (C) で、全称セレクター (*) は数に入れない。比較は A から順に行い、A が同じなら B、B も同じなら C を見る。

ここが誤解されやすい。詳細度は 10 進の数値ではないので、下の位をいくら積んでも上の位には届かない。クラスを 11 個並べたセレクターは (0,11,0) であって、ID 1 つの #main (1,0,0) には勝てない。100 個並べても結果は同じだ。規格は逆に、実装の格納上の制限で A・B・C が上限を超える場合は上限に丸めてよいとまで書いている。詳細度の競り合いに持ち込むほど収拾がつかなくなるのは、この構造のせいだ。

継承は親の計算値をもらう

継承は、親要素から子要素へ値が伝わる仕組みだ。規格の定義は明快で、ある要素における継承値とは「親要素でのそのプロパティの計算値」であり、親を持たないルート要素では初期値が継承値になる。宣言が 1 つも当たらなかったプロパティは、継承する性質なら親の計算値、しないなら初期値で埋まる。

color や font-family が子孫まで伝わるのに border や padding は伝わらないのは、継承する性質かどうかがプロパティごとに規格で決められているからだ。文字に関わる指定はまとめて効かせたいことが多く、枠や余白は個別に決めたいことが多い、という実務上の区別がそのまま反映されている。伝わらないプロパティを親でまとめて指定して効かない、という手詰まりは、この区分を先に確かめれば避けられる。

レイアウトと条件分岐の現在地

Flexbox と Grid が入るまで、段組みは float や表組みの流用でしのぐ領域だった。今は「主軸に沿って並べる」「行と列の格子に置く」という意図をそのまま書ける。

条件分岐の側も変わった。従来のメディアクエリは画面全体の寸法を見るため、同じ部品でも置かれた場所の広さには反応できない。コンテナクエリ (@container) は親要素の寸法を条件にできるので、狭い欄に置けば縦積み、広い欄に置けば横並び、という部品単体で完結した切り替えが書ける。:has() は子孫の有無を条件に親側へスタイルを当てられるので、画像を含むカードだけ余白を変えるといった指定に JavaScript が要らない。

どちらも MDN の Baseline 表示では「広く利用可能」の段階にある (@container は 2023 年 2 月から、:has() は 2023 年 12 月から主要ブラウザ横断で使える・2026 年 8 月時点)。古い書き方を避けよう、という一般論ではなく、この 2 つが前提にできるかどうかで設計そのものが変わる、と具体的に押さえておきたい。

学ぶうえでの勘所

CSS は「とりあえず見た目が整う」までは易しいが、大規模になると管理が難しくなる言語だ。スタイルが意図せず他の箇所に影響する、上書き関係が複雑化する、といった問題が起きやすい。設計が要るのは、この言語が当たった宣言を捨てずに全部抱えたまま順位付けするからだ。

破綻を防ぐ手立て

スタイルが意図せず他所に影響する問題は、突き詰めると「どの宣言が勝つか」を人が追えなくなった状態を指す。手当ては 3 通りに整理できる。

1. 詳細度を平坦に保つ。 クラス 1 つ分 (0,1,0) で書き切る規約にしておけば、勝ち負けは文書順だけで決まる。命名規則が効くのは、名前が整うからではなく、詳細度を横並びに揃えられるからだ。
2. 優先順位を宣言で表す。 カスケードレイヤー (@layer) を使うと、レイヤーを最初に宣言した順序がそのまま優先順位になる。先に宣言したレイヤーが弱く、どのレイヤーにも属さない指定が最後 (最も強い) に置かれるため、詳細度の競り合いに持ち込まずに「リセットより部品、部品より上書き」を表現できる。
3. !important を最後の手段にする。 原点の並び順を飛び越える力があるぶん、一度使うと以降は同じ手を重ねるしかなくなる。手を入れられない外部スタイルを打ち消す場合に限り、範囲を狭めて使う。

見た目を扱う言語である以上、アクセシビリティ (文字の見やすさ、コントラスト) への配慮も CSS の責任範囲だ。見た目を整えるだけでなく、誰にとっても使いやすいページを目指したい。