両側に空白を作る

両側が空白になっているサイトが多いので私のやつも両側を空白にします。

横幅指定

まず両側を空白にするために表示領域を絞ります。

表示領域を絞りたい範囲に横幅指定をすれば良い感じになります。

私の場合はbodyに記述しました。本当はきちんと範囲をdivでくくったほうが良いような気がします。

body{
	width: 75%;
	margin: 0 auto;
	background-color: #FAFAFA;
}

width: 75%;でウィンドウサイズの75%が横幅になります。

margin: 0 auto;で中心に表示されます。

background-colorで範囲内の背景色を設定しています。

せっかくなので背景色も設定しておきます。

html{
	background-color: #E0F7FA;
}

本来はbodyにでも割り当てるべきなのでしょうが、上で使ってしまっているのでそれよりも上のhtmlに背景色を割り当てました。よろしくない気がするのできちんとdivでくくるなりしてください。

あとはスマホ対応ですかね・・・