CSS の list-style プロパティは一括指定で、リストスタイルプロパティの list-style-type, list-style-image, list-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 の定義
勧告 初回定義

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
symbols
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 35IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 完全対応 35Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

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

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