画像とCSSを使った見出しの装飾

見出しの装飾は、凝れば凝るほど読みにくくなるような…でも何もしないと寂しいです。難しいですね。

スタイルだけでやる場合と画像を使ったやり方とあります。

スタイル（CSS）だけでの見出し装飾

.h4 { border-left:5px solid #48832C; padding:3px 15px; }

いろいろアレンジができます。

画像を使った見出し装飾

↑これがサンプルです。

. h4 {
font-size: 1.4em;
margin: 20px 0 20px 0em;
color: #8B4513;
padding-left: 1em;
background: url(images/h4.png) no-repeat 0px 0px ;
padding-bottom: 0px;
line-height: 2em;
}