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 断片化モジュール