3/3 CSSで見出しの頭に画像を加える(後編) [ホームページ作成] All About

全見出しの先頭にマーカー(画像)を加える現実案の解説

h1要素用もその他の見出し用も基本は一緒ですので、ここでは h1 用のスタイルだけを取り上げて説明します。

h1 {
    background-image: url( redstar.gif );
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 32px;
}

この方法は、疑似要素を使ってマーカー(画像)を先頭に加える代わりに、背景画像を前方向（左側）にのみ表示されるように指定し、マーカー分のスペースを前方向（左端）に空けることで、「マーカー」の表示を実現させています。

それでは、上記のスタイルを1行ずつ見ていきましょう。

◆background-image: url( skyblueball.gif );

ここで、見出しに背景画像を指定しています。この指定で、見出しの背景に画像「 skyblueball.gif 」が表示されます。

◆background-repeat: no-repeat;

前の行で指定した背景画像の表示方法として「繰り返さない(no-repeat)」方法を指定しています。画像は繰り返されないので、結局画像は1つしか表示されません。
これによって、マーカーとして画像が1つだけ表示されるようにしています。
※通常、何も指定しなければ、背景画像は領域一杯に繰り返して敷き詰められます。

◆background-position: left center;

ここで、背景画像の表示位置を指定しています。
マーカーに見えるように配置しないといけませんので、「左端(left)」の「（上下方向の）中央(center)」に表示されるよう指定しています。

例えば「right bottom」だと、右端の下端に表示されますし、「center center」だと、左右方向にも上下方向にも中央（つまり見出し領域の真ん中）に表示させることもできます。（それでは「マーカー」になりませんが。）
※ここでの指定は、数値を使って微調整も可能です。例えば、「 0% 40% 」と指定すれば、「左端から 0%、上端から 40% の位置」に表示させることができます。

◆padding-left: 32px;

最後に、見出しの中の文字列の開始位置をずらしています。この行を指定しないと、マーカーの画像（背景画像）と文字が重なってしまいます。使用する画像の横幅より1～2ピクセル程度広く取ればちょうど良いでしょう。
ここでは、画像の横幅が31ピクセルなので、32ピクセルほど空間を空けるよう指定しています。表示させる画像に合わせて調節して下さい。