大切なのは「要素の幅」と「余ったスペース」
Webサイトを作っていると、次のように要素を中央に配置したい場面がよくあります。
.box {
width: 600px;
margin: 0 auto;
}ここで使われているのが、次の指定です。
margin: 0 auto;しかし、これだけを覚えると、次のような疑問が生まれます。
margin: 0 auto;を書いたのに、中央に移動しない！
この問題を解決するポイントは、中央に配置する要素に幅を指定することです。
margin: 0 auto;の意味
まずは、指定を分解してみましょう。
margin: 0 auto;値を2つ書いた場合は、次の意味になります。
| 値 | 適用される場所 |
|---|---|
0 |
上下の余白 |
auto |
左右の余白 |
つまり、次の指定を短く書いたものです。
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;左右の余白に指定されたautoは、余っているスペースを自動的に分ける働きをします。
中央に動かしているのではない
margin: 0 auto;は、要素を直接「中央へ移動させる命令」ではありません。
正確には、次のような処理が行われています。
- 親要素の横幅を確認する
- 子要素の横幅を引く
- 残ったスペースを左右に分ける
- 左右に同じ余白ができる
- 結果として要素が中央に配置される
例えば、親要素の幅が1000px、子要素の幅が600pxだったとします。
1000px − 600px ＝ 400px残った400pxを左右で分けます。
400px ÷ 2 ＝ 200px結果は次のようになります。
| 左の余白 | 子要素 | 右の余白 |
|---|---|---|
| 200px | 600px | 200px |
左右の余白が同じなので、子要素が中央に配置されます。
幅がある場合とない場合を比較しよう
「幅あり」と「幅なし」を切り替えて確認できます。
幅を指定した場合
<div class="box">
中央に配置される要素
</div>.box {
width: 600px;
margin: 0 auto;
}要素の幅が600pxに決まっているため、親要素の中に余ったスペースができます。
その余りを左右のautoが均等に分けるため、中央に配置されます。
幅を指定しないとどうなる？
次のCSSを見てください。
.box {
margin: 0 auto;
}divなどのブロック要素は、初期状態では横幅がautoです。基本的に、親要素の横幅いっぱいに広がります。
親要素の幅 ＝ 子要素の幅子要素が横幅いっぱいなら、左右に分ける余りはありません。
親要素1000px − 子要素1000px ＝ 余り0px余りが0pxなので、左右のautoに割り振るスペースも0pxです。
したがって、margin: 0 auto;を書いても見た目は変わりません。
margin: 0 auto;を使うときは、左右に余るスペースを作る必要があります。
幅の指定方法
ピクセルで指定する
.box {
width: 600px;
margin: 0 auto;
}幅が常に600pxになります。
ただし、スマートフォンの画面が600pxより狭い場合は、横にはみ出す可能性があります。
パーセントで指定する
.box {
width: 80%;
margin: 0 auto;
}親要素の横幅に対して、要素を80%の幅にします。
残りの20%が左右に分けられるため、左に10%、右に10%の余白ができます。
max-widthを使う
実際のWebサイトでは、次のような指定がよく使われます。
.container {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}それぞれの役割は次のとおりです。
| CSS | 役割 |
|---|---|
width: 90%; |
画面幅に合わせて伸び縮みする |
max-width: 1000px; |
最大でも1000pxまでにする |
margin: 0 auto; |
余ったスペースを左右に分ける |
画面が狭いときは横幅の90%になり、広いときは最大1000pxで止まります。
.container {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}これは、Webサイト全体の内容を中央にまとめるときの定番の書き方です。
よくある間違い
間違い1：幅を指定していない
.box {
margin: 0 auto;
}要素が親要素の横幅いっぱいになっているため、左右に余りがありません。
修正例
.box {
width: 80%;
margin: 0 auto;
}間違い2：文字を中央揃えしたい
.box {
width: 600px;
margin: 0 auto;
}これは.boxという要素そのものを中央に配置する指定です。中にある文字は中央揃えになりません。
文字を中央揃えする場合は、text-alignを使います。
.box {
width: 600px;
margin: 0 auto;
text-align: center;
}| やりたいこと | 使用するCSS |
|---|---|
| 要素そのものを中央に配置する | margin: 0 auto; |
| 要素内の文字や画像を中央揃えする | text-align: center; |
間違い3：インライン要素に使っている
通常のspanやaなどのインライン要素は、内容に応じて幅が決まります。
<span class="label">お知らせ</span>.label {
width: 300px;
margin: 0 auto;
}インライン要素には、通常の方法ではwidthが効きません。
ブロック要素に変更すると、幅と左右のautoを使えるようになります。
.label {
display: block;
width: 300px;
margin: 0 auto;
}実践サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中央揃えの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<h1>中央揃えの練習</h1>
<p>
このエリアは幅が制限され、画面の中央に配置されています。
</p>
</main>
</body>
</html>body {
margin: 0;
background-color: #eeeeee;
}
.container {
width: 90%;
max-width: 800px;
margin: 0 auto;
padding: 40px;
box-sizing: border-box;
background-color: #ffffff;
}この例では、.containerが画面いっぱいに広がらないため、左右に余りができます。その余りをmargin-left: autoとmargin-right: autoが均等に分けています。
確認課題
問題1：中央にならない理由
次の要素が中央に配置されない理由を説明してください。
.box {
margin: 0 auto;
}問題2：CSSを修正しよう
次の.boxを、幅500pxで中央に配置してください。
.box {
background-color: lightblue;
}問題3：計算してみよう
親要素の幅が900px、子要素の幅が500pxの場合、左右の余白はそれぞれ何pxになりますか。
問題4：レスポンシブ対応
次の条件を満たすCSSを書いてください。
- 基本の幅は画面の
90% - 最大幅は
1000px - 要素を中央に配置する
問題5：どちらを使う？
次の場合、margin: 0 auto;とtext-align: center;のどちらを使うか答えてください。
- 見出しの文字を中央揃えにしたい
- 幅
800pxのコンテンツ全体を中央に置きたい - ボックス内の画像を中央揃えにしたい
解答
問題1
幅を指定していないブロック要素は、基本的に親要素の横幅いっぱいに広がります。左右に余ったスペースがないため、autoで分ける余白もありません。
問題2
.box {
width: 500px;
margin: 0 auto;
background-color: lightblue;
}問題3
900px − 500px ＝ 400px
400px ÷ 2 ＝ 200px左右の余白は、それぞれ200pxです。
問題4
.box {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}問題5
text-align: center;margin: 0 auto;text-align: center;
まとめ
margin: 0 auto;を理解するために、次の3点を覚えましょう。
autoは、余っているスペースを自動的に分ける- 要素が横幅いっぱいだと、分ける余りがない
- そのため、中央に配置する要素には幅または最大幅が必要
特に大切なのは、次の考え方です。
margin: 0 auto;が要素を中央へ動かすのではありません。
幅を指定して作った「余り」を左右で均等に分けた結果、中央に配置されます。
