Cascading Style Sheets CSS 1996-2026 (差別化: 既存Web規格史総合と異なりCSSのみ深掘り)。Hakon Wium Lie 1994提案 (CERN→W3C)+CSS Level 1 1996/12/17 (W3C・@media+!important+18 properties)・CSS Level 2 1998 +2.1 2011 (Float+Position+Z-index+Box Model)・CSS Level 3 Module化 (2007-Present・Selector Level 3+Color Module 3+Font Module 3)・CSS Variables Custom Properties 2016 (--var)・CSS Flexbox Layout Module 2017+Grid Layout Module 2017 (Rachel Andrew+Jen Simmons)・CSS Subgrid 2023 Firefox+Safari・CSS Container Queries 2022/9 Chrome 105+Safari 16+Firefox 110・CSS Cascade Layers @layer 2022・CSS :has() 2022/12+:where()+:is()・View Transitions API 2023 Chrome 111+・CSS Anchor Positioning 2024 Chrome 125+・CSS Nesting (Sass-like) 2023 Chrome 120+・CSS Print Module・CSS Houdini (Paint Worklet+Layout Worklet+Property Registration)・Sass+SCSS+Less+Stylus+PostCSS+Tailwind CSS 4.0 2025 (Lightning CSS Engine Rust)・¥0 標準、2026年Tailwind 4+Container Queries+Subgrid+:has()主流。
Cascading Style Sheets(CSS)は1996年12月17日にW3Cにより正式に公開され、以降Webデザインと開発の基盤を形成してきました。1994年にHakon Wium Lieが提案したアイデアを経て、CSS 1は18のプロパティと@media、!important、@import を備え、1998年にCSS 2が導入され、float、position、z-index、ボックスモデルの拡張が行われました。2007年以降はモジュール化が進み、CSS 3はセレクタ、カラー、フォントなどの各モジュールが独立して標準化され、2016年にカスタムプロパティ(変数)が正式に採用されました。2017年からはFlexboxとGrid Layoutが正式に追加され、2022年にContainer Queries、2023年にSubgrid、2024年にAnchor Positioning、2025年にTailwind 4.0、2026年にLightning CSS Engine(Rust)といった新機能が登場しています。
| 主要機能 | 版 | 主な変更点 | 代表的な実装 |
|---|---|---|---|
| CSS 1 | 1996 | 18プロパティ、@media、!important | すべての主要ブラウザ |
| CSS 2 | 1998 | float、position、z-index、ボックスモデル | IE 6〜Edge |
| CSS 2.1 | 2011 | 位置決めの統一、ボックスモデルの明確化 | IE 8〜Edge |
| CSS 3 Modules | 2007〜 | セレクタ、カラー、フォント、レイアウトなどをモジュール化 | Chrome 4〜 |
| カスタムプロパティ | 2016 | --var で変数定義 | Chrome 49〜 |
| Flexbox | 2017 | 一方向レイアウト、順序変更 | Chrome 29〜 |
| Grid Layout | 2017 | 二方向レイアウト、サブグリッド | Chrome 57〜 |
| Subgrid | 2023 | 子要素が親グリッドの行・列を継承 | Firefox 118、Safari 16 |
| Container Queries | 2022 | 要素サイズに応じたスタイル切替 | Chrome 105、Safari 16、Firefox 110 |
| Anchor Positioning | 2024 | 要素のアンカー位置を指定 | Chrome 125、Edge 125 |
| CSS Nesting | 2023 | Sass‑style の入れ子構文 | Chrome 120、Edge 120 |
| Houdini | 2023 | Paint Worklet、Layout Worklet、Property Registration | Chrome 104、Edge 104 |
| Tailwind 4.0 | 2025 | Lightning CSS Engine(Rust)で高速生成 | Tailwind 4.0、PostCSS 10 |
| Lightning CSS Engine | 2026 | Rust ベースの高速 CSS パーサー | Tailwind 4+、Sass 1.70 |
| 製品名 | 型番 | 対応CSSバージョン | 主要機能 | 仕様ポイント |
|---|---|---|---|---|
| Google Chrome | 125 | CSS 3 + Container Queries + Subgrid | Flexbox, Grid, Houdini | 1 TB RAM, 4 GHz CPU |
| Mozilla Firefox | 110 | CSS 3 + Subgrid | Grid, Flexbox, Houdini | 8 GB RAM, 3.2 GHz CPU |
| Apple Safari | 16 | CSS 3 + Container Queries | Flexbox, Grid | 4 GB RAM, 2.5 GHz CPU |
| Microsoft Edge | 125 | CSS 3 + Container Queries | Flexbox, Grid, Houdini | 8 GB RAM, 3.0 GHz CPU |
プロジェクトの規模とメンテナンス性
ブラウザ互換性
パフォーマンス
セキュリティ
Q1: Tailwind 4.0 は既存の CSS 3 プロジェクトに導入できますか?
A1: はい。Tailwind 4.0 は既存の CSS をそのまま使用しつつ、ユーティリティクラスを追加で生成します。PostCSS との統合により、既存のスタイルシートと共存可能です。
Q2: Subgrid はすべてのブラウザでサポートされていますか?
A2: 現時点(2026年)では Firefox 118 以降と Safari 16 以降でサポート。Chrome ではまだ実装段階で、Edge は Chrome と同じ Chromium ベースのため同様に未サポートです。
Q3: CSS Nesting を使うとパフォーマンスに影響しますか?
A3: 逆に、入れ子構造を明示的に記述することでセレクタの重複を減らし、パースコストを低減します。ただし、深い入れ子は逆に複雑さを増すため、適度に利用することが推奨されます。
1996年に初登場した CSS は、モジュール化と機能拡張を重ねながら、Web の表現力を劇的に向上させてきました。2025–2026年においては、Tailwind 4.0 の Lightning CSS Engine や Rust ベースの Lightning CSS Engine の登場により、ビルド時間と実行時のパフォーマンスが大幅に改善。Container Queries、Subgrid、Anchor Positioning などの新機能は、レスポンシブデザインとレイアウト設計をさらに柔軟にし、開発者はより高速かつ保守性の高いスタイルを実現できるようになっています。今後は、Houdini の拡張や新しいレイアウトモジュールの追加が期待され、CSS は Web 技術の中核を担い続けるでしょう。
| Opera |
| 120 |
| CSS 3 + Subgrid |
| Flexbox, Grid |
| 4 GB RAM, 2.8 GHz CPU |
| Tailwind CSS | 4.0 | CSS 3 + Container Queries | Utility‑first, Lightning Engine | 2 GB RAM, 1.5 GHz CPU |
| Sass | 1.70 | CSS 3 + Nesting | SCSS, Dart‑Sass | 4 GB RAM, 2.0 GHz CPU |
| Less | 4.2 | CSS 3 | Less, JavaScript API | 4 GB RAM, 2.0 GHz CPU |
| Stylus | 3.0 | CSS 3 | Stylus, Node.js | 4 GB RAM, 2.0 GHz CPU |
| PostCSS | 10.0 | CSS 3 | Plugin‑based, Lightning Engine | 4 GB RAM, 2.0 GHz CPU |