CSS ガイド

このページでは、さまざまな CSS の概念やテクニックについて学ぶために利用できるガイドの一覧を表示しています。

ガイドはモジュールごとに整理されており、これは CSS 仕様書の構造を反映しています。各モジュールのランディングページ（例：CSS ボックスモデル）では、仕様の概要を提供し、そのモジュールが提供する機能（プロパティ、アットルール、データ型など）を一覧表示し、それらが CSS やウェブプラットフォームの他の部分とどのように関連しているかを示します。モジュールページを出発点として、関連するガイドを閲覧し、特定の機能に関するリファレンス文書をさらに深く掘り下げることができます。

CSS アニメーション

CSS アニメーション (CSS animations) モジュールを使用すると、キーフレームを使用して、background-position や transform などの CSS プロパティの値を、時間に応じてアニメーションさせることができます。各キーフレームは、アニメーションシーケンスの指定された時間に、アニメーションする要素をどのようにレンダリングするかを記述します。アニメーションモジュールでは、アニメーションの再生時間、繰り返し回数、開始の遅延、その他のアニメーションの要素を制御するためのプロパティを使用することができます。

CSS アンカー位置指定

CSS アンカー位置指定 (CSS anchor positioning) モジュールでは、要素を互いに結びつける機能を定義しています。特定の要素がアンカー要素として定義され、アンカー位置指定要素は、結びつけられたアンカー要素のサイズと位置に基づいて、サイズと位置を設定することができます。

CSS イージング関数

CSS イージング関数モジュールは、値の変換を制御する手段を提供するイージング関数を定義します。定義されている関数には、線形、3 次ベジェ、段階のイージング関数があります。これらのイージング関数は、アニメーションとトランジションに適用できます。

CSS インラインレイアウト

CSS インラインレイアウトモジュールは、インラインレベルのコンテンツのブロック軸配置とサイズを定義し、ドロップキャップ用の特別なレイアウトモードを追加します。 コンテナー内の要素とテキストの流れを複数行にわたって折り返すための CSS 整形モデルを記述しています。

CSS オーバースクロール動作

CSS オーバースクロール動作モジュールは、スクロールコンテナーのスクロール位置がスクロール境界に達したときの挙動を制御するプロパティを提供します。この側面を制御することは、埋め込まれたスクロール可能な領域が親コンテナーのスクロールを発生させないようにするシナリオで具体的な有益なことです。

CSS オーバーフロー

CSS オーバーフローモジュールのプロパティを使用すると、視覚メディアでスクロール可能なオーバーフローを処理することができます。

CSS カウンタースタイル

CSS カウンタースタイル (CSS Counter Styles) モジュールは、リスト内のマーカーや生成コンテンツ内のカウンターの外観を管理するための独自のカウンタースタイルを定義できます。同時に、ネイティブのブラウザーリストスタイルを独自のカスタマイズで拡張することも可能です。

CSS カスケードと継承

CSS カスケードと継承 (CSS cascading and inheritance) モジュールは、カスケードと継承によってプロパティに値を割り当てるルールを定義します。このモジュールは、すべての要素のすべてのプロパティの指定値を探すルールを指定します。

CSS カスタム関数とミックスイン

CSS カスタム関数とミックスインモジュールにより、開発者が引数を受け取り、複雑なロジック（CSS の if() 関数や @media アットルールなどの機能で定義）を含み、そのロジックに基づいて値を返す、再利用可能な CSS コードブロックを生成できます。

CSS グリッドレイアウト

CSS グリッドレイアウトモジュールは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。

CSS コンテナー

CSS コンテナー (CSS Containment) モジュールでは、抑制とコンテナークエリーを定義しています。

CSS シェイプ

CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。また、図形を使用して要素の浮動領域の形状を制御するために使用できる CSS プロパティも定義しています。この領域は、除外に適用したり、要素のコンテンツ領域を指定したりすることができます。

CSS シャドウパーツ

CSS シャドウパーツ (CSS shadow parts) モジュールは、シャドウホストに設定できる ::part() 擬似要素を定義します。この擬似要素を使用すると、シャドウホストが、スタイル設定のために、シャドウツリーで選択された要素を外部ページに公開できるようにすることができます。

CSS スクロールスナップ

CSS スクロールスナップ (CSS scroll snap) モジュールは、スナップ位置を定義することで、パンおよびスクロールの動作を制御するためのプロパティを提供します。ユーザーがスクロールコンテナー内のスクロール可能なコンテンツをスクロールすると、コンテンツは指定された位置にスナップされ、ページングおよびスクロール位置指定の機能を提供します。

CSS スクロールバースタイル設定

CSS スクロールバースタイル設定 (CSS scrollbars styling) モジュールは、スクロールバーの視覚的なスタイル設定に使用できるプロパティを定義しています。必要に応じてスクロールバーの幅をカスタマイズできます。また、スクロールバーの背景であるスクロールバーのトラックの色、およびスクロールバーのドラッグ可能なハンドルであるスクロールバーのつまみの色もカスタマイズできます。

CSS スクロール固定

CSS スクロール固定モジュールは、ユーザーが可視コンテンツを利用している間、スクロールボックスの可視領域より上の DOM の変更によってページが動くことを防ぐ仕組みを定義します。

CSS スクロール駆動アニメーション

CSS スクロール駆動アニメーションモジュールは、CSS アニメーションモジュールとウェブアニメーション API の上に構築する機能を提供します。これは、デフォルトの時間ベースの文書タイムラインではなく、スクロールベースのタイムラインに沿ってプロパティ値をアニメーションできるようにします。つまり、時間の経過だけでなく、要素自体、そのスクロールコンテナー、またはそのルート要素をスクロールすることで要素をアニメーションできるということです。

CSS スコープ

CSS スコープモジュールは、シャドウ DOM のスコープ機構を中心に、 CSS のスコープとカプセル化の機構を定義します。

CSS セレクター

CSS セレクターモジュールは、要素を選択するパターンを定義し、一連の CSS ルールをその詳細度とともに適用します。 CSS セレクターモジュールには、 60 以上のセレクターと 5 つの結合子が用意されています。他のモジュールは、さらに擬似クラスセレクターと擬似要素が提供されています。

CSS テキスト

CSS テキスト (CSS text) モジュールは、改行、文字揃え、配置、ホワイトスペースの処理、テキスト変換などのテキスト操作の実行方法を定義します。

CSS テキスト装飾

CSS テキスト装飾 (CSS text decoration) は、下線、テキストの影、圏点など、テキスト装飾に関連する機能を定義します。テキスト装飾機能は、スペルミス、文法上の課題、リンクに対して視覚的な手がかりを提供できます。これらの機能は、テキストの使いやすさ、アクセシビリティ、機能、美観の改善に役立ちます。

CSS トランジション

CSS トランジション (CSS transition) モジュールは、異なる CSS プロパティ値の間でなだらか遷移を作成する機能を規定します。これらのトランジションの挙動は、イージング関数、持続時間、その他の値を指定することで制御できます。

CSS ビューポート

CSS ビューポートモジュールにより、ユーザーエージェントの初期包含ブロック、すなわちビューポートのサイズ、ズーム率、および方向を指定することができます。

CSS ビュー遷移

CSS ビュー遷移モジュールは、ビュー遷移 API の動作を定義します。これにより、開発者は文書内の異なる状態間や文書間でアニメーションする遷移を作成することができます。このモジュールは、これらの遷移をスタイル設定するための CSS プロパティと擬似要素も定義します。

CSS フィルター効果

CSS フィルター効果 (CSS filter effects) モジュールのプロパティを使用すると、要素が文書に表示される前に、その要素のレンダリング処理方法を定義できます。このような効果の例としては、ぼかし処理や要素の色の濃淡変更などが挙げられます。

CSS フォント

CSS フォントモジュールは、フォント関連のプロパティと、フォントリソースを読み込む方法を定義します。フォントファミリ、サイズ、太さなどのフォントのスタイル設定や、単一の文字に複数の字体が利用できる場合に使用する字体バリエーションを定義することができます。

CSS フォント読み込み

CSS フォント読み込みモジュールは、フォントリソースを動的に読み込むために使用するイベントとインターフェイスを記述します。

CSS フレックスボックスレイアウト

CSS フレックスボックスレイアウト (CSS flexible box layout) は、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。

CSS プロパティと値 API

CSS プロパティと値 API (CSS properties and values API) モジュールは、モジュールは、新しい CSS プロパティを登録するための方法を定義し、プロパティのデータ型、継承動作、そしてオプションとして初期値を定義します。 この API は、 CSS 変数のカスケードのためのカスタムプロパティモジュールにおける、 CSS において二重ダッシュ構文 (--) を使用したカスタムプロパティが定義できる機能を拡張します。 CSS プロパティと値 API は API における CSS Houdini の傘下にあります。

CSS ページメディア

CSS ページメディアモジュールは、印刷や、コンテンツを離散的なページに分割するその他のメディアでのコンテンツの表示を制御するプロパティを定義します。これにより、改ページの設定、印刷可能領域の制御、左右のページの外観の別々の設定、要素内の改行の制御を行うことができます。

CSS ボックスサイズ指定

CSS ボックスサイズ指定モジュールは、要素のサイズをどのようにコンテンツに合わせるか、または特定のレイアウトコンテキストに合わせるかを指定できるようにします。このモジュールでは、サイズ指定、最小サイズ指定、最大サイズ指定のプロパティを定義しており、コンテンツに基づく内在サイズとコンテキストに基づく外因的なサイズを表すキーワードで CSS サイズ指定のプロパティを拡張します。

CSS ボックスモデル

CSS ボックスモデル (CSS box model) モジュールはマージン (margin) とパディング (padding) のプロパティを定義し、それが高さ、幅、境界のプロパティとともに、 CSS のボックスモデルを構成します。

CSS ボックス配置

CSS ボックス配置 (CSS box alignment) モジュールは、コンテナー内のボックスの配置に関する CSS 機能を指定します。ブロックレイアウト、表レイアウト、フレキシブルボックスレイアウト （フレックスボックス）、グリッドレイアウトなど、さまざまな CSS ボックスレイアウトモデルにおける配置を定義し、 CSS 全体で一貫した配置方法を作成します。

CSS マスク

CSS マスクモジュールは、視覚的要素の一部または全体を非表示にするために使用される 2 つの異なるグラフィック操作、マスクとクリップを定義します。

CSS メディアクエリー

CSS メディアクエリーモジュールにより、ビューポートの値やブラウザーや端末の機能を検査および問い合わせして、現在のユーザー環境に応じて CSS スタイルを条件付きで適用することができます。メディアクエリーは、 CSS の @media ルールや、 HTML や JavaScript などの他のコンテキストや言語で使用されます。

CSS モーションパス

CSS モーションパス (CSS motion path) モジュールは、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。

CSS リストとカウンター

CSS リストとカウンター (CSS lists and counters) モジュールにより、リストアイテムの箇条書き記号のスタイルや位置を指定したり、文字列、カウンターなどのの組み合わせによる値を操作したりすることができます。

CSS ルビレイアウト

CSS ルビレイアウト (CSS ruby layout) モジュールは、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の注釈の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。

CSS 位置指定レイアウト

CSS 位置指定レイアウト (CSS positioned layout) モジュールは、CSS で利用できる座標ベースの位置指定およびオフセット方式、ならびにウェブページ上で要素を位置指定し重ね合わせるために使用されるプロパティを定義します。このモジュールは、相対位置指定、粘着位置指定、絶対位置指定、固定位置指定といった基本的な位置指定方法を定義することで最もよく知られています。また、位置指定された要素の描画方法と重ね合わせ方についても定義し、重ね合わせの動作と視覚的な順序を明確にします。

CSS 値と単位

CSS 宣言はすべて、プロパティと値のペアから成っています。値には、単一のキーワード、整数、関数、異なる型の組み合わせなど、プロパティに応じてさまざまなデータ型を含めることがあります。また、値には単位を持つものもあれば、持たないものもあります。すべてのプロパティは、CSS 全体で有効な値も受け入れます。CSS 値と単位モジュールでは、CSS プロパティが受け入れる値と単位というデータの型を定義しています。このモジュールでは、CSS プロパティと関数に対して有効な値の設定するには、CSS 値定義構文、つまり形式文法を定義します。

CSS 入れ子

CSS 入れ子 (CSS nesting) モジュールは、セレクターを入れ子にする構文を定義し、親ルールのセレクターに対して子ルールのセレクターを相対的に指定することで、あるスタイルルールを別のスタイルルールの中に入れ子にする機能を提供します。

CSS 合成と混合

CSS 合成と混合 (compositing and blending) モジュールは、要素の背景レイヤーをどのように互いに合成するか、どのように要素をコンテナーと合成するか、要素が新しい重ね合わせコンテキストを生成する必要があるかどうかを定義します。

CSS 名前空間

CSS 名前空間 (CSS namespaces) は、 CSS で名前空間を使用するための構文を定義します。

CSS 基本ユーザーインターフェイス

CSS 基本ユーザーインターフェイス (CSS basic user interface) モジュールでは、輪郭線プロパティ、ポインティングデバイスやキーボードの視覚的フィードバック、 UI ウィジェットの既定の外見の変更など、ユーザーインターフェイス関連の機能のレンダリングや機能を定義することができます。

CSS 境界とボックス装飾

CSS 境界とボックス装飾 (CSS borders and box decorations) モジュールは、要素に境界線、角の形状、ボックスシャドウを追加するためのプロパティを提供します。このモジュールは、CSS 背景と境界モジュールで導入された境界とボックス装飾を拡張し、corner-shape および border-shape プロパティ、論理的な border-radius プロパティ、box-shadow プロパティの個別指定プロパティ、部分的な境界線を作成するためのプロパティを追加します。

CSS 座標変換

CSS 座標変換 (CSS transforms) は、CSS でスタイル設定された要素を 2 次元または 3 次元空間に座標変換する方法を定義します。

CSS 擬似要素

CSS 擬似要素モジュールは、文書ツリー内には直接存在しない抽象要素を定義します。擬似要素と呼ばれるこれらの抽象要素は、レンダーツリーの一部を表し、選択したりスタイル設定したりすることができます。擬似要素は、文書ツリーによって指定された以上の文書ツリーに関する抽象化をするために使用します。

CSS 断片化

CSS 断片化 (CSS fragmentation) モジュールは、コンテンツが複数のページ、領域、段をまたがって分割された（断片化された）ときにどのように表示するかを定義します。このモジュールは、ページネーション、可変の断片サイズや方向の分割、未行および孤立行に関する機能を定義しています。

CSS 書字方向

CSS 書字方向 (CSS writing modes) モジュールは、様々な国際的な書字方向とその組み合わせに対する対応を定義します。例えば、テキスト順序の左書き、右書きや、横書き、縦書きの方向などが含まれます。

CSS 条件付きルール

CSS 条件付きルール (CSS conditional rules) モジュールは、CSS のメディアクエリーと機能クエリーを定義し、特定の条件が満たされた場合にのみ適用されるスタイルを定義できるようにします。このモジュールで定義される条件付きルールは、端末、ユーザーエージェント、ビューポートなどの能力に基づいています。条件付きルールを使用すると、レンダリングされる文書とは無関係に、クエリー値やブラウザーおよび端末の機能に基づいて、 CSS スタイルをターゲットに指定することができます。

CSS 構文

CSS 構文モジュールは、一般的な用語として、カスケーディングスタイルシート (CSS) の構造と構文について記述しています。 CSS は、ウェブや他の場所での構造化文書（HTML や XML など）のレンダリングを記述するための言語として定義されています。

CSS 段組みレイアウト

CSS 段組みレイアウト (CSS multi-column layout) モジュールを使用すると、コンテンツを複数の段に分割することができます。このモジュールのプロパティを使用すると、段の推奨数と幅、段間の間隔、およびオプションで段の分割線（段間罫と呼ばれる）の外観を定義することができます。また、コンテンツが段から段へどのように流れるか、および段間でコンテンツをどのように分割するかを定義することもできます。

CSS 環境変数

CSS 環境変数 (CSS environment variables) モジュールは、環境変数の概念と env 関数を定義します。環境変数は、カスタムプロパティ や var 関数と同様に機能しますが、グローバルに定義される点が異なります。これらは文書全体にスコープを持つグローバル変数です。これらはブラウザーやオペレーティングシステムによって提供されるユーザーエージェント値であり、env 関数を使用してアクセスできます。これにより、ユーザーの端末やコンテキストに合わせてスタイルを適応させることが可能になります。

CSS 生成コンテンツ

CSS 生成コンテンツ (CSS generated content) モジュールは、 CSS により要素のコンテンツを置き換えたり、コンテンツを文書に追加したりする方法を定義します。

CSS 画像

CSS 画像 (CSS images) モジュールは、画像に利用できる型（image 型、その中の URL、グラデーション、その他の種類の画像）、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。

CSS 背景と境界

CSS 背景と境界モジュールでは、背景、境界、角の丸め、ボックスシャドウを要素に追加します。

CSS 色

CSS 色 (CSS colors) モジュールは、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱います。

CSS 色調整

CSS 色調整モジュールは、モデルを提供し、「ダークモード」、コントラスト調整、その他の配色設定などのユーザーの環境設定を処理するために、ユーザーエージェントによる自動色調整を制御します。

CSS 表

CSS 表 (CSS table) モジュールは、表データをレイアウトする方法を定義するのに役立ちます。

CSS 表示方法

CSS 表示方法 (CSS display) モジュールは、 CSS の整形ボックスツリーがどのように文書の要素ツリーから生成されるかを定義し、制御するプロパティを定義します。

CSS 論理的プロパティと値

CSS 論理的プロパティと値 (CSS logical properties and values) モジュールは、物理的ではなく論理的に方向やサイズを対応付けて、レイアウトを制御することができるようにします。論理的プロパティは、対応する物理的プロパティに対する書字方向に関連した同等のものを定義します。

CSSOM ビュー

CSSOM ビューモジュールでは、文書内の視覚的な表示を操作することができます。要素のレイアウトボックスの位置の取得、スクリプトからのビューポートの幅や高さの取得、要素のスクロールなどがあります。

カスケード変数のための CSS カスタムプロパティ

カスケード変数のための CSS カスタムプロパティモジュールは、CSS プロパティにカスケード変数の対応を追加し、カスタム変数を定義するためのカスタムプロパティを作成し、カスタムプロパティを他にも CSS プロパティの値として使用することができます。