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

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

<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. 骨格を作る言語HTML

  2. 小見出しをつける

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

  4. デザインをする言語CSS

  5. CSSの基本構造

  6. 表を作る

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

ランダムピックアップ