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

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

<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. “page2.html”へリンクする

  3. 縦方向にセルを連結する

  4. 【練習】このページを作りなさい

  5. FTPソフトを用いて公開する

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

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

ランダムピックアップ