<body>~</body>をスタイルで指定

スタイルシートの作る手順とその効果がなんとなくわかりましたか?では、表示される部分つまり<body> ~  </body>の部分全体をスタイルシートでデザインするとどうなるでしょう?以下のように、前ページで作成したCSSファイルに以下のよう に追加してみましょう。

body {
line-height: 180%;  /*行送りの指定*/
margin: 0px;  /*マージンの指定*/
padding: 0px;  /*余白の指定*/
background-color: #EBEBD6;  /*背景色の指定*/
}
h1 {
color: #FFFFFF;
background-color: #669900;
padding: 15px;
text-align: center;
}
h2 {
color: #CC3300;
padding: 5px;
margin-left: 30px;  /*左マージンの指定*/
margin-right: 30px;  /*右マージンの指定*/
border-bottom-width: 2px;  /*下ボーダー幅の指定*/
border-bottom-style: dotted;  /*下ボーダースタイルの指定*/
border-bottom-color: #CC3300;  /*下ボーダー色の指定*/
}

どうですか?こんな風になりましたか?すべての行間が広くなって読みやすくなりましたね。ページもだんだんそれらしくなってきましたね。

続いてスタイルシートにこんな記述を追加してみましょう。

p {
padding-top: 0px;  /*上余白*/
padding-right: 35px;  /*右余白*/
padding-bottom: 0px;  /*下余白*/
padding-left: 35px;  /*左余白*/
}

こうなりましたか?<p> ~ </p>で囲まれた部分の左右の余白が出来ましたね。どんどん出来上がっていきますね。

では次のページでもう少しページを整頓してみましょう。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録