list-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

list-style は CSS の一括指定プロパティで、リストのすべてのスタイルプロパティを設定します。

試してみましょう

メモ: このプロパティはリスト項目、すなわち display: list-item; の要素に適用されます。既定では <li> 要素が含まれます。このプロパティは継承されるので、親要素 (ふつうは <ol> または <ul>) に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* type */
list-style: square;

/* image */
list-style: url("../img/shape.png");

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url("../img/shape.png") outside;

/* キーワード値 */
list-style: none;

/* グローバル値 */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

list-style プロパティは 1 つ、2 つ、3 つのキーワードを任意の順序で指定します。 list-style-type と list-style-image が両方とも設定された場合、 list-style-type は画像が利用できない場合の予備として使用されます。

値

list-style-type

list-style-type を参照して下さい。

list-style-image

list-style-image を参照して下さい。

list-style-position

list-style-position を参照して下さい。

none

リストスタイルは使用されません。

アクセシビリティの考慮

注意すべき例外として、Safari は順序なしリストで list-style の値に none が適用されると、アクセシビリティツリー上でリストとして認識しません。

この問題に対処する最も簡単な方法は、明示的に role="list" をマークアップ内の <ul> 要素に追加することです。これにより、デザインに影響を与えることなく、リストの意味を復元することができます。

マークアップを変更できない場合の CSS のみの解決策もあります。一つは、それぞれのリスト項目の前にゼロ幅スペースを擬似コンテンツとして追加することです。

css
ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}

もう一つは、 list-style プロパティに url の値を適用する方法です。

css
nav ol,
nav ul {
  list-style: none;
}

/* こうします */

nav ol,
nav ul {
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}

これらの CSS による回避策は HTML での解決ができない場合のみに使用してください。また、ユーザーの使い勝手に悪影響を与えないことをテストした後にのみ使用してください。

公式定義

初期値一括指定の次の各プロパティとして
適用対象 リスト項目
継承あり
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

list-style = 
  <'list-style-position'>  ||
  <'list-style-image'>     ||
  <'list-style-type'>      

<list-style-position> = 
  inside   |
  outside  

<list-style-image> = 
  <image>  |
  none     

<list-style-type> = 
  <counter-style>  |
  <string>         |
  none             

<image> = 
  <url>       |
  <gradient>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<url> = 
  <url()>  |
  <src()>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

例

リストスタイルの種類と位置の設定

HTML

html
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

CSS

css
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

例

仕様書

Specification
CSS Lists and Counters Module Level 3
# list-style-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報