文字部分のスタイルを定義

<< 前のページ グループ分けとスタイルシート記述

前のページまでは、レイアウトのスタイルを定義しました。次は、各文字列のスタイルを定義していきます。前のページで作成したスタイルシートに追記していく形となります。(ここでは、追記部分のみ紹介します。)

下図と下記ソースは対応しています。
主に、padding(内余白)、margin(外余白)、font-size(文字の大きさ)、line-height(文字の高さ間隔)、border(境界線)、color(色)の6つのみ使用しています。
この組み合わせだけで、より凝ったスタイルを定義することが可能ですから、いろいろ値を変更してみて自分の好きなスタイルを作成してみましょう。

文字部分のスタイル

#header h1 {
font-size:28px;
color:#000000;
padding:0 10px;
}

#header p {
font-size:12px;
padding:3px 10px;
background-color:#ffffff;
border-top:solid 1px #000000;
border-bottom:solid 1px #000000;
}

#content h2 {
font-size:16px;
border-left:solid 10px #0099FF;
border-bottom:solid 1px #0099FF;
background-color:#eeffff;
padding:4px 5px;
margin:10px 10px;
color:#000000;
}

#content p {
font-size:12px;
margin:10px 10px;
line-height:18px;
}


#sidebar form {
padding: 0 10px;
}

#sidebar h3 {
font-size:16px;
border-left:solid 10px #0099FF;
border-bottom:solid 1px #0099FF;
background-color:#eeffff;
padding:3px 5px;
margin:10px 10px;
color:#000000;
}

#sidebar ul{
margin:0 10px;
padding:0;
}

#sidebar li{
margin-left:18px;
font-size:12px;
line-height:15px;
padding:5px 0;
}

#footer p {
font-size:12px;
color:#000000;
}

#footer a {
color:#000000;
}
#footer a:hover {
color:#990000;
}


次のページ >> メインページ作成:グループを記述する

▲ページトップへ