多くの場合、いくつかの欄を含むレイアウトを作成する必要があります。 CSS にはこれを行うためのいくつかの方法があります。 グリッド、フレックスボックス、段組みのレイアウトのどれを使用するかは、達成しようとしている内容によって異なります。 このレシピでは、これらのオプションについて説明します。

コンテナ内に2つの欄を持つ3種類のレイアウトスタイル。

必要条件

欄(columns)で達成したいと思うかもしれないデザインパターンがいくつかあります。

  • 新聞のような欄(段)に分割されたコンテンツの連続したスレッド。
  • すべての高さが等しい、欄(列)として配置された一並びの項目。
  • 行と列で並べられた複数行の列。

レシピ

要件を満たすためには、さまざまなレイアウト方法を選択する必要があります。

コンテンツの連続したスレッド — 段組みレイアウト

段組みレイアウト(multi-column layout、multicol)を使用して段を作成した場合、テキストは各段を順番に埋める連続したストリームのままです。 段はすべて同じサイズである必要があり、個々の段または個々の段のコンテンツをターゲットにすることはできません。

column-gap プロパティを使用して段間のギャップを制御したり、column-rule を使用して段間に線を追加したりできます。

次の場合に段組みを使用してください。

  • テキストを新聞のような段に表示したい。
  • 段に分割したい小さい項目のセットを持っている。
  • 個々の欄ボックスを装飾のターゲットにする必要がない。

同じ高さの単一行の項目 — フレックスボックス

フレックスボックス(flexbox)は、flex-directionrow に設定することでコンテンツを列に分割するために使用できますが、フレックスボックスはフレックスコンテナ内の要素をターゲットにし、それぞれの直接の子を新しい列に配置します。 これは段組みで見たものとは異なる振る舞いです。

フレックス項目間に規則を追加する方法は現在ありません。 また、column-gap および row-gap プロパティに対するブラウザーのサポートは制限されています。 したがって、項目間にギャップを作成するには、マージンを使用します。

フレックスボックスを使用して、コンテナの flex-wrap プロパティを wrap に設定することで、フレックス項目が新しい行に折り返されるレイアウトを作成することもできます。 これらの新しいフレックスラインは、そのラインに沿ってのみスペースを配分します — 以下の例に示すように、新しいラインの項目は上のラインの項目と整列しません。 これがフレックスボックスが一次元として記述されている理由です。 これは、行または列としてレイアウトを制御するために設計されていますが、同時に両方ではありません。

次の場合にフレックスボックスを使用してください。

  • 単一行または単一列の項目。
  • 項目をレイアウトした後に交差軸(cross axis)上で整列をしたいとき。
  • ラップされた項目がそれらのラインに沿ってだけスペースを共有し、他のラインの項目と並ばないことに満足しているとき。

項目を行と列に並べる — グリッドレイアウト

欲しいものが項目が行と列に並ぶレイアウトであるならば、CSS グリッドレイアウトを選ぶべきです。 グリッドレイアウトは、フレックスボックスがフレックスコンテナの直接の子に作用するのと同様の方法で、グリッドコンテナの直接の子に作用しますが、CSS グリッドでは、項目を行と列に並べることができます — これは2次元として記述されています。

次の場合にグリッドを使用してください。

  • 複数行または複数列の項目用。
  • ブロック軸とインライン軸の項目を揃えることができるようにする場合。
  • 項目を行と列に整列させたい場合。

ブラウザー実装状況

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

column-width

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
column-widthChrome 完全対応 50
完全対応 50
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 50
完全対応 50
完全対応 1.5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 10Opera 完全対応 11.1Safari 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 ありChrome Android 完全対応 50
完全対応 50
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 50
完全対応 50
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0
完全対応 5.0
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Intrinsic sizes
実験的
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
On display: table-captionChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 37IE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 50Edge Mobile 完全対応 12Firefox Android 完全対応 37Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

column-rule

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
column-ruleChrome 完全対応 50
完全対応 50
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 52
完全対応 52
完全対応 3.5
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Before Firefox 3, the default value for the normal keyword was 0 and not 1em.
IE 完全対応 10Opera 完全対応 11.1
完全対応 11.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 ありChrome Android 完全対応 50
完全対応 50
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile ? Firefox Android 完全対応 52
完全対応 52
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
完全対応 5.0
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

flex

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
flexChrome 完全対応 29
完全対応 29
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 20
補足
完全対応 20
補足
補足 Since Firefox 28, multi-line flexbox is supported.
補足 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
補足 Until Firefox 61, flex items that are sized according to their content are sized using fit-content, not max-content.
未対応 18 — 28
無効
無効 From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 Internet Explorer 11 ignores uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.
補足 Internet Explorer 11 considers a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.
完全対応 10
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Internet Explorer 10 and 11 ignore uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.
補足 Internet Explorer 10 and 11 consider a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.
Opera 完全対応 12.1Safari 完全対応 9
完全対応 9
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 29
完全対応 29
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 20
補足
完全対応 20
補足
補足 Since Firefox 28, multi-line flexbox is supported.
補足 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
補足 Until Firefox 61, flex items that are sized according to their content are sized using fit-content, not max-content.
未対応 18 — 28
無効
無効 From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 12.1Safari iOS 完全対応 あり
完全対応 あり
完全対応 7.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

flex-wrap

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
flex-wrapChrome 完全対応 29
完全対応 29
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 28IE 部分対応 11
補足
部分対応 11
補足
補足 Partial support due to large number of bugs present. See Flexbugs.
Opera 完全対応 17Safari 完全対応 9WebView Android 完全対応 4.4
完全対応 4.4
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 29
完全対応 29
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 12Firefox Android 完全対応 52Opera Android 完全対応 18Safari iOS 完全対応 9.2Samsung Internet Android ?

凡例

完全対応  
完全対応
部分対応  
部分対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

grid-template-columns

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
grid-template-columnsChrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile 未対応 なしFirefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
minmax()Chrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11Opera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 未対応 なしChrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile 未対応 なしFirefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android ?
repeat()Chrome 完全対応 57
完全対応 57
完全対応 あり
無効
無効 This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 完全対応 57
完全対応 57
未対応 52 — 57
補足
補足 calc() doesn't work in repeat() (see bug 1350069).
未対応 31 — 52
無効
無効 From version 31 until version 52 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 あり
無効
無効 This feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57
完全対応 57
完全対応 あり
無効
無効 This feature is behind the Enable experimental Web Platform features preference.
Chrome Android 完全対応 57
完全対応 57
完全対応 あり
無効
無効 This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile 未対応 なしFirefox Android 完全対応 60
完全対応 60
未対応 52 — 60
補足
補足 calc() doesn't work in repeat() (see bug 1350069).
未対応 31 — 52
無効
無効 From version 31 until version 52 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 あり
無効
無効 This feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android ?
fit-content()Chrome 完全対応 29Edge 完全対応 16Firefox 完全対応 51IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 未対応 なしFirefox Android 完全対応 51Opera Android 完全対応 43Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 7.0
Animation of tracksChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 66IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 66Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

MDN にある資料

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,