HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

リスト スタイル イメージ

list-style-imageプロパティ

ul要素、ol要素などのリストに対し、画像を指定するためのプロパティです。

  • 初期値

    none

  • 継承

    継承あり

  • 適用できる要素

    全要素

次のような値を設定することができます。

  • none – 画像なし
  • url() – 画像のパスを指定します

パターン1

星の画像をリストのアイコンに指定している例です。ul要素に指定しています。

CSSコード例

ul {
	list-style-image: url(http://gc.localhost/wp-content/uploads/2016/08/icon_star.png);
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン2

li要素に指定することも可能なので、リストの1つ目のみに別画像を適用することもできます。

CSSコード例

ul {
	list-style-image: url(http://gc.localhost/wp-content/uploads/2016/08/icon_star.png);
}
ul li:first-child {
	list-style-image: url(http://gc.localhost/wp-content/uploads/2016/08/icon_star_orange.png);
}

表示例:

  • リスト1
  • リスト2
  • リスト3

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。