We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

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

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

構文

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;
}

結果

仕様

仕様 状況 コメント
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,