ステップ６〜本文とリストの設定〜

ここでは本文とリストの設定をします。
すぐに終わってしまうので、できればコピーではなく、自分で書いてみましょう。

スタイルシートを書く

ではスタイルシートを書いてみましょう。
次のソースをコピーしてstyle.cssに貼り付けてください。

p{
    padding-top:0em;/*上の詰め0文字分*/
    padding-bottom:0em;/*下の詰め0文字分*/
    padding-left:4em;/*左の詰め4文字分*/
    padding-right:4em;/*右の詰め4文字分*/
    background-color:#FFFFFF;/*背景色*/
}
ul{
    padding-left:8em;/*左の詰め8文字分*/
    margin-left:4em;/*左の余白4文字分*/
    background-color:#FFFFCC;/*背景色*/
}

ポイント

ここでのポイントは、

1. paddingの使い方
2. marginの使い方

の２つです。
ここでもう一度paddingとmarginの違いを確認しておきましょう。
paddingは枠線の内側に余白を作り、背景が適用されます。
marginは枠線の外側に余白を作り、背景は適用されません。
paddingとmarginの値の書き方はいろいろありますが、今回は一番分かりやすい形で書きました。
他の書き方はCSSテクニックで紹介したいと思います。

確認

できたらindex.htmlをブラウザーでどのように表示されるか見てみましょう。

ステップ６終了時点

あと一歩で完成ですね。
もうちょっとがんばって見たい人は、
paddingやmarginを追加してベストな余白の取り方を研究してみましょう。

次はボックスの見栄えを設定します。