中央寄せレイアウトを作ってみよう
更新日：2026-08-02
前のページでは、
- Flexbox
- flex-direction
- スマホでは縦並び
を学びました。
今回は、
- width
- max-width
- margin: 0 auto
を使って、
中央寄せレイアウト
を作ってみます
現在のWebサイトでは、
「画面いっぱいに広げすぎない」
デザインが非常によく使われています。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
├── index.html
└── css/
└── style.css
なぜ横幅を制限するの？
例えば、
超横長のモニター
で文字が端から端まで広がると、
読みにくい
ことがあります。
そのため、
最大横幅を制限
することが非常によくあります。
まずはHTMLを書いてみよう
<body>
<div class="container">
<div class="card">
<h1>見出しです</h1>
<p>
中央寄せレイアウトのサンプルです。
</p>
</div>
</div>
</body>
container を作る
次に CSS を書きます。
.container {
max-width: 1000px;
margin: 0 auto;
}
保存してブラウザを確認してください。
コンテンツが中央へ寄るはずです。
max-width とは？
max-width
は、
最大横幅
を意味しています。
max-width: 1000px
max-width: 1000px;
は、
1000px以上広がらない
という意味です。
width との違い
例えば、
width: 1000px;
を書くと、
常に1000px固定
になります。
なぜ max-width のほうが便利なの？
スマホでは画面幅が狭いため、
1000px固定
だと、
画面からはみ出す
ことがあります。
max-width は柔軟
一方、
max-width: 1000px;
なら、
小さい画面では縮む大きい画面では1000pxまで
となります。
そのため、
レスポンシブ向き
です。
margin: 0 auto とは？
今回、
margin: 0 auto;
を書いています。
これは、
左右中央寄せ
でよく使われる書き方です。
margin の4方向
margin は、
上 右 下 左
の順番です。
つまり、
margin: 0 auto;
は、
上下 0左右 auto
という意味になります。
auto とは？
ここでの auto は、
余ったスペースを自動調整
という意味です。
なぜ中央寄せになるの？
例えば、
画面幅 1400pxcontainer 1000px
なら、
余り 400px
になります。
これを、
左右へ自動で均等配分
するため、中央寄せになります。
padding も追加してみよう
今のままだと、スマホで端にくっつくことがあります。
そのため、
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 16px;
}
を追加します。
なぜ padding が必要なの？
スマホ画面では、
画面ギリギリ
だと読みにくくなります。
そのため、
左右に少し余白
を作ることが非常によくあります。
実際のWeb制作でも超重要
この、
max-width
margin: 0 auto
padding
の組み合わせは、
ほぼすべてのWebサイト
で使われています。
よくあるサイズ感
例えば、
| 用途 | max-width |
|---|---|
| 小さめ | 800px |
| 標準 | 1000px |
| 少し広め | 1200px |
などがよく使われます。
container は非常によく登場する
実際のCSSフレームワークでも、
container
という名前は非常によく登場します。
例えば、
- Bootstrap
- Tailwind CSS
- Bulma
などでも似た考え方があります。
今回学んだこと
今回学んだこと：
widthmax-widthmargin: 0 auto- 中央寄せ
- container
- スマホ用 padding
などです。
次のページでは
次のページでは、
- position
- absolute
- relative
- fixed
などを使って、
「要素を自由に配置する方法」
を学んでいきます