この記事の要点

CSS は Cascading Style Sheets の略で、HTML の見た目（色・配置・タイポグラフィ）を分離して記述する言語。1996 年 W3C 勧告 セレクタで対象要素を選び、property: value; のペアでスタイルを適用する。優先度は 特異度 (specificity) とソース順で決まる すべての要素はボックスモデル（content / padding / border / margin）として配置される。box-sizing: border-box が現代の主流 Flexbox と Grid によって、float ハックなしで複雑なレイアウトが直感的に書けるようになった CSS Variables（--main-color: #333; / var(--main-color)）が標準化され、SCSS なしでもテーマ切替が可能に メディアクエリ (@media (max-width: 768px)) でレスポンシブデザインを実装する プリプロセッサ (SCSS/Sass/Less) や CSS Modules、CSS-in-JS など、CSS を強化・モジュール化する手法が多数存在する

概要

CSS (Cascading Style Sheets) は、HTML や XML 文書の表示スタイルを記述するためのスタイルシート言語である。HTML が「文書の構造（何が見出しで、何が段落か）」を担うのに対し、CSS は「見た目（何色で、どこに、どんな大きさで表示するか）」を担う。この構造と表現の分離こそが現代の Web 開発の土台になっており、HTML と CSS は常にセットで語られる。

1996 年に W3C で CSS1 が勧告され、その後 CSS2 (1998) → CSS2.1 (2011) と単一の巨大仕様だったが、CSS3 以降は「Selectors」「Flexbox」「Grid」「Color」「Animations」のようにモジュール単位で個別に勧告される方式に変わった。これにより、ブラウザ実装の進捗が読みやすくなり、開発者が機能ごとに対応状況を確認できるようになった (caniuse.com など)。拡張子は .css、MIME タイプは text/css。

内部構造・構文

CSS の基本単位はルールセットで、「セレクタ」と「宣言ブロック (波括弧)」の組み合わせで書く。

/* セレクタ { プロパティ: 値; プロパティ: 値; } */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #fff;
  color: #333;
}

.button {
  padding: 8px 16px;
  border-radius: 4px;
  background: #2563eb;
  color: white;
  cursor: pointer;
}

.button:hover { background: #1d4ed8; }

@media (max-width: 768px) {
  .button { width: 100%; }
}

:root {
  --main-color: #2563eb;
  --gap: 16px;
}
.card {
  padding: var(--gap);
  border: 1px solid var(--main-color);
}

セレクタはクラス (.foo)、ID (#foo)、要素名 (p)、属性 ([type="text"])、擬似クラス (:hover / :nth-child(2))、子孫 (.foo .bar) など豊富に揃う。複数のルールが同一要素にマッチした場合、特異度 (specificity) で優劣が決まる。インラインスタイル > ID セレクタ > クラス/属性/擬似クラス > 要素セレクタ、というのが大まかな序列。特異度が同じならソース上後ろに書いた方が勝つ。!important は最強だが、保守性を下げるため緊急避難以外では避けるべき。

ボックスモデルは CSS の根本概念で、すべての要素は「content（中身）」「padding（内側余白）」「border（枠線）」「margin（外側余白）」という同心の箱として配置される。デフォルトは box-sizing: content-box で、width が content のみを指すが、現代では * { box-sizing: border-box; } を全体に適用し、border まで含めた値を width とする慣習が定着している。

主な用途

• Web ページのスタイリング — レイアウト、配色、フォント、アニメーション、トランジション
• レスポンシブデザイン — メディアクエリで PC / タブレット / モバイルそれぞれに最適化
• 印刷スタイル — @media print で印刷時の見た目を別途指定
• ダークモード — @media (prefers-color-scheme: dark) + CSS Variables で実装
• Web フォント — @font-face で外部フォントを読み込み
• UI フレームワーク — Bootstrap / Tailwind / Bulma などはすべて CSS をプリセットしたもの

関連形式との比較

形式	性質	用途	備考
CSS (.css)	ブラウザ標準	HTML のスタイル	そのまま読み込める
SCSS / Sass (.scss/.sass)	プリプロセッサ	変数・mixin・ネスト	ビルドで .css に変換
Less (.less)	プリプロセッサ	Sass と類似	Bootstrap 旧版で採用
CSS Modules	スコープ付き	React/Vue 等で衝突防止	クラス名を自動でユニーク化
Tailwind (utility CSS)	ユーティリティクラス	HTML 内にクラス羅列	CSS を書かずに済ませる思想
CSS-in-JS	JS 内に記述	コンポーネント単位	styled-components, Emotion 等

編集・パーサ・ツール

• エディタ — VS Code（IntelliSense + Emmet）、JetBrains 系、各種テキストエディタ
• DevTools — Chrome の「Styles」「Computed」パネルで適用ルールの優先順位とカスケードを可視化可能
• Lint — Stylelint が事実上の標準。SCSS や CSS-in-JS にも対応
• PostCSS — Autoprefixer（ベンダープレフィックス自動付与）/ cssnano（圧縮）等のプラグイン基盤
• 互換性確認 — caniuse.com、MDN の「Browser compatibility」表
• フレームワーク — Tailwind CSS / Bootstrap / Bulma / Open Props

注意点・落とし穴

• 特異度の戦い — !important を多用すると優先順位の制御が破綻する。CSS の設計（BEM、OOCSS、SMACSS など）で命名を整える方が結果的に楽
• margin の相殺 (collapsing) — 隣接する要素の margin-top と margin-bottom は大きい方に「相殺」される。Flexbox / Grid の中では起こらないため、現代ではあまり遭遇しないが古いコードでは要注意
• z-index の罠 — 親要素に position や transform が指定されるとスタッキングコンテキストが新規発生し、子の z-index は親の範囲内でしか効かない
• ベンダープレフィックス — -webkit- / -moz- 等は基本的に Autoprefixer に任せ、手書きしない
• レスポンシブの起点 — モバイルファースト（小→大に min-width で拡張）か、PC ファースト（大→小に max-width で縮小）かを決めてから書く
• カスタムプロパティとプリプロセッサ変数の混同 — SCSS の $var はコンパイル時、CSS の var(--x) は実行時に解決される。前者はランタイムで変更不可

関連リンク

• Web・データ・設定（親カテゴリ）
• ファイル拡張子とは
• HTML（.html / .htm） — 構造を担うペアのフォーマット
• XML（.xml） — XML にも CSS は適用可能（SVG 等）