装飾する（body全体部分）

全体調整を行う

全体を左右中央表示にする

現在の表示を確認すると、文書全体の上と左に余白が確認できます。また、全体がブラウザの左側に寄って表示されています。これを、全体の余白なし、ブラウザの左右中央に表示される用に変更します。

body {
    margin: 0; /* 外側余白なし */
    padding: 0; /* 内側余白なし */
}
.wrapper {
    width: 800px;
    margin: 0 auto; /* 左右中央表示 */
}

wrapperが左右中央表示になることで、wrapperブロックに包括されるheader、main、footerも結果として左右中央に表示されることになります。

デフォルトスタイルシートについて

自分で何もスタイルシートの設定をしていないのに、何かしらの装飾が行われているケースがあります。例えば、h1要素を使用したとき、自分でスタイルを設定しなくても太字、かつ大きめのフォントサイズになるはずです。ユーザエージェント（ブラウザなど）は、最初から標準でスタイルシートを設定しています。このブラウザが標準で設定しているスタイルシートのことを「デフォルトスタイルシート」と呼び、値はCSS仕様書に明記されています。

• ブラウザが標準で持っているスタイル設定について

背景の設定

body要素に背景色を設定します。今回は落ち着いた色合いの #F7F8F2 を採用しました。

background-color: #f7f8f2;

今までわかりやすさのためだけにつけていたheader、main、footerの装飾(borderとbackground-color)を削除して、ここまでの様子を見てみましょう。

全体に装飾を行ったサンプル文書

今回はCSSに数行修正を加えただけで、HTMLファイルに修正を行ってはいません。

→次のページ：装飾する（header ロゴ部分）

←前のページ：構造化を進めよう