CSS ボックスサイズ指定
CSS ボックスサイズ指定モジュールは、要素のサイズをどのようにコンテンツに合わせるか、または特定のレイアウトコンテキストに合わせるかを開発者が指定できるようにします。このモジュールでは、サイズ指定、最小サイズ指定、最大サイズ指定のプロパティを定義しており、コンテンツに基づく内在サイズとコンテキストに基づく外在サイズを表すキーワードで CSS サイズ指定のプロパティを拡張します。
要素は、外在的にも内在的にもサイズを設定することができます。CSS ボックスモデルは、要素の大きさを明示的に、つまり「外在的」に設定するためのページに相対的なプロパティ、たとえば width、height、padding、margin などのプロパティ(CSS 背景と境界モジュールで定義されている border プロパティも含む)を定義しています。この CSS ボックスサイズ指定モジュールは、CSS ボックスモデルモジュールを拡張し、コンテンツのサイズに基づいて要素のサイズを設定することで、要素を内在的にサイズ指定できるようにします。
このモジュールで導入されたサイズ指定値は、サイズ拘束を持つ要素が、内在サイズが何も指定されていないかのようにサイズ指定されるのではなく、そのフロー内コンテンツの幅と高さが指定された明示的な内在サイズと一致するように、明示的な内在サイズを取ることができるようになります。
このモジュールでは、要素のボックスのアスペクト比を定義する機能も導入されました。つまり、ブラウザーは指定されたアスペクト比を維持するために、いずれかの寸法が自動的にサイズ調整される限り、要素の寸法を自動的に調整することができます。
論理的プロパティと値モジュールは、ボックスモデルとボックスサイズ指定モジュールで利用可能なプロパティを拡張し、対応する物理ボックスモデルと内在ボックスサイズ指定プロパティの書字方向に相対的である等価なものを含むように拡張しています。
リファレンス
>プロパティ
- aspect-ratio
- box-sizing
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- height
- max-height
- max-width
- min-height
- min-width
- width
メモ:
CSS ボックスサイズ指定モジュールでは、まだ実装されていない min-intrinsic-sizing プロパティを導入しています。
データ型と値
- <ratio>データ型
- min-content値
- max-content値
- fit-content値
- fit-content()関数
メモ:
CSS ボックスサイズ指定モジュールでは、ボックスサイズ指定プロパティにまだ実装されていないサイズ指定値として、stretch と contain キーワードを導入しています。
関数
用語集の用語
ガイド
- アスペクト比を理解する
- 
aspect-ratioプロパティについて学び、置換要素と非置換要素のアスペクト比について議論し、一般的なアスペクト比の使用例を検討します。
- CSS ボックスモデルの紹介
- 
CSS の基本概念のひとつであるボックスモデルについての解説です。このモデルは、CSS が要素をどのようにレイアウトするかを定義するもので、コンテンツ、パディング、境界、マージン領域などが含まれます。 
- マージンの相殺をマスターする
- 
隣接する 2 つのマージンが 1 つに折りたたまれることがあります。この記事では、この現象がいつ、なぜ起こるのか、そしてどのように制御するのかについて説明します。 
- 視覚整形モデル
- 
視覚整形モデルを説明します。 
- 主軸方向のフレックスアイテムの比率の制御
- 
内在的なサイズ調整について、 flex-grow、flex-shrink、flex-basisを使用して主軸に沿ってフレックスアイテムのサイズと柔軟性を制御する方法を理解する前段階として説明します。
関連概念
- CSS 論理的プロパティモジュール
- min-inline-size
- block-size
- inline-size
- max-block-size
- max-inline-size
- min-block-size
- min-inline-size
- margin-block
- margin-inline
- padding-block
- padding-inline
- border-block
- border-inline
- contain-intrinsic-block-size
- contain-intrinsic-inline-size
- overflow-block
- overflow-inline
- overscroll-behavior-block
- overscroll-behavior-inline
 
- CSS ボックスモデルモジュール
- margin一括指定プロパティ
- margin-bottom
- margin-left
- margin-right
- margin-top
- margin-trim
- padding一括指定プロパティ
- padding-bottom
- padding-left
- padding-right
- padding-top
 
- CSS 背景と境界モジュール
- border一括指定プロパティ
- border-width一括指定プロパティ
- border-bottom-width
- border-left-width
- border-right-width
- border-top-width
 
- CSS オーバーフローモジュール
- CSS グリッドレイアウトモジュール
- CSS フレックスボックスレイアウトモジュール
仕様書
| Specification | 
|---|
| CSS Box Sizing Module Level 4> | 
| CSS Box Sizing Module Level 3> | 
関連情報
- CSS 表示モジュール
- CSS フレックスボックスレイアウトモジュール
- CSS グリッドレイアウトモジュール
- CSS 位置指定レイアウトモジュール
- CSS 断片化モジュール