全見出しの先頭にマーカー(画像)を加える 現実案
それでは、具体的な方法をご紹介致しましょう。
HTMLは、前回と全く同じものをそのまま使用します。
ですから、前回作成したページがあれば、そのまま使えます。
<h1>All About Japan</h1> <h2>パソコン・家電</h2> <h3>デスクトップパソコン</h3> <h3>ノートパソコン</h3> <h3>PDA</h3> <h2>ビジネス・キャリア</h2> <h3>IT関連の資格</h3> <h3>ビジネスへのネット活用</h3> <h3>フリーランス</h3>
そして、次のスタイルシートを加えます。 ここが本題です。
※スタイルシートは、HTMLファイルのhead要素（<head>～</head>内）に記述します。 詳しくは、記事「スタイルシートを記述する3つの方法」をご参照下さい。
h1 {
background-image: url( redstar.gif );
background-repeat: no-repeat;
background-position: left center;
padding-left: 32px;
}
h2 {
background-image: url( colorball.gif );
background-repeat: no-repeat;
background-position: left center;
padding-left: 23px;
margin-left: 1em;
}
h3 {
background-image: url( redball.gif );
background-repeat: no-repeat;
background-position: left center;
padding-left: 19px;
margin-left: 2.5em;
}
上記のスタイルシートで、すべての見出し（ここでは h1～h3 要素）の先頭に、画像が表示されます。
前回の方法では、各要素につき2行（マージンの記述を除けば1行）で記述できていましたが、 今回の方法では、5行（マージンの記述を除けば4行）必要です。
どうやって疑似要素を使わずに実現しているのか……については、次のページでご紹介いたします。
