CSS（カスケーディング・スタイル・シート）— 概要、機能、歴史、用途

基本概念と構成要素

CSSの主要な概念には、カスケード、詳細度、継承、ボックスモデルがある。カスケードは、複数の規則が同じ要素を対象とする場合にどの規則を適用するかを決定する。詳細度はセレクターの優先度を定め、継承は一部のプロパティ値を親要素から子要素へ渡す。ボックスモデルは、パディング、境界線、マージンが要素の寸法とどのように関係するかを定義する。

• セレクター: 型、クラス、ID、属性、疑似クラス、疑似要素
• プロパティ: レイアウト（display、position）、ボックスモデル（margin、padding）、タイポグラフィ（font-family、line-height）、視覚表現（color、background）
• レイアウトシステム: 通常フロー、Flexbox、Grid、マルチカラム
• レスポンシブ対応のツール: メディアクエリー、相対単位（%、em、rem、vw/vh）

歴史と発展

CSSは、HTMLを装飾する軽量な方法として1990年代半ばに生まれた。デザイナーやブラウザー開発者による初期の取り組みを経て、CSS1は1996年にW3Cから公開された。続いてCSS2が策定され、後には個別の仕様に分割されたモジュール化CSS3が登場した。ベンダーによる実装とW3Cのワーキンググループを通じて開発は継続しており、Grid、カスタムプロパティ、高度なセレクターなどの現代的な機能は段階的に追加されてきた。

用途と例

CSSは、レスポンシブなレイアウトの構築、テーマの実装、要素のアニメーション、アクセシビリティの向上に用いられる。代表例としては、メディアクエリーによるレスポンシブなナビゲーション、CSS Gridによる二次元レイアウト、Flexboxによる一次元の配置、視覚的フィードバックのための滑らかなトランジションやキーフレームアニメーションがある。CSS変数（カスタムプロパティ）を使うと、値の再利用や実行時のテーマ設定が可能になる。

区別と注目すべき事項

• CSSはインラインスタイルとは異なる。外部スタイルシートにスタイルを記述すると、再利用と関心の分離を促進できる。
• プリプロセッサー（Sass、Less）は変数やネストなどの機能を追加するが、標準CSSにコンパイルされる。
• 現代的なパターンにはCSS-in-JSやコンポーネント単位のスコープ付きスタイルがあり、Shadow DOMはカスケードとスコープに影響を与える。
• ブラウザー互換性と性能は依然として実務上の課題である。プログレッシブ・エンハンスメントと機能クエリーは、差異の管理に役立つ。