コピー・ペーストですぐに使える見出しのサンプル集です。
色や文字の大きさ、余白など全てお好みに応じて改変してください。サンプルと同じ画像を使う場合のみリンクウェアとします。

このエントリーにあるサンプルはInternet Exploler7～、FireFox、Chrome、Safariで動作確認をしています。

画像を下線状に配置した見出し

サンプル

CSSのみだと直線、破線、点線、二重線など限られますが、シームレスパターンを下線のように装飾したものです。
これも色々な印象を演出できます。
使用した画像はこちら。

HTML

<h2 id="midashi1">サンプル</h2>

CSS

#midashi1{
	background: url(画像ＵＲＬ) repeat-x bottom left;
	padding-bottom: 10px;
	color: #66cdaa;}

頭に画像を配置した見出し

サンプル

背景色と頭に画像を指定した見出しです。
使用した画像はこちら。

HTML

<h2 class="midashi2">サンプル</h2>

CSS

#midashi2{
	padding:4px 15px;
	background:url(画像ＵＲＬ) left center no-repeat #efeef0;
	margin:10px 0;}