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

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

<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. 設定をしよう

  2. 横方向にセルを連結する

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

  4. 表を作る

  5. ページ全体を装飾する

  6. ウェブサイトを公開する方法

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

ランダムピックアップ