CSS ガイド - CSS | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
View in English Always switch to English
このページでは、さまざまな CSS の概念やテクニックについて学ぶために利用できるガイドの一覧を表示しています。
ガイドはモジュールごとに整理されており、これは CSS 仕様書の構造を反映しています。各モジュールのランディングページ（例：CSS ボックスモデル）では、仕様の概要を提供し、そのモジュールが提供する機能（プロパティ、アットルール、データ型など）を一覧表示し、それらが CSS やウェブプラットフォームの他の部分とどのように関連しているかを示します。モジュールページを出発点として、関連するガイドを閲覧し、特定の機能に関するリファレンス文書をさらに深く掘り下げることができます。
CSS アニメーション (CSS animations) モジュールを使用すると、キーフレームを使用して、background-position や transform などの CSS プロパティの値を、時間に応じてアニメーションさせることができます。各キーフレームは、アニメーションシーケンスの指定された時間に、アニメーションする要素をどのようにレンダリングするかを記述します。アニメーションモジュールでは、アニメーションの再生時間、繰り返し回数、開始の遅延、その他のアニメーションの要素を制御するためのプロパティを使用することができます。
CSS アニメーショントリガーモジュールは、特定のタイムライントリガーが発生したときに、標準的な時間ベースの CSS アニメーションを起動する機能を提供します。
CSS アンカー位置指定 (CSS anchor positioning) モジュールでは、要素を互いに結びつける機能を定義しています。特定の要素がアンカー要素として定義され、アンカー位置指定要素は、結びつけられたアンカー要素のサイズと位置に基づいて、サイズと位置を設定することができます。
CSS イージング関数モジュールは、値の変換を制御する手段を提供するイージング関数を定義します。定義されている関数には、線形、3 次ベジェ、段階のイージング関数があります。これらのイージング関数は、アニメーションとトランジションに適用できます。
CSS インラインレイアウトモジュールは、インラインレベルのコンテンツのブロック軸配置とサイズを定義し、ドロップキャップ用の特別なレイアウトモードを追加します。 コンテナー内の要素とテキストの流れを複数行にわたって折り返すための CSS 整形モデルを記述しています。
CSS オーバースクロール動作モジュールは、スクロールコンテナーのスクロール位置がスクロール境界に達したときの挙動を制御するプロパティを提供します。この側面を制御することは、埋め込まれたスクロール可能な領域が親コンテナーのスクロールを発生させないようにするシナリオで具体的な有益なことです。
CSS オーバーフローモジュールのプロパティを使用すると、視覚メディアでスクロール可能なオーバーフローを処理することができます。
CSS カウンタースタイル (CSS Counter Styles) モジュールは、リスト内のマーカーや生成コンテンツ内のカウンターの外観を管理するための独自のカウンタースタイルを定義できます。同時に、ネイティブのブラウザーリストスタイルを独自のカスタマイズで拡張することも可能です。
CSS カスケードと継承 (CSS cascading and inheritance) モジュールは、カスケードと継承によってプロパティに値を割り当てるルールを定義します。このモジュールは、すべての要素のすべてのプロパティの指定値を探すルールを指定します。
CSS カスタム関数とミックスインモジュールにより、開発者が引数を受け取り、複雑なロジック（CSS の if() 関数や @media アットルールなどの機能で定義）を含み、そのロジックに基づいて値を返す、再利用可能な CSS コードブロックを生成できます。
CSS グリッドレイアウトモジュールは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。
CSS コンテナー (CSS Containment) モジュールでは、抑制とコンテナークエリーを定義しています。
CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。また、図形を使用して要素の浮動領域の形状を制御するために使用できる CSS プロパティも定義しています。この領域は、除外に適用したり、要素のコンテンツ領域を指定したりすることができます。
CSS シャドウパーツ (CSS shadow parts) モジュールは、シャドウホストに設定できる ::part() 擬似要素を定義します。この擬似要素を使用すると、シャドウホストが、スタイル設定のために、シャドウツリーで選択された要素を外部ページに公開できるようにすることができます。
CSS スクロールスナップ (CSS scroll snap) モジュールは、スナップ位置を定義することで、パンおよびスクロールの動作を制御するためのプロパティを提供します。ユーザーがスクロールコンテナー内のスクロール可能なコンテンツをスクロールすると、コンテンツは指定された位置にスナップされ、ページングおよびスクロール位置指定の機能を提供します。
CSS スクロールバースタイル設定 (CSS scrollbars styling) モジュールは、スクロールバーの視覚的なスタイル設定に使用できるプロパティを定義しています。必要に応じてスクロールバーの幅をカスタマイズできます。また、スクロールバーの背景であるスクロールバーのトラックの色、およびスクロールバーのドラッグ可能なハンドルであるスクロールバーのつまみの色もカスタマイズできます。
CSS スクロール固定モジュールは、ユーザーが可視コンテンツを利用している間、スクロールボックスの可視領域より上の DOM の変更によってページが動くことを防ぐ仕組みを定義します。
CSS スクロール駆動アニメーションモジュールは、CSS アニメーションモジュールとウェブアニメーション API の上に構築する機能を提供します。これは、デフォルトの時間ベースの文書タイムラインではなく、スクロールベースのタイムラインに沿ってプロパティ値をアニメーションできるようにします。つまり、時間の経過だけでなく、要素自体、そのスクロールコンテナー、またはそのルート要素をスクロールすることで要素をアニメーションできるということです。
CSS スコープモジュールは、シャドウ DOM のスコープ機構を中心に、 CSS のスコープとカプセル化の機構を定義します。
CSS セレクターモジュールは、要素を選択するパターンを定義し、一連の CSS ルールをその詳細度とともに適用します。 CSS セレクターモジュールには、 60 以上のセレクターと 5 つの結合子が用意されています。他のモジュールは、さらに擬似クラスセレクターと擬似要素が提供されています。
CSS テキスト (CSS text) モジュールは、改行、文字揃え、配置、ホワイトスペースの処理、テキスト変換などのテキスト操作の実行方法を定義します。
CSS テキスト装飾 (CSS text decoration) は、下線、テキストの影、圏点など、テキスト装飾に関連する機能を定義します。テキスト装飾機能は、スペルミス、文法上の課題、リンクに対して視覚的な手がかりを提供できます。これらの機能は、テキストの使いやすさ、アクセシビリティ、機能、美観の改善に役立ちます。
CSS トランジション (CSS transition) モジュールは、異なる CSS プロパティ値の間でなだらか遷移を作成する機能を規定します。これらのトランジションの挙動は、イージング関数、持続時間、その他の値を指定することで制御できます。
CSS ビューポートモジュールにより、ユーザーエージェントの初期包含ブロック、すなわちビューポートのサイズ、ズーム率、および方向を指定することができます。
CSS ビュー遷移モジュールは、ビュー遷移 API の動作を定義します。これにより、開発者は文書内の異なる状態間や文書間でアニメーションする遷移を作成することができます。このモジュールは、これらの遷移をスタイル設定するための CSS プロパティと擬似要素も定義します。
CSS フィルター効果 (CSS filter effects) モジュールのプロパティを使用すると、要素が文書に表示される前に、その要素のレンダリング処理方法を定義できます。このような効果の例としては、ぼかし処理や要素の色の濃淡変更などが挙げられます。
CSS フォントモジュールは、フォント関連のプロパティと、フォントリソースを読み込む方法を定義します。フォントファミリ、サイズ、太さなどのフォントのスタイル設定や、単一の文字に複数の字体が利用できる場合に使用する字体バリエーションを定義することができます。
CSS フォント読み込みモジュールは、フォントリソースを動的に読み込むために使用するイベントとインターフェイスを記述します。
CSS フレックスボックスレイアウト (CSS flexible box layout) は、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。
CSS プロパティと値 API (CSS properties and values API) モジュールは、モジュールは、新しい CSS プロパティを登録するための方法を定義し、プロパティのデータ型、継承動作、そしてオプションとして初期値を定義します。 この API は、 CSS 変数のカスケードのためのカスタムプロパティモジュールにおける、 CSS において二重ダッシュ構文 (--) を使用したカスタムプロパティが定義できる機能を拡張します。 CSS プロパティと値 API は API における CSS Houdini の傘下にあります。