にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

リストの先頭記号に任意の画像を指定する [イメージ,リスト]

ul要素とli要素を使って作る「リスト」(箇条書き)には、標準では各項目の先頭に黒丸や白丸などの記号が付きます。この記号は任意の画像に置き換えることもできます。リストの先頭記号を指定するにはlist-style-typeプロパティを使いましたが、リストの先頭記号として画像を指定するには、list-style-imageプロパティを使います。値に画像ファイルのURLを指定するだけで、リストの先頭を画像にできます。

例えば、「FingerAllowR.gif」というファイル名で「→」という画像を用意し、これをリストの先頭記号の代わりに表示させたい場合は、次のようにCSSソースを記述します。

ul {
   list-style-image: url("FingerAllowR.gif");
}

上記のスタイルを適用すると、ul要素に含まれる各項目(li要素)の先頭記号が、指(矢印)画像に置き換わります。もし指定した画像ファイルが読み込めなかった場合はデフォルトの記号で表示されます。
実際に表示させると、以下のように見えます。

  • 箇条書きリストの先頭記号を画像にします
  • こんな感じで画像ファイルがリスト記号の代わりに使われます
  • 箇条書きの内容に合わせた画像を使うと良いでしょう

ただ、古いバージョンのブラウザによっては、画像が必ずしも(上下方向の)中央に配置されるとは限らないようで、これがちょっと困った点でした。その点を解決すべく、list-style-imageプロパティではなく、background-imageなどを使って、「左端に配置した背景画像」を使ってリストの先頭記号のように見せる方法もよく使われてきた気がします。もっとも、今となってはブラウザ間の表示の差は小さくなったので、何も気にせずにlist-style-imageプロパティを使えば良いと思いますが。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---