最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ

CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。

最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。

CSSでコンテナ内の要素を揃えるプロパティのまとめ

CSS Alignment Cheatsheet
記事: Demystifying CSS alignment

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

揃える方法の紹介の前に、まずは基礎知識から。

基礎知識: インラインとブロック

最初に重要なのは、揃えるのがインラインなのか、ブロックなのか、です。

インラインとブロック

インラインとブロック

Webページのレイアウトには、2つの方向があります。

  • インライン(主軸)
    インラインとは、テキストなどのインライン要素を水平に配置させる軸。
    方向はデフォルトで左から右に、水平です。
  • ブロック(交差軸)
    ブロックとは、divなどのブロック要素を積み重ねて垂直に配置させる軸。
    方向はデフォルトで上から下に、垂直です。

この軸によって、CSSでは使用するプロパティが異なります。

インラインとブロックで使用するプロパティは異なる

インラインとブロックで使用するプロパティは異なる

インライン・主軸の水平に揃える場合には「justify」、アウトライン・交差軸の垂直に揃える場合には「align」、というキーワードを覚えておきましょう。CSS Grid, FlexboxなどのCSS レイアウトで使用するプロパティは、この軸によって異なります。

要素が含まれるコンテナに指定して揃える

揃えたい要素が含まれるコンテナにプロパティを指定して、要素を揃えます。

Flexboxを使って要素を揃える

サイトのキャプチャ

Flexboxを使用して、コンテナ内の要素をインライン・主軸に沿って揃えます。

プロパティ
justify-content
参考: Flexboxの各プロパティの使い方を詳しく解説#justify-content

使い方
flexコンテナに適用。
flexアイテムを揃えます。
サイトのキャプチャ

Flexboxを使用して、コンテナ内の要素をブロック・交差軸に沿って揃えます。

プロパティ
align-content
参考: Flexboxの各プロパティの使い方を詳しく解説#ailgn-content
使い方
flexコンテナに適用。
flexラインの行を揃えます。
注意点
複数の行がある場合は、flex-wrapを使用。
参考: Flexboxの各プロパティの使い方を詳しく解説#flex-wrap

Gridを使って要素を揃える

サイトのキャプチャ

Gridを使用して、コンテナ内の要素をインライン・主軸に沿って揃えます。

プロパティ
justify-content
参考: CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説
使い方
Gridコンテナに適用。
Gridの列トラックの間隔を揃えます。
トラック間の残りのスペース(存在する場合)を制御します(グリッドギャップなど)。
サイトのキャプチャ

Gridを使用して、コンテナ内の要素をブロック・交差軸に沿って揃えます。

プロパティ
align-content
参考: CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説
使い方
Gridコンテナに適用。
Gridの行トラックの間隔を揃えます。
トラック間の残りのスペース(存在する場合)を制御します(グリッドギャップなど)。

Multi-columnを使って要素を揃える

サイトのキャプチャ

Multi-columnを使用して、コンテナ内の要素をインライン・主軸に沿って揃えます。

プロパティ
justify-content
使い方
Multi-columnのコンテナに適用。
Multi-columnのボックスを揃えます。
トラック間の残りのスペース(存在する場合)を制御します(カラムギャップなど)。
注意点
現在のブラウザサポートはありません。
サイトのキャプチャ

Multi-columnを使用して、コンテナ内の要素をブロック・交差軸に沿って揃えます。

プロパティ
align-content
使い方
Multi-columnのコンテナに適用。
Multi-columnのボックスを揃えます。
注意点
列の高さがコンテナの高さに満たない場合のみ利用できます。
現在のブラウザサポートはありません。

display:block;を使って要素を揃える

サイトのキャプチャ
注意点
サポートされていません。
サイトのキャプチャ

display:block;を使用して、コンテナ内の要素をブロック・交差軸に沿って揃えます。

プロパティ
align-content
使い方
Blockのコンテナに適用。
Blockのコンテンツ全体を1つの単位として揃えます。
paddingと同様です。
注意点
現在のブラウザサポートはありません。

コンテナ内の要素に指定して揃える

コンテナに配置された要素にプロパティを指定して、要素を揃えます。

Flexboxを使って要素を揃える

サイトのキャプチャ
注意点
サポートされていません。軸に沿って複数のアイテムが配置されています。
サイトのキャプチャ

Flexboxを使用して、コンテナ内の要素をブロック・交差軸に沿って揃えます。

プロパティ
align-self
参考: Flexboxの各プロパティの使い方を詳しく解説#align-self
使い方
flexアイテムに適用。
flexラインの内側に整列します。

Gridを使って要素を揃える

サイトのキャプチャ

Gridを使用して、コンテナ内の要素をインライン・主軸に沿って揃えます。

プロパティ
justify-self
参考: CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説
使い方
Gridアイテムに適用。
Gridエリア、またはセルの内側に整列します。
サイトのキャプチャ

Gridを使用して、コンテナ内の要素をブロック・交差軸に沿って揃えます。

プロパティ
align-self
参考: CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説
使い方
Gridアイテムに適用。
Gridエリア、またはセルの内側に整列します。

display:block;を使って要素を揃える

サイトのキャプチャ

display:block;を使用して、コンテナ内の要素をインライン・主軸に沿って揃えます。

プロパティ
justify-self
使い方
Block要素に適用。
Blockコンテナの内側に整列します。
marginと同様です。
注意点
現在のブラウザサポートはありません。
サイトのキャプチャ
注意点
サポートされていません。軸に沿って複数のアイテムが配置されています。

sponsors

top of page

©2018 coliss