右（左）寄せセクションが画面幅を広げても間延びしない方法

はじめに

こんにちは、たくまです！

最近のWebデザインでは、コンテンツやセクションを中央に配置するのでなく、あえて右端や左端に寄せた構成を使うケースが増えています。こういったレイアウトを見たことはありませんか？

みなさんは、このようなレイアウトの場合どのようにスタイリングしますか？
すぐに思いつくのはmax-widthなどを設定し、margin-left: auto;にするものだと思います。

ところがこのレイアウト、単純に margin-left: auto; などで右寄せすると、
大きなモニター（画面幅）で余白が広がりすぎるという問題が発生します。
そうなると視線のバランスが崩れ、デザインが「間延びした印象」になってしまいます。

今回の記事では、その問題をCSS のみでスマートに解決する方法を解説します。
キーポイントは、calc() を使って「余白の半分だけ吸収する」考え方です🧐

冒頭でも述べたように、一般的なレイアウトでは全体に中央固定のコンテナを設け、例えば次のように設定します。

CSS

.container {
  max-width: 1240px;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
}

.container {
  max-width: 1240px;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
}

これにより、画面幅が1240pxを超えると、左右に均等な余白（＝中央寄せ）ができます。
しかし右寄せセクションを作るために margin-left: auto; margin-right: 0; としても、
この「左右均等」のルールが崩れて、左側の余白だけがどんどん伸びてしまうのです。

この問題を解決する考え方が、次のコードです。

CSS

.container {
  margin-left: auto;
  margin-right: 0;
  width: calc(1240px + (100% - 1240px) / 2);
}

.container {
  margin-left: auto;
  margin-right: 0;
  width: calc(1240px + (100% - 1240px) / 2);
}

この1行で、「画面幅が広がっても、余白を半分だけ吸収する」挙動が実現できます。

コードをひとつずつ解説します！

100% … ビューポート全体の幅
1240px … 通常のコンテナ幅（中央レイアウトの基準）
100% - 1240px … 画面全体からコンテナを引いた「余白全体」
(100% - 1240px) / 2 … 左右に分かれている余白の片側分
1240px + (100% - 1240px)/2
→ コンテナ幅に余白の半分を足した幅。つまり、
左端は中央コンテナと揃い、右端は画面いっぱいになる絶妙なサイズになります。

この式のミソは、“画面全体とコンテナの中間点”を基準にしている点です👨‍💻
普通に width: 100% にすると全余白を吸収してしまい、右寄せのときに左側が空きすぎます。
calc() で半分だけ吸収させると、「見た目の重心」が自然な位置に収まります。

この組み合わせは「要素を右端に寄せる」ための基本設定です。
ここで margin-left: auto; は「残りのスペースをすべて左に押し込む」という意味。
width の計算で決まったサイズを右端にピタッと固定するわけです。

この二段構えで、中央固定と右寄せを同時に満たすことができます。

中央固定に戻す場合は従来通りの

CSS

.container {
  max-width: 1240px;
  margin: 0 auto;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
}

基準幅を統一すること
　中央固定コンテナと右寄せセクションで基準幅 (1240px) が異なると、境界がずれて見えます。

大画面での横スクロール
　画像や背景が width: 100vw になっていると、計算で1pxズレたときに横スクロールが出ることがあります。
　overflow-x: hidden; を無理に使う前に、要素ごとの max-width を確認しましょう。

Safariのサブピクセル誤差
　高DPIディスプレイでは、calc() の結果が小数点になることがあります。
　背景やボーダーが微妙にずれる場合は、outline などで見え方を整えるとよいでしょう。

今回のような右寄せレイアウトは、見た目以上に数理的なアプローチが必要です。
width: calc(基準幅 + (100% - 基準幅)/2) という式は、
「中央固定のコンテナを壊さず、片側だけを画面端まで伸ばす」ためのシンプルな解法。

難しそうに見えますが、やっていることは「半分吸収」だけです。
これを理解しておくと、デザインに合わせて左右の重心を自在に操作できるようになります。
コンテンツが端に寄っても間延びせず、洗練された印象を保つことができるでしょう！