list-style

list-styleは、リストマーカーのスタイルを一括して指定するスタイルです。

解説

リスト項目に関するスタイルをまとめて指定する時に使用します。
指定できるスタイルは以下３つです。

値と値の間は半角スペースで区切って指定します。
値の順番に決まりはありません。
３つ全ての値を指定しなくてもOKです。

構文は以下になります。

list-style: typeの値 positionの値 imageの値;

値の順番はこの通りでなくとも構いません。

list-styleに指定できる値は、下記それぞれのページをご覧ください。


.sample01 {
  list-style:circle inside;
}


<ul class="sample01">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>


.sample02 {
  list-style:none url('image/arrow.png') inside;
}


<ul class="sample02">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>