Documentation CSS

概要

justify-contentは、CSSのFlexboxレイアウトおよびGridレイアウトでコンテナ内のアイテムを主軸（main axis）方向に整列させるためのプロパティです。アイテムの配置方法を指定することで、デザインに合わせたレイアウトが可能になります。特に、スペースの均等配置や中央寄せなど、画面幅に応じた柔軟なレイアウト調整が求められる場面で非常に役立ちます。

FlexboxとGridでの動作

justify-contentは、Flexbox とGridの両方で使用できますが、動作が少し異なります。

Flexboxでの動作

Flexboxでは、justify-contentは**主軸（main axis）**方向のアイテム配置を制御します。

  • flex-direction: row（デフォルト）：水平方向（左から右）
  • flex-direction: column：垂直方向（上から下）
.flex-container {
  display: flex;
  flex-direction: row; /* 主軸は水平 */
  justify-content: center; /* 水平方向の中央揃え */
}

Gridでの動作

Grid レイアウトでは、justify-contentは**インライン軸（inline axis）**方向のグリッドトラック全体の配置を制御します。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: center; /* グリッド全体を中央に配置 */
}

align-contentとの違い

プロパティFlexboxGrid
justify-content主軸方向の配置インライン軸方向の配置
align-content交差軸方向の配置（複数行）ブロック軸方向の配置

justify-contentの基本構文

Flexboxでの構文

.flex-container {
  display: flex;
  justify-content: <値>;
}

Gridでの構文

.grid-container {
  display: grid;
  justify-content: <値>;
}

値の種類と視覚的な説明

配置に関する値

flex-start（初期値）

アイテムを主軸の始点に揃えます（通常は左端）。

.container {
  display: flex;
  justify-content: flex-start;
}

視覚的なイメージ：

[Item1][Item2][Item3]________________

flex-end

アイテムを主軸の終点に揃えます（通常は右端）。

.container {
  display: flex;
  justify-content: flex-end;
}

視覚的なイメージ：

________________[Item1][Item2][Item3]

center

アイテムを主軸の中央に配置します。

.container {
  display: flex;
  justify-content: center;
}

視覚的なイメージ：

________[Item1][Item2][Item3]________

start（CSS Grid）

書字方向の始点に揃えます。

.container {
  display: grid;
  justify-content: start;
}

end（CSS Grid）

書字方向の終点に揃えます。

.container {
  display: grid;
  justify-content: end;
}

分配に関する値

space-between

最初と最後のアイテムを両端に配置し、残りのスペースをアイテム間に均等に分配します。

.container {
  display: flex;
  justify-content: space-between;
}

視覚的なイメージ：

[Item1]________[Item2]________[Item3]

特徴：

  • 両端にスペースなし
  • アイテム間のスペースは均等
  • ナビゲーションメニューに最適

space-around

アイテムの両側に均等なスペースを設け、端のスペースはアイテム間のスペースの半分になります。

.container {
  display: flex;
  justify-content: space-around;
}

視覚的なイメージ：

___[Item1]______[Item2]______[Item3]___

特徴：

  • 端のスペース：1単位
  • アイテム間のスペース：2単位（両側1単位ずつ）

space-evenly

アイテム間および端のスペースをすべて均等に分配します。

.container {
  display: flex;
  justify-content: space-evenly;
}

視覚的なイメージ：

____[Item1]____[Item2]____[Item3]____

特徴：

  • すべてのスペースが均等
  • 最も視覚的にバランスが取れた配置

ストレッチに関する値（Grid専用）

stretch（Grid）

グリッドトラックを引き伸ばしてコンテナを埋めます。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  justify-content: stretch;
}

グローバル値

.container {
  justify-content: inherit;   /* 親要素の値を継承 */
  justify-content: initial;   /* 初期値（flex-start）に設定 */
  justify-content: revert;    /* ブラウザのデフォルトに戻す */
  justify-content: unset;     /* 継承値または初期値に設定 */
}

値の比較表

値両端のスペースアイテム間のスペース使用場面
flex-startなしなし左寄せレイアウト
flex-endなしなし右寄せレイアウト
center均等なし中央揃えレイアウト
space-betweenなし均等ナビゲーションメニュー
space-around半分均等カードレイアウト
space-evenly均等均等アイコングリッド

実践的な使用例

例1：ナビゲーションメニュー

space-betweenを使用してナビゲーションリンクを両端に配置する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ナビゲーションメニュー</title>
  <style>
    .nav {
      display: flex;
      justify-content: space-between;
      background-color: #2c3e50;
      padding: 15px 30px;
      list-style: none;
    }

    .nav-item {
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    .nav-item:hover {
      background-color: #34495e;
    }
  </style>
</head>
<body>
  <nav class="nav">
    <a href="#" class="nav-item">ホーム</a>
    <a href="#" class="nav-item">サービス</a>
    <a href="#" class="nav-item">製品</a>
    <a href="#" class="nav-item">会社概要</a>
    <a href="#" class="nav-item">お問い合わせ</a>
  </nav>
</body>
</html>

例2：ボタングループの中央揃え

centerを使用してボタンを中央に配置する例です。

.button-group {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 40px;
}

.btn {
  padding: 12px 30px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-secondary {
  background-color: #95a5a6;
  color: white;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
<div class="button-group">
  <button class="btn btn-primary">送信</button>
  <button class="btn btn-secondary">キャンセル</button>
</div>

例3：カードレイアウトの均等配置

space-evenlyを使用してカードを均等に配置する例です。

.card-container {
  display: flex;
  justify-content: space-evenly;
  padding: 40px;
  background-color: #f5f5f5;
}

.card {
  width: 250px;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #2c3e50;
}

.card-description {
  color: #7f8c8d;
  line-height: 1.6;
}
<div class="card-container">
  <div class="card">
    <h3 class="card-title">サービス 1</h3>
    <p class="card-description">高品質なサービスを提供します。</p>
  </div>
  <div class="card">
    <h3 class="card-title">サービス 2</h3>
    <p class="card-description">お客様のニーズに応えます。</p>
  </div>
  <div class="card">
    <h3 class="card-title">サービス 3</h3>
    <p class="card-description">最新技術を活用します。</p>
  </div>
</div>

例4：ヘッダーレイアウト

ロゴを左、ナビゲーションを右に配置する例です。

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
}

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

.nav-link {
  color: #2c3e50;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #3498db;
}
<header class="header">
  <div class="logo">MyBrand</div>
  <nav class="nav-links">
    <a href="#" class="nav-link">ホーム</a>
    <a href="#" class="nav-link">製品</a>
    <a href="#" class="nav-link">サポート</a>
  </nav>
</header>

例5：フッターレイアウト

複数のセクションを均等に配置するフッターの例です。

.footer {
  display: flex;
  justify-content: space-around;
  padding: 60px 40px;
  background-color: #2c3e50;
  color: white;
}

.footer-section {
  flex: 0 0 auto;
}

.footer-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #3498db;
}

.footer-list {
  list-style: none;
  padding: 0;
}

.footer-list li {
  margin-bottom: 10px;
}

.footer-link {
  color: #bdc3c7;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-link:hover {
  color: white;
}
<footer class="footer">
  <div class="footer-section">
    <h3 class="footer-title">会社情報</h3>
    <ul class="footer-list">
      <li><a href="#" class="footer-link">会社概要</a></li>
      <li><a href="#" class="footer-link">採用情報</a></li>
      <li><a href="#" class="footer-link">プレスリリース</a></li>
    </ul>
  </div>
  <div class="footer-section">
    <h3 class="footer-title">サポート</h3>
    <ul class="footer-list">
      <li><a href="#" class="footer-link">FAQ</a></li>
      <li><a href="#" class="footer-link">お問い合わせ</a></li>
      <li><a href="#" class="footer-link">利用規約</a></li>
    </ul>
  </div>
  <div class="footer-section">
    <h3 class="footer-title">フォローする</h3>
    <ul class="footer-list">
      <li><a href="#" class="footer-link">Twitter</a></li>
      <li><a href="#" class="footer-link">Facebook</a></li>
      <li><a href="#" class="footer-link">Instagram</a></li>
    </ul>
  </div>
</footer>

CSS Gridでのjustify-content

Grid レイアウトでは、justify-contentは全体のグリッドトラックの配置を制御します。

例：グリッドアイテムの中央配置

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 20px;
  justify-content: center; /* グリッド全体を中央に */
  padding: 40px;
  background-color: #ecf0f1;
  min-height: 400px;
}

.grid-item {
  background-color: #3498db;
  color: white;
  padding: 30px;
  text-align: center;
  border-radius: 8px;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

例：グリッドの両端配置

.grid-spaced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  justify-content: space-between;
  padding: 40px;
}

flex-directionとの組み合わせ

flex-directionを変更すると、justify-contentが制御する軸も変わります。

縦方向（column）の場合

.vertical-container {
  display: flex;
  flex-direction: column; /* 主軸を縦に */
  justify-content: center; /* 縦方向の中央揃え */
  height: 400px;
  background-color: #f5f5f5;
  padding: 20px;
}

.vertical-item {
  background-color: #3498db;
  color: white;
  padding: 15px;
  margin: 10px 0;
  text-align: center;
  border-radius: 6px;
}
<div class="vertical-container">
  <div class="vertical-item">アイテム 1</div>
  <div class="vertical-item">アイテム 2</div>
  <div class="vertical-item">アイテム 3</div>
</div>

逆方向（row-reverse）の場合

.reverse-container {
  display: flex;
  flex-direction: row-reverse; /* 右から左へ */
  justify-content: flex-start; /* 右端から開始 */
  gap: 15px;
  padding: 20px;
}

RTL（右から左）言語への対応

書字方向が右から左（RTL）の言語では、justify-contentの動作が反転します。

LTR vs RTL の比較

<!-- LTR（左から右） -->
<div dir="ltr" class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<!-- RTL（右から左） -->
<div dir="rtl" class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  display: flex;
  justify-content: flex-start;
}

/* LTRでは左から、RTLでは右から開始 */

RTL対応のベストプラクティス

/* 物理的な値ではなく論理的な値を使用 */
.container {
  justify-content: start; /* startを使用（flex-startより推奨） */
}

レスポンシブデザインでの活用

画面サイズに応じてjustify-contentを変更する例です。

.responsive-container {
  display: flex;
  gap: 15px;
  padding: 20px;
}

/* モバイル：中央揃え */
@media (max-width: 768px) {
  .responsive-container {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* タブレット：均等配置 */
@media (min-width: 769px) and (max-width: 1024px) {
  .responsive-container {
    justify-content: space-around;
  }
}

/* デスクトップ：両端配置 */
@media (min-width: 1025px) {
  .responsive-container {
    justify-content: space-between;
  }
}

実用的なユースケース

ケース1：画像ギャラリー

.gallery {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px;
}

.gallery-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.gallery-image:hover {
  transform: scale(1.05);
}

ケース2：プライシングテーブル

.pricing-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 60px 20px;
}

.pricing-card {
  flex: 0 1 300px;
  background: white;
  border-radius: 12px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  text-align: center;
}

.pricing-card.featured {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(52,152,219,0.3);
  border: 2px solid #3498db;
}

ケース3：ステップインジケーター

.steps {
  display: flex;
  justify-content: space-between;
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
}

.step {
  flex: 0 0 auto;
  text-align: center;
  position: relative;
}

.step-number {
  width: 40px;
  height: 40px;
  background-color: #ecf0f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-weight: bold;
  color: #7f8c8d;
}

.step.active .step-number {
  background-color: #3498db;
  color: white;
}

.step.completed .step-number {
  background-color: #27ae60;
  color: white;
}

ケース4：SNSシェアボタン

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 20px;
}

.share-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.share-btn.twitter { background-color: #1DA1F2; }
.share-btn.facebook { background-color: #4267B2; }
.share-btn.linkedin { background-color: #0077B5; }

ブラウザサポート

justify-contentプロパティは、モダンブラウザで広くサポートされています。

ブラウザFlexboxGrid
Chrome29+ (21+)57+
Firefox28+ (18+)52+
Safari9+ (6.1+)10.1+
Edge12+16+
Opera17+ (12.1+)44+

※括弧内はベンダープレフィックス付きでのサポート開始バージョン

ベンダープレフィックスの使用（古いブラウザ対応）

.container {
  display: -webkit-flex; /* Safari 6.1-8 */
  display: flex;
  -webkit-justify-content: center; /* Safari 6.1-8 */
  justify-content: center;
}

パフォーマンスとベストプラクティス

1. flex-wrapとの併用

アイテムが多い場合は、flex-wrapと組み合わせて使用します。

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* アイテムを折り返す */
  gap: 20px;
}

2. gapプロパティの活用

gapを使用すると、marginよりシンプルに間隔を設定できます。

/* ❌ 古い方法 */
.item {
  margin-right: 20px;
}

/* ✅ 推奨 */
.container {
  display: flex;
  gap: 20px;
  justify-content: center;
}

3. 最小幅の設定

アイテムが潰れないように最小幅を設定します。

.flex-item {
  flex: 0 1 auto;
  min-width: 200px; /* 最小幅を保証 */
}

4. パフォーマンスの最適化

/* will-changeは慎重に使用 */
.animated-container {
  display: flex;
  justify-content: center;
  /* アニメーション時のみ使用 */
  will-change: justify-content;
}

トラブルシューティング

問題1：justify-contentが効かない

原因：display: flexまたはdisplay: gridが設定されていない

解決策：

/* ❌ 効果なし */
.container {
  justify-content: center;
}

/* ✅ 正しい */
.container {
  display: flex; /* または display: grid; */
  justify-content: center;
}

問題2：アイテムが縮んでしまう

原因：flex-shrinkのデフォルト値が1

解決策：

.flex-item {
  flex-shrink: 0; /* 縮まないようにする */
}

問題3：スペースが均等にならない

原因：アイテムの幅が異なるため

解決策：

/* アイテムの幅を統一 */
.flex-item {
  flex: 1 1 0; /* 均等な幅 */
}

問題4：折り返し時のスペースが意図通りにならない

原因：flex-wrap: wrapとjustify-contentの組み合わせ

解決策：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* 最後の行の調整 */
}

/* 空の要素で埋める */
.container::after {
  content: '';
  flex: auto;
}

注意点とベストプラクティス

1. 主軸と交差軸の理解

justify-contentは主軸方向のみを制御します。

/* 主軸：justify-content */
/* 交差軸：align-items, align-content */
.container {
  display: flex;
  justify-content: center; /* 主軸（水平） */
  align-items: center; /* 交差軸（垂直） */
}

2. flex-directionによる軸の変化

/* row: 主軸が水平 */
.horizontal {
  flex-direction: row;
  justify-content: center; /* 水平方向の中央揃え */
}

/* column: 主軸が垂直 */
.vertical {
  flex-direction: column;
  justify-content: center; /* 垂直方向の中央揃え */
}

3. コンテナサイズの確保

justify-contentが効果を発揮するには、十分なコンテナサイズが必要です。

.container {
  display: flex;
  justify-content: space-between;
  width: 100%; /* または具体的な幅 */
  min-width: 600px; /* 最小幅を確保 */
}

4. アクセシビリティの考慮

視覚的な順序と DOM の順序を一致させることが重要です。

/* ❌ 視覚的な順序を変更するだけ */
.container {
  flex-direction: row-reverse;
}

/* ✅ HTML の順序も調整するか、適切な理由がある場合のみ使用 */

関連プロパティ

justify-contentと一緒に使用されることが多いプロパティです。

Flexbox関連

  • align-items：交差軸方向のアイテム配置（単一行）
  • align-content：交差軸方向の複数行配置
  • flex-direction：主軸の方向を指定
  • flex-wrap：アイテムの折り返しを制御
  • gap：アイテム間の間隔を指定
.flex-container {
  display: flex;
  justify-content: space-between; /* 主軸方向 */
  align-items: center; /* 交差軸方向 */
  flex-wrap: wrap; /* 折り返し */
  gap: 20px; /* 間隔 */
}

Grid関連

  • align-content：ブロック軸方向のグリッド配置
  • justify-items：インライン軸方向のアイテム配置（個別）
  • align-items：ブロック軸方向のアイテム配置（個別）
  • place-content：align-contentとjustify-contentのショートハンド
.grid-container {
  display: grid;
  justify-content: center; /* グリッド全体のインライン軸配置 */
  align-content: center; /* グリッド全体のブロック軸配置 */
  place-content: center; /* 上記2つのショートハンド */
}

コードサンプル：実践的な実装

レスポンシブナビゲーション

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブナビゲーション</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .navbar {
      background-color: #2c3e50;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 30px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
      color: #3498db;
    }

    .nav-menu {
      display: flex;
      justify-content: flex-end;
      gap: 30px;
      list-style: none;
    }

    .nav-link {
      color: white;
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    .nav-link:hover {
      background-color: #34495e;
    }

    /* モバイル対応 */
    @media (max-width: 768px) {
      .nav-container {
        flex-direction: column;
        gap: 20px;
      }

      .nav-menu {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="nav-container">
      <div class="logo">MyWebsite</div>
      <ul class="nav-menu">
        <li><a href="#" class="nav-link">ホーム</a></li>
        <li><a href="#" class="nav-link">サービス</a></li>
        <li><a href="#" class="nav-link">製品</a></li>
        <li><a href="#" class="nav-link">会社概要</a></li>
        <li><a href="#" class="nav-link">お問い合わせ</a></li>
      </ul>
    </div>
  </nav>

  <main style="padding: 40px; text-align: center;">
    <h1>Welcome to MyWebsite</h1>
    <p>レスポンシブナビゲーションの実装例</p>
  </main>
</body>
</html>

まとめ

justify-contentプロパティは、FlexboxとGrid レイアウトでアイテムを主軸方向に配置するための重要なCSSプロパティです。

主な特徴

  1. 柔軟な配置オプション：左寄せ、右寄せ、中央寄せ、均等配置など多様な配置方法
  2. FlexboxとGridの両方で使用可能：レイアウトシステムに応じた動作
  3. レスポンシブデザインに最適：メディアクエリと組み合わせて画面サイズに応じた配置

よく使われる値

値使用場面
flex-start左寄せレイアウト、デフォルト配置
flex-end右寄せレイアウト
center中央揃えレイアウト、ボタングループ
space-betweenナビゲーションメニュー、ヘッダー/フッター
space-aroundカードレイアウト、均等配置
space-evenlyアイコングリッド、完全均等配置

覚えておくべきポイント

  • 主軸の理解：flex-directionによって主軸が変わる
  • 交差軸との違い：align-items/align-contentと組み合わせて使用
  • 十分なスペース：効果を発揮するには十分なコンテナサイズが必要
  • RTL対応：書字方向によって動作が変わる
  • Gridでの動作：グリッドトラック全体の配置を制御

justify-contentプロパティを活用することで、柔軟で美しいレイアウトを簡単に実現できます。

参考リンク

参照:

justify-content - CSS: カスケーディングスタイルシート | MDN

参照:

justify-content - CSS: Cascading Style Sheets | MDN

参照:

CSS Flexible Box Layout Module Level 1 - W3C

参照:

CSS Grid Layout Module Level 2 - W3C

参照:

CSS Box Alignment Module Level 3 - W3C
円