CSSのフレックスボックスで要素を左右に寄せる方法を完全ガイド！初心者でもわかるjustify-content: space-between
生徒
「横に並べた要素をきれいに左右に広げたいのですが、CSSでできますか？」
先生
「フレックスボックスという仕組みを使えば、要素を簡単に左右に寄せて配置できますよ。特にjustify-content: space-betweenという設定が便利です。」
生徒
「space-betweenってどういう意味なんですか？難しそうに聞こえます…。」
先生
「大丈夫です。初心者でもすぐ理解できますよ。まずはどんな働きをするのか見ていきましょう。」
1. justify-content: space-betweenとは？初心者でも理解できる基本の仕組み
CSSのflexbox（フレックスボックス）は、要素を横並びや縦並びに自由に配置できる便利なレイアウト方法です。その中でもよく使われる機能が「justify-content」です。これは、横方向の並び方を決めるための設定です。
justify-contentにはいくつかの値がありますが、その中の一つが「space-between（スペース・ビトウィーン）」です。これは、要素を「両端にぴったり寄せて、間のスペースを均等にする」動きをします。例えば、左端にひとつ、右端にひとつ、真ん中にもうひとつ要素があるような形です。
簡単にいうと「左右に引っ張られて、間がきれいに空く配置」です。レストランでお皿を左右に広げて、真ん中にスペースを確保するイメージに近いです。Web制作ではナビゲーションバーやメニュー配置に非常によく使われることから、初心者でも必ず覚えておくべきテクニックです。
2. justify-content: space-betweenの基本的な使い方
space-betweenを使うには、まず親要素にdisplay:flexを指定します。そこにjustify-content: space-betweenを設定すると、子要素が左右に広がって配置されます。例えば、ロゴを左側に、メニューを右側に配置する、といった使い方が簡単にできます。
<style>
.nav {
display: flex;
justify-content: space-between;
background: #cfe2ff;
padding: 20px;
}
.item {
font-size: 18px;
}
</style>
<div class="nav">
<div class="item">ロゴ</div>
<div class="item">メニュー</div>
</div>
3. justify-content: space-betweenで配置が変わる理由
space-betweenがどのように動くか理解するために仕組みを簡単に見てみましょう。フレックスボックスでは、横方向の空いているスペースを「どこに配分するか」をjustify-contentが決めています。
space-betweenを設定すると、余ったスペースは「子要素と子要素の間」にすべて割り当てられます。そのため左右に最大限広がり、両端にぴったり寄るわけです。
たとえば、棚に本を並べるときに、端の本を左右に押し付けて、真ん中のスペースを広げるようなイメージです。これが視覚的にも整ったデザインを作る助けになります。
4. よく使われる場面：ナビゲーションメニューの配置
justify-content: space-betweenは、特にナビゲーションバー（メニュー）でよく使用されます。左側にロゴ、右側にメニューというシンプルで分かりやすいデザインを作ることができるからです。
今までfloatを使ったり細かい余白調整が必要だった作業が、フレックスボックスを使うだけでスッキリ整理されるため初心者でも安心して使えます。
5. 実際に複数の項目をspace-betweenで並べてみよう
次は3つ以上の要素を並べた場合の例を見てみましょう。space-betweenは要素の数が多いときほど効果が分かりやすくなります。すべての要素の間に均等な距離が生まれるため、バランスの良い配置を簡単に作れます。
<style>
.menu {
display: flex;
justify-content: space-between;
background: #e2e3e5;
padding: 15px;
}
.menu-item {
padding: 8px 12px;
background: #fff;
border-radius: 5px;
}
</style>
<div class="menu">
<div class="menu-item">ホーム</div>
<div class="menu-item">サービス</div>
<div class="menu-item">お問い合わせ</div>
</div>
6. space-betweenが適している場面と向かない場面
space-betweenは左右に要素を広げたい場面では大活躍します。しかし「固定間隔で並べたい」場合にはあまり向きません。例えばすべてのボタンを10px間隔で並べたいときはgapを使う方が向いています。
space-betweenは「空いたスペースをどう配分するか」をコントロールするものなので、画面の幅が変わると配置も変わる特徴があります。これを理解しておくと、デザインが思った通りに動かない原因を見つけやすくなります。
7. justify-contentの他の値との違いをやさしく理解する
space-betweenの特徴をより深くつかむために、他の値とも比べてみましょう。flex-startは左寄せ、flex-endは右寄せ、centerは中央寄せです。しかしこれらでは大きなスペースを調整することはできません。
space-betweenは「端に寄せつつ真ん中を整える」という独特の動きを持っているため、ナビゲーションやヘッダーなどのバランスが大切な場所で特に強い力を発揮します。
8. 初心者が覚えておきたい注意点とポイント
space-betweenを使う上で最も大切な注意点は「要素が2個以上ないと意味がない」ということです。1つしかない場合、スペースを分配する相手がいないため効果がありません。
また、意図せず左右に大きく広がりすぎる場合は、親要素の幅が広すぎることもあります。そんなときは親要素に最大幅（max-width）を指定したり、余白の調整を見直すと良い結果につながります。
初心者にとっては、まず「左右に大きく広げて配置する」という基本的な理解だけで十分です。使っていくうちに自然と動きの感覚が掴めるようになります。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
