リストマークに画像を使用する
CSSの書き方
list-style-image:url(画像のURI) ;
|
|||||||||||||||||||||||||||||||||||||||||
解説
「list-style-image」プロパティは、リストマークに画像を使うためのスタイルシートです。
指定方法
「list-style-image:url(画像ファイルのURI);」のように、リストマークに使用したい画像へのパスを相対パスもしくは絶対パスで記述します。
相対パスの場合基準となるディレクトリは、CSSを外部から読み込んでいる場合は、CSSが格納されているディレクトリ、HTMLに直接CSSを指定している場合は、そのHTMLが格納されているディレクトリとなります。
また、「list-style-image:none;」のように初期値で指定すると、リストマークは「list-style-type」プロパティで指定している種類が表示されます。
優先度
要素に、「list-style-type」プロパティと「list-style-image」プロパティを同時に指定することも可能です。この場合は、「list-style-image」プロパティが優先されて表示されます。
マークの表示位置
「list-style-image」プロパティは、リストマークを表示する位置までは指定することができません。表示位置を変えたい場合は、このプロパティではなく、「background-image」プロパティと「background-position」プロパティを使うと上手く指定できます。
CSS/HTMLサンプル
ul { list-style-image:url(../../img/list8.gif); }
リストマーク（ul要素）に画像を指定 サンプル
