それでは、いよいよ確認問題です。
つぎの、定義を設定して、下にあるようなボックスをつくってみてください。
背景画像は、
下よりで、
ｘ軸方向に繰り返して、
枠線のカラーは、
#FF99CC。
線種は、
実線（solid）を。
太さは、
1pxで、枠線については、一括で定義してください。
全体の大きさは、
横幅 400px、
縦幅 22px。
パディングで、
上から 2px、
左から 5px離してください。
テキストは、
太字に、
カラーを
#FF6699に。
背景画像は、↓をつかってください。
見出しとかでつかえます♪
.box1{
background:url(img/haikei3.gif);
background-position:bottom;
background-repeat:repeat-x;
border: solid #FF99CC 1px;
width: 393px;
height: 18px;
padding: 2px 0px 0px 5px;
font-weight: bold;
color:#FF6699;
}
これまでの確認も含めた問題になってますね。
今回、問題でつくってもらったボックスは、
スタイルシートと、背景画像でつくった、見出しとかにも使えそうなボックスです。
テキストを変えれば書き換えることができますから、
いちいち画像を作り変えて、見出しを変更するという、
めんどうな作業をカットできると思います。
とりあえず、ここまで練習問題をこなしてもらいましたが、
これだけできれば、間違いなくスタイルシート初心者ではないと思います。
次の問題から、いよいよスタイルシートでのレイアウトに必要なテクニックを、
練習してもらうことになるんですが、
いままでやってきたことと、あわせてマスターすることで、
スタイルシートでのサイト作成が格段にレベルアップするはずだと思います。）
