初心者の館

ステップ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;/*背景色*/
}

ポイント

ここでのポイントは、

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

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

確認

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

ステップ6終了時点

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

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


←前のステップへBACK : 次のステップへGO→


一覧へ戻る


Last Modified 2004-10-02 © きくちゃん 2004 - All Rights Reserved