list-style
CSS の list-style
プロパティは一括指定で、リストスタイルプロパティの list-style-type
, list-style-image
, list-style-position
を設定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* 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-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
- リストスタイルは使用されません。
形式文法
例
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 の定義 |
勧告 | 初回定義 |
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | リスト項目 |
継承 | あり |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 離散値 |
ブラウザーの対応
BCD tables only load in the browser