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.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

list-style: square;

list-style: inside;

list-style: url("/shared-assets/images/examples/rocket.svg");

list-style: none;

list-style: georgian inside url("/shared-assets/images/examples/rocket.svg");

list-style: georgian outside url("/non-existent.svg");

<section class="default-example" id="default-example">
  <div>
    <p>NASA Notable Missions</p>
    <ul class="transition-all" id="example-element">
      <li>Apollo</li>
      <li>Hubble</li>
      <li>Chandra</li>
      <li>Cassini-Huygens</li>
      <li>Spitzer</li>
    </ul>
  </div>
</section>

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

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

構文

css

/* type */
list-style: square;

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

/* position */
list-style: inside;

/* 2 つの値 */
list-style: georgian outside;
list-style: url("img/pip.svg") inside;

/* 3 つの値 */
list-style: lower-roman url("img/shape.png") outside;

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

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

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

値

list-style-type: <counter-style>、<string>、none のいずれかです。一括指定で省略された場合は、既定値の disc の値が使用されます。 list-style-type を参照して下さい。
list-style-image: <image> または none です。省略された場合、既定値の none が使用されます。 list-style-image を参照して下さい。
list-style-position: inside か outside のどちらかです。省略された場合、list-style-position を参照して下さい。
none: リストスタイルは使用されません。

公式定義

初期値	一括指定の次の各プロパティとして `list-style-type`: `disc` `list-style-position`: `outside` `list-style-image`: `none`
適用対象	リスト項目
継承	あり
計算値	一括指定の次の各プロパティとして `list-style-image`: The keyword `none` or the computed <image> `list-style-position`: 指定通り `list-style-type`: 指定通り
アニメーションの種類	一括指定の次の各プロパティとして `list-style-image`: 離散値 `list-style-position`: 離散値 `list-style-type`: 離散値

形式文法

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

アクセシビリティ

Safari では、 list-style 値が none である場合、それが <nav> のナビゲーション要素内に含まれていない限り、順序付きリストまたは順序なしリストをアクセシビリティツリー内のリストとして認識しません。これは意図的な動作であり、バグと認識されていません。

リストを確実にリストとしてアナウンスするようにするには、 role="list" を <ol> および <ul> 要素に設定しておください。特に、このリストが <nav> に含まれていない場合はなおさらです。これによって、デザインに影響を与えることなく、リストの意味を回復することができます。

html

<ul role="list">
  <li>アイテム</li>
  <li>他のアイテム</li>
</ul>

ARIA role がコードに適さない場合は、代わりに CSS を使用することができます。各リストアイテムの前に、テキストや画像などの空ではない擬似コンテンツを追加すると、リストの意味を復元できますが、視覚的な外観に影響します。 Safari は、追加された擬似コンテンツがアクセシビリティのあるコンテンツとして十分かどうかを判断し、十分であればリストの意味を復元します。通常、 Safari はテキストと画像で十分であるとみなします。そのため、以下に示す content: "+ "; が機能します（ただし、デザインに影響を与えないようにするには、追加のスタイル設定が必要です）。

css

ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}

content: ""; （空文字列）の宣言は無視されます。また、 content の値は content: " "; のように空白だけの場合も無視されます。

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

例

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

HTML

html

リスト 1
<ul class="one">
  <li>リストアイテム 1</li>
  <li>リストアイテム 2</li>
  <li>リストアイテム 3</li>
</ul>
リスト 2
<ul class="two">
  <li>リストアイテム A</li>
  <li>リストアイテム B</li>
  <li>リストアイテム 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