概要へ移動

このページで解説するコードの実行結果。

画像 その１
  • 牛丼
  • かつ丼
  • 親子丼
画像 その２
  • 牛丼
  • かつ丼
  • 親子丼
線形グラデーション
  • 牛丼
  • かつ丼
  • 親子丼
円形グラデーション
  • 牛丼
  • かつ丼
  • 親子丼
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
li {

    font-size: 1.5em; /* 文字の大きさ */

}
HTML : 適用するHTML
<ul class="parent">

    <li>牛丼</li>

    <li>かつ丼</li>

    <li>親子丼</li>

</ul>
実行結果
  • 牛丼
  • かつ丼
  • 親子丼

list-style-imageの概要

<li>要素のマーカーに画像ファイルを設定する

親要素である<ol> or <ul>要素に設定する。

指定するのは、画像ファイルのURL。（デフォルト値はnone）

例。

CSS : list-style-imageを設定
.parent  {

    list-style-image: url( '/img/list-style-image1.png' );

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼

画像ファイルを変更してみる。

CSS : 画像ファイルを変更
.parent  {

    list-style-image: url( '/img/list-style-image2.png' );

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼

list-style-typeとの併用

list-style-typeプロパティも同時に指定した場合、記述の順番に関わらずlist-style-imageが優先される。

CSS : list-style-typeも併用
.parent  {

    list-style-image:   url( '/img/list-style-image2.png' );

    list-style-type:     square;

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼

もしも、（list-style-imageの）画像ファイルが見つからない場合、list-style-typeの設定になる。

※ 以下は/img/list-style-image3.pngファイルが無い場合の結果。

CSS : 画像ファイルが無い場合
.parent  {

    list-style-image:   url( '/img/list-style-image3.png' );

    list-style-type:     square;

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼

グラデーションをつける

linear-gradient()やradial-gradient()を使って、グラデーションをつけることもできる。

ただし、Firefoxが対応していない。

CSS : 線形グラデーション
.parent  {

    list-style-image:  linear-gradient( 300deg, red, yellow );

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼
CSS : 円形グラデーション
.parent  {

    list-style-image:  radial-gradient( yellow, red );

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼

対応していないブラウザ用にlist-style-typeを指定しておくと良いだろう。

CSS : list-style-type
.parent  {

    list-style-image:  linear-gradient( 300deg, red, yellow );

    list-style-type:   square;

}
実行結果
  • 牛丼
  • かつ丼
  • 親子丼

Emmet : lisi

記述Visual Studio Code
lisilist-style-image: ;