CSS

概要

CSS（Cascading Style Sheets）は、Webページの「見た目」を記述する言語です。HTML が文書の構造を担うのに対し、CSSは色・文字サイズ・余白・配置といった表現を担います。書き方は一貫していて、「セレクタ」で対象の要素を選び、波括弧の中に「プロパティ: 値」の宣言を並べる——h1 { color: navy; } のような規則（ルール）の集合がスタイルシートです。

「構造と見た目を分離する」というのがCSSの根本思想です。同じHTMLでも、当てるCSSを差し替えれば紙面のように印刷向けにも、スマートフォン向けにも姿を変えられます。一つのスタイルシートをサイト全体で共有すれば、デザイン変更が一箇所の修正で済む——この分離が、Webのデザインを保守可能にしています。

なぜ生まれたか

初期のHTMLには見た目を指定する手段がほとんどなく、デザインへの要求が高まると <font> タグや bgcolor 属性のような「見た目のためのHTML」が乱立しました。その結果、文書の構造と装飾が混ざり合い、デザインを変えるには全ページのタグを書き換えるしかない、という保守不能な状態に陥っていたのです。

1994年に提案されたCSSは、「スタイルは文書の外に分離し、規則として宣言する」ことでこれを解決しました。名前にある「カスケード（cascade: 段階的に流れ落ちる滝）」は、ブラウザのデフォルト・ユーザー設定・ページ制作者という複数のスタイル源が衝突したとき、決まった優先順位で一つの結果に解決する仕組みを指します。複数の関係者のスタイルを共存させるこの設計こそが、CSSが他の提案を退けて標準になった理由です。

詳細

カスケードと詳細度——「どのスタイルが勝つか」

CSSで最初につまずくのが「書いたスタイルが効かない」問題で、その正体はほぼカスケードの優先順位です。同じ要素に複数の規則が当たったとき、ブラウザは次の順で勝者を決めます。

詳細度（specificity）とは、セレクタの具体性の点数です。要素名（p）よりクラス（.card）が強く、クラスよりID（#header）が強い。この仕組みを知らずに !important で殴り合いを始めると、スタイルシートは急速に壊れていきます。実務では「詳細度をなるべく低く・フラットに保つ」のが定石で、BEMのようなクラス命名規則やユーティリティファーストのアプローチは、いずれも詳細度の衝突を避けるための工夫です。

ボックスモデルと継承

画面上のすべての要素は長方形の「ボックス」として描かれ、内側から content（内容）→ padding（内余白）→ border（枠線）→ margin（外余白）の層を持ちます。要素の幅がどこまでを含むのか（box-sizing）は、レイアウト崩れの定番の原因です。また color や font-family のような文字系のプロパティは親から子へ自動的に継承されるため、body に一度指定すればページ全体に行き渡ります。何が継承されて何がされないかを掴むと、CSSの記述量は大きく減ります。

レイアウト——float の時代から Flexbox・Grid へ

長らくCSSには「要素を横に並べる」正攻法がなく、本来は回り込み用の float や <table> を流用したハックが横行していました。現在は一次元の並びを制御する Flexbox と、二次元の格子を定義する Grid が標準となり、かつて何十行も要したレイアウトが数行で書けます。さらにメディアクエリ（@media）で画面幅に応じて規則を切り替えることで、一つのHTMLをPCにもスマートフォンにも適応させるレスポンシブデザインが実現します。

レンダリングとの関係

ブラウザはCSSを解析して CSSOM というツリーを作り、HTML から作られた DOM と合成してレンダーツリーを構築し、レイアウト計算と描画を行います。つまりCSSが読み込まれるまで画面の描画は始まりません。また、JavaScript から要素の寸法を読み取ったり width を変更したりすると、ブラウザはレイアウトを再計算します。アニメーションで transform や opacity が推奨されるのは、これらがレイアウト再計算を伴わず GPU 側で処理できるためです。パフォーマンスの話題は、常にこのパイプラインに立ち返ると理解できます。

現代のCSSとエコシステム

CSSは静的な言語だと思われがちですが、表現力は年々広がっています。カスタムプロパティ（CSS変数）でテーマの一元管理ができ、calc() で動的な計算、ネスト記法や :has() セレクタなど、かつてSassのようなプリプロセッサに頼っていた機能の多くが標準に取り込まれました。一方、大規模開発ではクラス名の衝突やスタイルの影響範囲が問題になり、CSS Modules、CSS-in-JS、Tailwind CSSのようなユーティリティファーストといった手法が使われています。手法は違えど、いずれも「グローバルに効いてしまうCSSのスコープをどう管理するか」という同じ課題への答えです。