タイトル: 左右の端にそれぞれ要素を寄せる方法
SEOタイトル: CSSで要素を左右の端に分けて配置する方法｜space-betweenとmargin auto
CSSで2つの要素を左端と右端に分けて配置するには、親要素にdisplay: flex; justify-content: space-between;を指定するのが最も簡単で確実な方法です。Flexboxを使うと、子要素が2つの場合は自動的に一方が左端、もう一方が右端へ寄り、中央に余白がまとまります。
| この記事の要点 |
|---|
|
左右の端に要素を寄せる主な方法
1つの行の中で、一方の要素を左端、もう一方を右端に配置したい場面はよくあります。ヘッダーのロゴとメニュー、見出しと「もっと見る」リンク、価格と購入ボタン、ユーザー名とログアウトリンクなどが典型例です。こうした「左右に分かれた2つの要素」は、Webページのあちこちで使われる基本的なレイアウトパターンです。
かつてはこの配置をfloatやテーブルレイアウトで実現していましたが、現在はFlexboxやGridといったモダンなレイアウト機能を使うことで、より少ないコードで安定した結果を得られます。CSSでこれを実現する代表的な方法は次の3つです。
- 方法①：Flexboxの
justify-content: space-between— 最も手軽で推奨される方法。子要素が2つなら自動で両端に分かれる。 - 方法②：
margin-left: auto— 右側に置きたい要素だけを右端へ押し出す方法。要素数が増えても柔軟に対応できる。 - 方法③：Grid — グリッドレイアウトで左右のカラムを定義する方法。複雑なレイアウトと相性がよい。
以下、それぞれの方法をコード付きで解説します。
方法①：Flexboxのspace-betweenで両端に寄せる
最も簡単で確実なのが、親要素にdisplay: flex;とjustify-content: space-between;を指定する方法です。justify-content: space-between;は、子要素の間にできる余白をすべて要素と要素のあいだに均等配分するプロパティです。子要素が2つしかない場合は、その余白が中央にまとまるため、結果として一方が左端、もう一方が右端へ自動的に寄ります。
要素の幅や文字数が変わっても、左右の端という位置は保たれるため、レスポンシブなレイアウトでも崩れにくいのが利点です。
HTML
|
<div class="container"> |
CSS
|
.container { |
これだけで「左の要素」が左端に、「右の要素」が右端に配置されます。子要素が3つ以上ある場合は、両端の要素が端に寄り、残りが等間隔に並びます。あくまで「左端と右端の2つに分けたい」場合に最も向いた書き方です。
仕組みを補足すると、Flexboxではjustify-contentが主軸（横並びの場合は水平方向）に沿った余白の配り方を決めます。space-betweenは「最初の要素を先頭に、最後の要素を末尾にぴったり寄せ、残りの余白を要素間に均等配分する」という挙動です。そのため要素が2つなら、間にすべての余白が入って自然に左右へ分かれます。要素の中身が日本語でも英語でも、長さに関係なく端の位置が保たれる点が扱いやすさにつながっています。
実際のヘッダー例
ロゴを左、ナビゲーションメニューを右に置く、よくあるヘッダーは次のように書けます。
|
.header { |
align-items: center;を加えると、左右の要素の高さが違っても垂直方向の中央でそろい、見た目が整います。
方法②：margin-left: autoで右の要素を押し出す
「左側の要素はそのままで、特定の要素だけを右端に押し出したい」という場合は、Flexbox内でその要素にmargin-left: auto;を指定する方法が便利です。Flexアイテムのautoマージンは、その方向に残っている余白をすべて吸収します。左マージンをautoにすると、左側の余白がすべてその要素の左に詰め込まれ、結果として要素が右端まで押し出されます。
この方法は、左側に複数の要素が並んでいて、最後の1つだけを右端に離したいときに特に有効です。
HTML
|
<div class="container"> |
CSS
|
.container { |
親にはjustify-contentを指定せず、右に寄せたい要素にだけmargin-left: auto;を付けるのがポイントです。複数の要素のうち1つを基準に「ここから右に離す」という直感的な指定ができます。
たとえば左側にロゴ・カテゴリ・検索の3つを並べ、最後のログインボタンだけを右端に離す、といったレイアウトもこの方法なら自然に書けます。space-betweenでは要素間すべてに余白が入ってしまいますが、margin-left: autoなら「どこに区切りの余白を入れるか」を要素単位で選べるため、左グループと右グループに分けたいときに重宝します。
方法③：Gridで左右に分ける
CSS Gridを使っても左右の端に要素を分けられます。親要素にdisplay: grid;を指定し、justify-content: space-between;を加える方法が最もシンプルです。Gridの場合も、カラムが2つなら両端に分かれます。
より明示的に制御したい場合は、grid-template-columnsで左カラムをauto(内容ぶんの幅)、余白を1fr、右カラムをautoのように定義する方法もあります。レイアウトが複雑で、行と列をきっちり管理したいときにGridが向いています。
HTML
|
<div class="container"> |
CSS
|
.container { |
この例では、中央の1frカラムが余白を引き受けるため、左右の要素がそれぞれ端に寄ります。1frは「余った空間を1の比率で受け取る」という意味の単位で、可変の余白として機能します。両端のautoはそれぞれの要素の内容ぶんの幅になるため、結果として左の要素・(可変の余白)・右の要素という配置になります。
なお、上のgrid-template-columns: auto 1fr auto;は3カラムを定義しているため、本来は要素を3つ並べる構成です。要素が2つだけの場合は、左の要素・右の要素という2カラム構成と、Gridのjustify-content: space-between;を組み合わせる書き方のほうがシンプルです。要素数とカラム数の対応を取り違えると意図しない位置に要素が入るので注意してください。レイアウトが行・列ともに複雑になるケースではGridの威力が発揮されますが、単純に2要素を左右に分けるだけならFlexboxのほうが手数が少なく済みます。
各方法の比較
3つの方法の特徴を整理すると次のとおりです。一般的な「2要素を左右に分ける」用途では、Flexboxのspace-betweenが最もおすすめです。コード量が少なく、要素の幅が変わっても崩れにくく、縦位置の調整もalign-itemsで簡単に行えるためです。
| 方法 | 主な指定 | 向いている場面 | 手軽さ |
|---|---|---|---|
| Flexbox（推奨） | justify-content: space-between; | 2要素を左右の端に分ける基本パターン | とても簡単 |
| margin auto | margin-left: auto; | 特定の要素だけを右端へ押し出したいとき | 簡単 |
| Grid | display: grid; など | 行・列を厳密に管理する複雑なレイアウト | やや手間 |
3要素を「左・中央・右」に分けたい場合
この記事で扱ったのは、あくまで2つの要素を左端と右端に分ける方法です。もし「左・中央・右」の3か所にそれぞれ要素を配置したい場合は、space-betweenだけでは中央の要素がぴったり中央に来ない、といった別の考慮が必要になります。具体的には、中央の要素を厳密に画面の中心に置きたい場合、左右の要素の幅が異なるとspace-betweenでは中央がずれてしまいます。これを避けるには中央の要素を基準に配置する工夫が必要です。3要素を一行で左・中央・右に振り分ける方法については、こちらの関連記事で詳しく解説しています。
つまずきやすいポイント
左右の振り分けでよくある落とし穴をまとめます。
| つまずくポイント | 対処法 |
|---|---|
| 古いfloatでの横並びに頼ってしまう | floatは回り込みの解除（clearfix）など余計な手間が増える。現在はFlexboxやGridで置き換えるのがよい。 |
| 左右に分かれるが、要素の縦位置がそろわない | Flexのalign-itemsで縦位置を調整する。中央でそろえたいならalign-items: center;を親に追加する。 |
| 画面幅が狭いと要素が折り返してレイアウトが崩れる | 折り返しを防ぐならflex-wrap: nowrap;（初期値）を確認し、必要に応じて各要素の幅やmin-widthを見直す。意図的に折り返したい場合のみflex-wrap: wrap;を使う。 |
よくある質問
Q. justify-content: space-betweenとmargin-left: autoはどちらを使うべきですか？
A. 子要素がちょうど2つで、左端と右端に分けたいだけならspace-betweenが簡潔でおすすめです。一方、左側に複数の要素が並んでいて、その中の1つだけを右端へ離したい場合はmargin-left: autoのほうが意図が伝わりやすく柔軟です。
Q. 左右に分けた要素の上下の位置をそろえるには？
A. 親要素にalign-itemsを指定します。垂直方向の中央でそろえたい場合はalign-items: center;、上端でそろえたい場合はalign-items: flex-start;を親に追加してください。
Q. Flexboxは古いブラウザでも使えますか？
A. Flexboxは現在の主要なブラウザで広くサポートされています。特別に古い環境を想定する必要がなければ、float方式よりもFlexboxやGridを優先して問題ありません。
Q. なぜ右端の要素がうまく右に寄らないのですか？
A. よくある原因は、親要素にdisplay: flex;を付け忘れているケースです。justify-contentやmargin-left: autoは、親がFlexコンテナ（またはGridコンテナ）になっていて初めて効果を発揮します。まずは親要素にdisplay: flex;が指定されているかを確認してください。また、要素自体の幅が親いっぱいに広がっていると左右に分かれて見えないため、各要素のwidth指定も合わせて見直すとよいでしょう。
まとめ
CSSで2つの要素を左端と右端に分けて配置する方法を整理しました。基本となるのは、親要素にdisplay: flex;とjustify-content: space-between;を指定するFlexboxの手法です。これだけで2つの要素が自動的に両端へ分かれ、要素の幅が変わっても安定します。左側に複数の要素があり、その中の1つだけを右端に離したい場合はmargin-left: auto;が便利です。行・列を厳密に管理したい複雑なレイアウトではGridが選択肢になります。古いfloatでの実装は手間が多いため、特別な理由がなければFlexboxやGridへ置き換えることをおすすめします。3つの要素を左・中央・右に分けたい場合は、用途が異なるため関連記事も参考にしてください。