メインの箱を中央に置く

01 / 05

本文には幅が要る

文字が画面の端から端まで並ぶと、目が横に動きすぎて読みにくい。

だから本文は土台の箱に入れて、幅を決める。新聞や本が段組みになっているのと同じ理由だよ。

.main {  width: 600px;}

02 / 05

幅を決めただけだと、箱は左に張りついたままになる。

div は「1行まるごと自分の場所」として扱われるので、残りが右に余っても動いてくれないんだ。

03 / 05

display: inline-block; をつけると、その箱は文字と同じ仲間として扱われる。幅や高さは持ったままで、並び方だけが変わるんだ。

文字の仲間になれば、親の text-align: center; でまん中に置けるようになるよ。

.wrapper {  text-align: center;}.main {  display: inline-block;  width: 600px;}

04 / 05

ただし text-align: center; は中の文字にも伝わるので、本文まで中央寄せになってしまう。

箱のほうに text-align: left; を書いて戻しておこう。外は中央、中は左が合言葉。

.main {  display: inline-block;  text-align: left;  width: 600px;}

05 / 05

土台の箱さえできれば、その中には見出しでも段落でもリストでも入れられる。

ページ作りは外側から内側へ。大きな箱から先に決めていこう。ここから書いてみよう。

<div class="wrapper">  <div class="main">    <h2>ようこそ</h2>  </div></div>