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

何やらすごい名前になっていますが(笑)
ここでは、

<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:点線

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

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


次に進みましょう。


関連記事

  1. “id”属性と”class”属性

  2. リンクをする

  3. 代替テキストを表示する

  4. 小見出しをつける

  5. ブロックの余白を指定する

  6. タグへ対する装飾

お手本ナビの無料HPデザイン

ランダムピックアップ