justify-content: flex-start, center, space-between… 全種類解説

By /

CSS justify-content プロパティ徹底解説：配置の基本から応用まで

CSS の justify-content プロパティは、Flexbox レイアウトと Grid レイアウトにおいて、アイテムを主軸（main axis）に沿ってどのように配置するかを制御するための強力なツールです。Web ページのレイアウトを柔軟かつ効率的にデザインする上で不可欠な要素であり、その理解はモダンな Web 開発者にとって必須と言えるでしょう。

この記事では、justify-content の基本的な概念から、各値の意味、具体的な使用例、そして応用的なテクニックまでを網羅的に解説します。justify-content をマスターし、あなたの Web 開発スキルを一段階引き上げましょう。

1. justify-content とは？

justify-content は、Flexbox コンテナまたは Grid コンテナ内のアイテムを、コンテナの主軸（main axis）に沿ってどのように配置するかを決定する CSS プロパティです。 主軸は、flex-direction プロパティによって定義されます。 flex-direction が row (デフォルト) の場合、主軸は水平方向（左から右）になり、column の場合、主軸は垂直方向（上から下）になります。 Grid レイアウトの場合、主軸はデフォルトでは行（row）方向に沿います。

justify-content は、コンテナ内にアイテムをどのように分配し、余白をどのように管理するかを制御します。 これにより、要素を左寄せ、中央寄せ、右寄せにしたり、要素間に均等なスペースを配置したりすることが可能になります。

2. justify-content の構文

justify-content プロパティの構文は非常にシンプルです。

css
.container {
justify-content: value;
}

ここで、value は、justify-content プロパティに設定する値です。 次のセクションで、利用可能なすべての値について詳しく見ていきます。

3. justify-content の値と詳細解説

justify-content プロパティには、様々な値を設定することができます。 それぞれの値は、アイテムの配置方法に異なる影響を与えます。以下に、各値の詳細な説明と具体的な使用例を示します。

3.1. flex-start (デフォルト)

  • 説明: アイテムをコンテナの開始位置に詰めて配置します。主軸が水平方向（flex-direction: row）の場合、アイテムは左寄せになります。主軸が垂直方向（flex-direction: column）の場合、アイテムは上寄せになります。
  • 余白の扱い: 余ったスペースはすべてコンテナの終了位置に配置されます。
  • 使用例:

“`html

Item 1
Item 2
Item 3

“`

“`css
.container {
display: flex;
width: 500px;
height: 200px;
border: 1px solid black;
}

.flex-row {
flex-direction: row;
justify-content: flex-start; / デフォルト値なので省略可能 /
}

.container > div {
width: 100px;
height: 50px;
background-color: lightblue;
margin: 5px;
}
“`

この例では、Item 1、Item 2、Item 3 がコンテナの左端に詰めて配置されます。

3.2. flex-end

  • 説明: アイテムをコンテナの終了位置に詰めて配置します。主軸が水平方向（flex-direction: row）の場合、アイテムは右寄せになります。主軸が垂直方向（flex-direction: column）の場合、アイテムは下寄せになります。
  • 余白の扱い: 余ったスペースはすべてコンテナの開始位置に配置されます。
  • 使用例:

“`html

Item 1
Item 2
Item 3

“`

css
.flex-end {
flex-direction: row;
justify-content: flex-end;
}

この例では、Item 1、Item 2、Item 3 がコンテナの右端に詰めて配置されます。

3.3. center

  • 説明: アイテムをコンテナの中央に配置します。
  • 余白の扱い: 余ったスペースは、コンテナの開始位置と終了位置に均等に分配されます。
  • 使用例:

“`html

Item 1
Item 2
Item 3

“`

css
.center {
flex-direction: row;
justify-content: center;
}

この例では、Item 1、Item 2、Item 3 がコンテナの中央に配置されます。

3.4. space-between

  • 説明: 最初のアイテムをコンテナの開始位置に、最後のアイテムをコンテナの終了位置に配置し、残りのアイテムを均等な間隔で配置します。
  • 余白の扱い: 最初のアイテムとコンテナの開始位置の間、および最後のアイテムとコンテナの終了位置の間には、スペースは配置されません。
  • 使用例:

“`html

Item 1
Item 2
Item 3

“`

css
.space-between {
flex-direction: row;
justify-content: space-between;
}

この例では、Item 1 がコンテナの左端に、Item 3 がコンテナの右端に配置され、Item 2 は Item 1 と Item 3 の間に均等な間隔で配置されます。

3.5. space-around

  • 説明: 各アイテムの周囲に均等なスペースを配置します。アイテムとコンテナの端の間のスペースは、アイテム間のスペースの半分になります。
  • 余白の扱い: すべてのアイテムの周囲にスペースが配置されます。
  • 使用例:

“`html

Item 1
Item 2
Item 3

“`

css
.space-around {
flex-direction: row;
justify-content: space-around;
}

この例では、Item 1、Item 2、Item 3 の周囲に均等なスペースが配置されます。コンテナの端と Item 1 および Item 3 の間のスペースは、アイテム間のスペースの半分になります。

3.6. space-evenly

  • 説明: 各アイテムの間、およびアイテムとコンテナの端の間に均等なスペースを配置します。
  • 余白の扱い: すべてのスペースが均等になります。
  • 使用例:

“`html

Item 1
Item 2
Item 3

“`

css
.space-evenly {
flex-direction: row;
justify-content: space-evenly;
}

この例では、Item 1、Item 2、Item 3 の間、およびコンテナの端と Item 1 および Item 3 の間に均等なスペースが配置されます。

3.7. start (Flexbox レベル 1 では非推奨、レベル 3 で復活)

  • 説明: flex-start と同じ動作をします。 Flexbox レベル 1 では flex-start を使うことが推奨されていましたが、レベル 3 で start が復活しました。
  • 余白の扱い: flex-start と同じです。
  • 使用例:

css
.start {
justify-content: start;
}

3.8. end (Flexbox レベル 1 では非推奨、レベル 3 で復活)

  • 説明: flex-end と同じ動作をします。 Flexbox レベル 1 では flex-end を使うことが推奨されていましたが、レベル 3 で end が復活しました。
  • 余白の扱い: flex-end と同じです。
  • 使用例:

css
.end {
justify-content: end;
}

3.9. left (一部のブラウザで対応)

  • 説明: アイテムを左寄せにします。 flex-direction: row の場合にのみ意味を持ちます。 flex-start と同じように動作します。
  • 余白の扱い: flex-start と同じです。
  • 使用例:

css
.left {
justify-content: left;
}

3.10. right (一部のブラウザで対応)

  • 説明: アイテムを右寄せにします。 flex-direction: row の場合にのみ意味を持ちます。 flex-end と同じように動作します。
  • 余白の扱い: flex-end と同じです。
  • 使用例:

css
.right {
justify-content: right;
}

3.11. normal (デフォルト、Gridレイアウトにおいて)

  • 説明: Gridレイアウトにおいて、justify-content のデフォルト値は normal です。これは、配置コンテキストが適用されないことを意味し、アイテムはコンテナの開始位置に配置されます。 flex-start と似た挙動をします。
  • 余白の扱い: 余ったスペースはコンテナの終了位置に配置されます。

3.12. stretch (Gridレイアウトにおいて)

  • 説明: Gridレイアウトにおいて、アイテムのサイズが明示的に指定されていない場合、stretch を指定すると、アイテムはコンテナのサイズに合わせて引き伸ばされます。つまり、アイテムは余ったスペースを埋めるように拡大されます。
  • 余白の扱い: アイテムがコンテナのサイズに合わせて引き伸ばされるため、余白は実質的に存在しなくなります。

4. justify-content の応用例

justify-content は、様々なレイアウトを実現するために使用できます。 以下に、いくつかの応用例を示します。

4.1. ナビゲーションバーの作成

justify-content: space-between を使用して、ナビゲーションバーの要素を左右に配置することができます。

“`html

“`

“`css
.navbar {
display: flex;
justify-content: space-between;
align-items: center; / 垂直方向の中央揃え /
background-color: #f0f0f0;
padding: 10px 20px;
}

.nav-links {
list-style: none;
display: flex;
}

.nav-links li {
margin-left: 20px;
}
“`

4.2. フッターの作成

justify-content: center を使用して、フッターのコンテンツを中央に配置することができます。

“`html

© 2023 My Website

“`

css
.footer {
display: flex;
justify-content: center;
align-items: center; /* 垂直方向の中央揃え */
background-color: #333;
color: white;
padding: 20px;
}

4.3. カードレイアウトの作成

justify-content: space-around を使用して、カードレイアウトのカード間に均等なスペースを配置することができます。

“`html

Card 1
Card 2
Card 3

“`

“`css
.card-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap; / カードが収まらない場合に折り返す /
}

.card {
width: 200px;
height: 150px;
background-color: #fff;
border: 1px solid #ccc;
margin: 10px;
text-align: center;
line-height: 150px;
}
“`

4.4. レスポンシブデザインでの利用

justify-content は、メディアクエリと組み合わせて、様々な画面サイズに対応したレスポンシブデザインを実現するために非常に有効です。 例えば、小さな画面ではアイテムを中央に配置し、大きな画面ではアイテムを均等に配置するなどが可能です。

“`css
.container {
display: flex;
justify-content: center; / デフォルトでは中央揃え /
}

@media (min-width: 768px) {
.container {
justify-content: space-between; / 画面幅が768px以上の場合、均等配置 /
}
}
“`

5. align-items と justify-content の違い

justify-content と非常によく似たプロパティとして align-items があります。 これら二つのプロパティは、アイテムの配置を制御するという点で共通していますが、動作する軸が異なります。

  • justify-content: アイテムを主軸（main axis）に沿って配置します。
  • align-items: アイテムを交差軸（cross axis）に沿って配置します。

例えば、flex-direction: row の場合、justify-content は水平方向の配置を制御し、align-items は垂直方向の配置を制御します。

align-items の値には、flex-start、flex-end、center、stretch、baseline などがあります。

“`html

Item 1
Item 2
Item 3

“`

“`css
.container {
display: flex;
flex-direction: row; / 主軸は水平方向 /
justify-content: center; / 水平方向の中央揃え /
align-items: center; / 垂直方向の中央揃え /
width: 500px;
height: 200px;
border: 1px solid black;
}

.container > div {
width: 100px;
height: 50px;
background-color: lightblue;
margin: 5px;
}
“`

この例では、justify-content: center によってアイテムが水平方向の中央に配置され、align-items: center によってアイテムが垂直方向の中央に配置されます。

6. ブラウザの互換性

justify-content プロパティは、ほとんどのモダンブラウザでサポートされています。 ただし、古いブラウザでは、ベンダープレフィックスが必要な場合があります。

  • Chrome: 21+
  • Firefox: 22+
  • Safari: 6.1+
  • Opera: 12.1+
  • Edge: 12+
  • Internet Explorer: 11 (一部制限あり)

ベンダープレフィックスを使用する場合は、次のようになります。

css
.container {
display: flex;
-webkit-justify-content: center; /* Safari, Chrome用 */
-moz-justify-content: center; /* Firefox用 */
justify-content: center; /* 標準 */
}

ただし、現在ではベンダープレフィックスはほとんど必要ありません。

7. まとめ

justify-content プロパティは、Flexbox レイアウトと Grid レイアウトにおいて、アイテムの配置を制御するための非常に強力なツールです。 このプロパティを理解し、使いこなすことで、Web ページのレイアウトをより柔軟かつ効率的にデザインすることができます。

この記事では、justify-content の基本的な概念から、各値の意味、具体的な使用例、そして応用的なテクニックまでを網羅的に解説しました。 これらの知識を活かして、あなたの Web 開発スキルをさらに向上させてください。

8. 補足

  • justify-items：Grid レイアウトにおいて、Gridアイテムのコンテンツ（テキスト、画像など）をセルの内側でどのように配置するかを制御します。 justify-content が Gridアイテム自体の配置を制御するのに対し、justify-items はそのコンテンツの配置を制御します。
  • place-content: align-content と justify-content の両方を一度に設定できるショートハンドプロパティです。

この記事が、justify-content プロパティの理解と活用に役立つことを願っています。

以上が、justify-content プロパティの詳細な解説記事となります。 この記事を参考に、様々なレイアウトを試してみてください。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール