CSS の list-style プロパティは、リストをどのように表示するかを定義する list-style-typelist-style-imagelist-style-position のそれぞれの値を設定する一括指定プロパティです。

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

構文

/* 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: unset;

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

list-style-type
list-style-type を参照して下さい。
list-style-image
list-style-image を参照して下さい。
list-style-position
list-style-position を参照して下さい。
none
リストスタイルは使用されません。

形式文法

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

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

.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

結果

アクセシビリティの考慮事項

Safari は順序なしリストで list-style の値に none が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前にゼロ幅スペース擬似コンテンツとして追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。

ul {
  list-style: none;
}

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

仕様書

仕様書 状態 備考
CSS Lists Module Level 3
list-style の定義
草案 変更なし。
CSS Level 2 (Revision 1)
list-style の定義
勧告 初回定義。

初期値一括指定の各プロパティとして
適用対象 リスト項目
継承あり
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121471
symbols なし ?35 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 あり12461 あり
symbols なし なし ?35 なし なし なし

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, momdo, sii, teoli, SphinxKnight, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,