ひなこの楽天web制作研究所

■昨日までの復習■

スタイルシートで、段落の回りに枠をつけるということをずっとやってきています。今回初めてご覧いただく場合は　枠（1）からご覧ください。

きのうの最後に

こんなのも紹介しました。

どうやって書くか、ちょっと考えてみて…。

枠線を左側と下側だけにつけますね

左側は　border-left
下側は　border-bottom

border-left: solid 20px #666600;
border-bottom: solid 2px #336633;

こんなふうに、左と下の線の太さと色を変えてみると↑のようになるわけです。

ソースを全部書くと

<p style="border-bottom: solid 2px #336633; border-left: solid 20px #666600;solid 2px #336633; padding: 5px; margin: 5px;">こんなのも紹介しました。</p>

色や太さ、線の種類なども工夫してみると面白いよ。

※でも、実際は、こういう風に見出しに枠を付けたい場合は、pタグじゃないものを使った方がいいんだよね。（それについてはのちほどの講義で）

★お知らせ＞ウェブセーフカラーの一覧表を2号のサイトにもつけました。←のよこのwebcolorを参照してみて！

---

■今日の講義■

枠そのものじゃないんですけど。枠の中、背景に色をつけてみましょうか。色はね。

background-color: #FF99CC;

のように指定します。

どの色が、どういう色かは、ここのウェブセーフカラーの一覧表を見てね。

背景色を指定すると、たとえばこんな見出し

見出しです

はどうでしょうか。　色の組み合わせや線の組み合わせを考えてみてね～。

今日はこの辺で～。