CSS Notes
Search articles
Translation Not Available
This page has not been translated yet. You are viewing the Japanese version.

CSSの歴史とCSS Level(レベル)の遷移について

CSS3だとかって一体何？今自分が使っているCSSはどれ？という疑問を持つ方も多いのではないでしょうか。

この記事では、CSS（Cascading Style Sheets）の歴史と現在の仕様策定の仕組みについて解説します。

CSSの進化を理解することで、普段なんとなく使っていたCSSの記述がより身近に感じられるようになります。また、信頼できるドキュメントを探しやすくなるでしょう。

この記事は、2019年に公開していた個人ブログの記事を Opus 4.5 に編集してもらったものになります。

CSSとは

Cascading Style Sheets（カスケーディング・スタイル・シート）の略称です。

HTMLやXMLの要素をどのように装飾するかを指示するための仕様で、文書の構造（HTML）と体裁（CSS）を分離させるという理念のもとに策定されました。

1994年にCERN（欧州原子核研究機構）に勤務していたホーコン・ウィウム・リー氏により提唱されました。

W3Cと勧告プロセスについて

CSSの仕様書はW3C（World Wide Web Consortium）によって公開されています。

W3Cの仕様書には「勧告プロセス」と呼ばれる段階があり、この記事でも「勧告」という言葉が頻繁に登場します。

主な勧告プロセスの段階

段階英語名説明
草案Working Draft (WD)初期段階の文書。コミュニティレビュー用に公開される
勧告候補Candidate Recommendation (CR)技術要件を満たし、広範なレビューを受けた文書。実装経験を集める段階
勧告Recommendation (REC)W3Cとそのメンバーの承認を得た最終仕様。Web標準として広く展開が推奨される

※ 2025年にW3Cのプロセスが更新され、以前存在した「勧告案（Proposed Recommendation）」段階は廃止されました。

CSSのLevel遷移の歴史

CSSの仕様は「Level（レベル）」という段階を持っています。「バージョン」と表現されることもありますが、正式には「Level」です。

例えば、CSS1 というのは「CSSのバージョン1」ではなく、「Cascading Style Sheets, level 1」の略称です。

CSS1（1996年）

CSSの初期段階で、1996年12月に勧告されました。

参考資料：Cascading Style Sheets, level 1

CSS1では、フォント、色、背景、テキスト、ボックス（margin/padding/border）、display、float など、現在でも基本となるプロパティの多くが実装されました。セレクタは要素・クラス・ID・子孫セレクタに対応し、@import や !important もこの時点で存在していました。

CSS2 / CSS2.1（1998年〜2011年）

CSS1の上位互換として、1998年5月にCSS2が勧告されました。

表示媒体によって自動的にスタイルシートを変更できるようにし、音声ブラウザや印刷媒体への対応が大きな変更点でした。

しかし、CSS2仕様書の定義が不明瞭だったため、各ブラウザのCSS2実装に非互換が生じてしまいました。

そこで、曖昧な記述を明確にする改訂が行われ、2011年6月にCSS2.1が勧告されました。CSS2で策定されていながら実装が進まなかったものや、display: run-in のようにブラウザ間で相互運用性を確保できなかった機能は削除されています。

現在でもCSS2.1がCSSのコア（中核）仕様として位置づけられていますが、多くの部分が新しいモジュールによって拡張・上書きされています。

参考資料：Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS2/2.1では、position による配置、@media 規則、子セレクタ（>）・隣接セレクタ（+）・属性セレクタ、:hover や ::before/::after などの擬似クラス・擬似要素、z-index、overflow、visibility などが追加されました。

CSS3（モジュール形式への移行）

CSS3からは、CSS 2.1を中核として新たな機能の追加や改良をモジュールと呼ばれる小さなコンポーネントに分割して策定しています。

つまり、「CSS3」という単一の仕様書が存在するわけではありません。それぞれのモジュールが独立して勧告に向けて規格策定されており、新しいモジュールも随時追加されています。

CSS3で追加された機能とそのモジュールの例

CSS3で追加された機能がどのモジュールに分類されているのか、いくつか例を挙げてみます。

機能モジュール状態（2025年時点）
アニメーションCSS Animations Level 1勧告候補（CR）
変形（transform）CSS Transforms Module Level 1勧告候補（CR）
フレックスボックスCSS Flexible Box Layout Module Level 1勧告候補（CR）
グラデーションCSS Images Module Level 3勧告候補（CR）
色（透明度含む）CSS Color Module Level 3勧告（REC）
グリッドレイアウトCSS Grid Layout Module Level 1勧告候補（CR）

いずれも「CSS3で追加された新機能」としてよく紹介されますが、実はそれぞれ別のモジュールで管理されており、勧告プロセスの進み具合もモジュールごとに異なります。

CSS4は存在しない

「CSS4」という単一の仕様は存在しません。

CSS3以降はモジュール形式で策定が進められているため、各モジュールが独自にLevel 4、Level 5と進化しています。

便宜上「CSS4」と呼ばれることもありますが、これは各モジュールのLevel 4の総称として使われているだけです。

Level 4以降のモジュールの例

2024年〜2025年にかけて、多くのモジュールがLevel 4やLevel 5に進んでいます。

モジュール状態
CSS Selectors Level 4草案（WD）
CSS Color Module Level 4勧告候補（CR）
CSS Display Module Level 4草案（WD）
CSS Text Module Level 4草案（WD）
CSS Values and Units Module Level 5草案（WD）
CSS Fonts Module Level 5草案（WD）

近年の主要なCSS機能

2022年以降、モダンブラウザで広くサポートされるようになった主要なCSS機能を紹介します。

Container Queries（コンテナクエリ）

要素のサイズに基づいてスタイルを変更できる機能です。ビューポートではなく、親要素のサイズを基準にできます。

.card-container {
  container-type: inline-size;
}


@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

:has() セレクタ

「親セレクタ」として機能する擬似クラスです。子孫の状態に基づいて親要素をスタイリングできます。

/* チェックされたチェックボックスを持つラベルのスタイル */
label:has(input:checked) {
  background-color: lightblue;
}

Cascade Layers（カスケードレイヤー）

@layer を使って、スタイルシートの優先順位を明示的に制御できます。

@layer base, components, utilities;


@layer base {
  a { color: blue; }
}


@layer utilities {
  .text-red { color: red; }
}

Subgrid

CSS Grid Level 2で追加された機能で、子グリッドが親グリッドのトラックを継承できます。

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}


.child {
  display: grid;
  grid-template-columns: subgrid;
}

これらの機能は、Chrome、Edge、Safari、Firefoxの主要ブラウザで広くサポートされています。

CSS Snapshot について

W3Cは毎年「CSS Snapshot」という文書を公開しています。これは、その時点でのCSSの安定した仕様をまとめたものです。

最新版は CSS Snapshot 2025（2025年9月公開）です。

CSS Snapshotは主にCSSの実装者向けですが、「現在のCSSとは何か」を理解するのに役立ちます。安定した仕様と実験的な仕様を区別するのに便利です。

CSSの技術文書を調べる方法

W3Cが公開している技術文書はW3C Technical Reportsで検索できます。

CSSに関する技術文書を調べるための主要なリソースは以下の通りです。

リソース説明
CSS current work各モジュールの勧告プロセスの進捗一覧
Descriptions of all CSS specifications各モジュールの詳細情報一覧
CSS Working Group Editor Drafts最新の Editor’s Draft 一覧
CSS Working Group BlogCSS WGの最新情報

ブラウザ対応状況の調べ方

CSSの仕様策定はW3Cがモジュールごとに進めていますが、実際の各プロパティの実装はブラウザごとに異なります。

「どのプロパティが現在どのブラウザに対応しているのか」を調べるには、Can I Use… が便利です。

CSSの新しい技術を試す際は、以下の流れを意識してみてください。

  1. 仕様の確認：該当モジュールの技術文書を参照
  2. ブラウザ対応の確認：Can I Use でサポート状況をチェック
  3. フォールバックの検討：@supports を使った機能検出
/* 機能検出の例 */
@supports (container-type: inline-size) {
  /* Container Queries をサポートするブラウザ用のスタイル */
}

まとめ

  • CSS1（1996年）：CSSの始まり
  • CSS2/2.1（1998年〜2011年）：現在の基本仕様
  • CSS3以降：モジュール形式で個別に策定
  • CSS4は存在しない：各モジュールがLevel 4、5と進化

CSSは「CSS3で完成」したわけではなく、現在も各モジュールが独立して進化を続けています。最新の機能を把握するには、CSS Snapshotや各モジュールの仕様書を参照するのが確実です。

Contents