【ホームページ作成】サイトマップページを作る

スタイルシートでリストを装飾する

リストが味気ないと感じるのは、各項目の先頭記号が黒丸や白丸などのシンプルな記号だからかもしれません。 リストの先頭記号は、自由な画像に変更可能です。スタイルシートを使って先頭記号を画像に置き換えてみましょう。

ここでは、星形「」の画像（star.gif）を用意しました。この画像をリストの先頭記号の代わりに表示するには、以下のようにスタイルシートを記述します。

リストを作るul要素（またはli要素）に対して list-style-imageプロパティを使うと、リストの先頭記号を画像に置き換えることができます。値には画像のURLを指定します。
上記のスタイルシートを使ってリストを表示すると、以下のように見えます。

上記のサンプルでは、先頭記号が星の画像「」に置き換わっているはずです。

階層ごとに先頭記号（画像）を分けたい

階層ごとに画像を変更すると、装飾が単調にならなくて良いでしょう。
例えば、以下の例では、階層ごとに3つの画像…

• 1階層目には「」(star.gif)、
• 2階層目には「」(allow.gif)、
• 3階層名には「」(note.gif)

を指定しています。

上記のように、階層ごとに装飾を分けるには、以下のようにスタイルシートを記述します。

(A)の記述で、ul要素で作られるリストの先頭記号を指定しています。
(B)の記述では、「ul要素の中に含まれるul要素」で作られるリストの先頭記号を指定しています。（つまり2階層目以降の先頭記号）
(C)の記述では、「『ul要素の中に含まれるul要素』に含まれるul要素」で作られるリストの先頭記号を指定しています。（つまり3階層目以降の先頭記号）

このように記述することで、階層ごとに装飾を変更できます。
なお、4階層目以降は、3階層目の装飾が使われます。もちろん、以下のように記述すれば4階層目の装飾が可能です。

最後に、サイトマップを作る上での注意点などをご紹介しておきます。

サイトマップの注意点へ >>