ステップ6〜本文とリストの設定〜
ここでは本文とリストの設定をします。
すぐに終わってしまうので、できればコピーではなく、自分で書いてみましょう。
スタイルシートを書く
ではスタイルシートを書いてみましょう。
次のソースをコピーして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;/*背景色*/ }
ポイント
ここでのポイントは、
- paddingの使い方
- marginの使い方
の2つです。
ここでもう一度paddingとmarginの違いを確認しておきましょう。
paddingは枠線の内側に余白を作り、背景が適用されます。
marginは枠線の外側に余白を作り、背景は適用されません。
paddingとmarginの値の書き方はいろいろありますが、今回は一番分かりやすい形で書きました。
他の書き方はCSSテクニックで紹介したいと思います。
確認
できたらindex.htmlをブラウザーでどのように表示されるか見てみましょう。
あと一歩で完成ですね。
もうちょっとがんばって見たい人は、
paddingやmarginを追加してベストな余白の取り方を研究してみましょう。
次はボックスの見栄えを設定します。