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

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

最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、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と同様です。

注意点

現在のブラウザサポートはありません。

注意点

サポートされていません。軸に沿って複数のアイテムが配置されています。