(ウ) 画像を使わずにセンスある見出しを作る

何やらすごい名前になっていますが(笑)
ここでは、<h3>の装飾を行いたいと思います。
ひさびさの新しいCSSの装飾の登場です。

h3 {
 height: 25px;
     border-bottom: 2px #669966 solid;
 border-left: 5px #669966 solid;
   margin: 0 0 20px 20px;
    padding: 3px 0 0 5px;
}

ここで注目すべきなのは、borderです。
なんとこれ、今まで見えない四角といっていたものが、見えるようになるんです。

いつも通り、図にしますと

詳しく見てみます。

border-bottom: 2px #669966 solid;

「border-位置（上・右・下・左）：線の太さ線の色線のスタイル；」
という仕組みになっています。

また、この中で出てきたことがないのが、線のスタイルですが、フォント（font-family）のときと同様、いくつか種類があります。

・solid：一本線
・double：二本線
・groove：くぼみ
・ridge：立体
・dashed：破線
・dotted：点線

まだ、ふたつほどありますが、基本的にはこんな感じです。

では、下のように表示されたなら

次に進みましょう。

あなたも、サポートメールに参加しませんか？

『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。
ここでは、『初めてWeb入門』では紹介し切れなかったウェブデザインの知恵を配信しています。
名前とメールアドレスだけで参加出来ますので、興味のある方は、ぜひご参加くださいね＾＾

※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。