カスケーディングスタイルシート（CSS）：概要、基本概念、用途

基本概念と構成要素

CSSの中心となるのは、セレクターによって要素に一致させ、プロパティ値を指定する規則です。主な概念には、カスケード、詳細度、継承、ボックスモデルがあります。カスケードは複数の規則が同じ要素を対象とする場合にどの規則を適用するかを決め、詳細度はより具体的なセレクターを優先させます。継承では一部のプロパティが親要素から子要素へ伝わり、ボックスモデルはマージン、境界線、パディング、コンテンツの大きさがどのように関係するかを定義します。

一般的なCSSの機能とモジュールには、次のようなものがあります。

• セレクター：要素、クラス、ID、属性、疑似クラス、疑似要素。
• レイアウト：ブロックおよびインラインのフロー、フロート、Flexbox、Grid、位置指定。
• 視覚表現：色、背景、境界線、影、変形、トランジション。
• レスポンシブデザイン：さまざまな端末に対応するメディアクエリーと相対単位。

CSSはインラインで適用することも、文書のhead内に埋め込むことも、.css拡張子を持つ別ファイルとして外部からリンクすることもできます。外部スタイルシートは再利用性を高め、保守を容易にするため、一般的に用いられます。

スタイルを分離する実用上の利点の一つは、段階的な機能低下への対応です。スタイルが読み込めない、または対応していない場合でも、基礎となるマークアップが構造を提供するため、ウェブページは読みやすさを保つことができます。

歴史、バージョン、エコシステム

CSSは、HTMLだけで可能だった範囲を超えて表示を制御するため、1990年代に生まれました。時代とともにCSS1、CSS2、CSS3と呼ばれるレベルを経て発展しましたが、現代の開発では、単一で巨大な「CSS4」リリースではなく、機能を独立したモジュールとして標準化するモジュール型仕様が採用されています。エコシステムには、SassやLessなどのプリプロセッサ言語、ビルドツール、スタイルシートの作成・テスト・デバッグを支援するブラウザー開発者ツールも含まれます。

用途と主な区別

CSSは、ウェブデザイン、ユーザーインターフェースのスタイリング、印刷用の書式設定、異なる画面サイズやアクセシビリティ上の必要性に応じた表示の調整に不可欠です。重要な区別として、内容（HTML/XHTML）と表示（CSS）の違い、またFlexboxやGridといったレイアウトモデル間の違いがあります。ブラウザーごとに実装がわずかに異なるため、制作者は複数のエンジンでテストし、一貫した動作を確保するためにフォールバックや機能クエリーを使用することがあります。

より技術的なリファレンス、チュートリアル、互換性表については、主要な組織やベンダーのサイトが提供するブラウザー文書および標準化リソースを参照してください。