スタイルシートで作る

それぞれつけた名前への命令をルールに従ってスタイルシートへ記述していきます。

では実際に先ほど作成したCSSのテキストに実際に記述してみましょう。

まずは、全体を囲んでいる１のallから記述してみましょう。

横幅を800ピクセルに設定したいので、width:800px;と記述します。

次に、最上部の２のhedderです。

ここは、横幅を800ピクセルで高さを80ピクセル、カラーを黄色にしたいので下のように記述します。

次に、中央の３のcontentの記述です。

hedderと同じ800ピクセルにします。

そして、中央の右側部分の４、txtです。

ここは３のcontent内で右側に回り込んでいるので、floatプロパティのrightを使用します。

さらに高さを500px,txtの内側（padding）に10ピクセルのスペースとボーダー左部分に赤の点線を入れたいので、 height:500px,padding:10px;と border-left:1px #FF0000 dotted;を記述します。

最下部の５、footerは２のhedderと同じように幅、高さ、カラーを記述します。

次は、中央左部分の６のnaviです。

これは左側に回り込んでいるので、floatプロパティのleftを使用します。

そしてボーダーの内側（padding）の上と左に10ピクセルのスペースをとりたいので、padding:10px 0px 0px 10pxを記述します。

そして、６のnaviの中にある７、btnです。

これは沢山ありますが、１つ分の記述でOKです。

これに、左に10ピクセルの紫のラインと、下に1ピクセルの黄色の点線、そしてパディングの左側に8ピクセルのスペースを加えます。（横幅が６のnaviの"幅200px-パディング10px=190px"を超えてしまわないように横幅からパディングの分を引いておきましょう。）

最後に、ｔｘｔ部分に入る文字のタイトル部分と内容部分の記述もしておきましょう。

まず、タイトル部分です。フォントサイズを16pxの太字にしたいので、font-size:16px; font-weight:bold;と記述します。

さらに左側に10pxのラインを、パディング左側に8pxのスペースを入れます。

次に内容部分です。ここは上下に10pxスペースを開けて赤の点線を下に入れてみます。

これでCSSへの記述は終了です。

下の図のように記述できたでしょうか？

fontや横幅の指定忘れの他に「；」や｛｝も忘れやすいので、よくチェックしておきましょう。

さあ、ここまで来たら、あと少しです。次はいよいよスタイルシートをHTML文書に適用させていきます。