HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


リストマークに画像を使用する

CSSの書き方

list-style-image:url(画像のURI) ;

CSSの詳細情報
プロパティ名 list-style-image 読み方 リスト・スタイル・イメージ
初期値 none 意味 リストマークの画像指定
画像へのパス
対象 li要素など(dislplay:list-item;と指定した要素を含む)
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 する IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「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要素)に画像を指定 サンプル