[CSS]見出しタグを画像でリッチに表現する方法

HTMLの見出しタグ（H1、H2、H3・・・）はよく使われるタグですし、見出しを付けてサイトを構成することは見やすいサイト作りの基本です。

今回はそんな見出しタグの背景に画像を表示して、リッチな見出しにする方法をご紹介します。

HTMLの内容は今回はH1タグで「いらっしゃいませ」を囲むだけのシンプルなものとします。変更するのはスタイルシートだけでHTMLは以下のままで、今回の表現の変更は可能です。

<h1>いらっしゃいませ</h1>

一番シンプルな見出しの装飾は線を引くことです。

何もスタイルシートを書いていない場合は文字だけです。

以下のようにスタイルシートを書いてみます。

h1 {
    border-bottom: 1px dotted rgb(255, 182, 182);
}

このように点線が下線として表示されます。

今回はborder-bottomと書いているので下に先が表示されていますが、borderだけ書けば囲み枠になります。top、left、rightも別途ありますので、いろいろ工夫してみると面白い囲み枠が作れると思います。

画像を使うとさらにリッチになりますので、次は画像を背景に表示する方法です。icon.pngがスタイルシートと同じディレクトリにある場合、以下のようにスタイルシートを書くと、背景にicon.pngが表示されます。no-repeatというのは1回表示するだけという意味です。

h1 {
    border-bottom: 1px dotted rgb(255, 182, 182);
    background: url(icon.png) no-repeat;
}

なんだか画像が全部表示されていません。あくまで文字列の背景なので大きさも文字サイズに依存することになります。

画像を全部表示したいので、paddingを使って調整してみます。paddingは上下左右の余白を設定することができます。しかし、設定値は上下左右の順番ではないのに注意です！順番は「上→右→下→左」で上から始まる時計回りと覚えると良いでしょう。

h1 {
    border-bottom: 1px dotted rgb(255, 182, 182);
    background: url(icon.png) no-repeat;
    padding: 30px 0px 10px 60px;
}

paddingで余白を調整したところ、画像も全部表示され、文字列は画像の中心から少し下に配置することができました。

このスタイルシートを読み込んでおけば、H1タグで文字列を囲むだけで、今回作った見出しが表示できます。

スタイルシートを駆使して素晴らしい見出しを作る方法もありますが、それはまたの機会に。

本日は以上です。