スタイルシート（CSS）基礎講座
<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>で囲まれた部分の左右の余白が出来ましたね。どんどん出来上がっていきますね。
では次のページでもう少しページを整頓してみましょう。
