最終更新日:
公開日:
リファレンス
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
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。