【list-style】リストマーク関連の設定をまとめて行う

list-styleプロパティでは、リスト項目のマークに関する各プロパティ(list-style-typelist-style-imagelist-style-position)の設定をまとめて行うことができます。

リスト項目のマークに関する各プロパティの内、必要な値を任意の順序で並べ、半角スペースで区切って指定します。 指定しなかった値については、そのプロパティの初期値が適用されます。

またlist-style-typelist-style-imageの両方の値を指定した場合は、list-style-imageに指定した画像ファイルの値が優先されます。

なおlist-styleの値にnoneを指定した場合は、list-style-typeとlist-style-imageの両方の値が「none」に設定されるため、リスト項目のマーク(マーカー)が表示されなくなります。

書式

  • list-style : ……… リストマークに関する指定をまとめて行う

★:list-style-typeの値、list-style-imageの値、list-style-positionの値、inherit

list-style-type
リストマークの種類を指定
list-style-image
リストマークの画像を指定
list-style-position
リストマークの位置を指定

※各プロパティの値について詳しくは、それぞれのページを参照下さい

使用した時の例

.sample1 {list-style:url(image.png) disc inside;}
.sample2 {list-style:none;}
<p>list-styleでは次のプロパティを一括で指定できます</p>
<ul class="sample1">
  <li>list-style-type(disc、circle、squareなど)</li>
  <li>list-style-image(画像のurl)</li>
  <li>list-style-position(outside、inside)</li>
</ul>

<p>noneを指定すると下記のようにマークが表示されなくなります</p>
<ul class="sample2">
  <li>list-style-type(disc、circle、squareなど)</li>
  <li>list-style-image(画像のurl)</li>
  <li>list-style-position(outside、inside)</li>
</ul>

ブラウザ上の表示例

list-styleでは次のプロパティを一括で指定できます

  • list-style-type(disc、circle、squareなど)
  • list-style-image(画像のurl)
  • list-style-position(outside、inside)

noneを指定すると下記のようにマークが表示されなくなります

  • list-style-type(disc、circle、squareなど)
  • list-style-image(画像のurl)
  • list-style-position(outside、inside)

対応ブラウザなどのデータ

初期値 個別のプロパティ参照 値の継承 継承する
適用可能な要素 li,「display:list-item」が指定されてる要素(ul,olに対し指定した場合は、内容のliに継承)
メディア visual / list
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報