blob: eed88a0ddaf9f6a40c5b8f73e0aa608fb5640af3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: list-style
slug: Web/CSS/list-style
tags:
- CSS
- CSS プロパティ
- CSS リスト
- Reference
- list-style
- list-style-image
- list-style-position
- list-style-type
- リファレンス
translation_of: Web/CSS/list-style
---
<div>{{CSSRef}}</div>
<p>CSS の <strong><code>list-style</code></strong> プロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>で、リストスタイルプロパティの {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}} を設定します。</p>
<div>{{EmbedInteractiveExample("pages/css/list-style.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<div class="note">
<p><strong>メモ:</strong> このプロパティはリスト項目、すなわち <code>{{cssxref("display")}}: list-item;</code> の要素に適用されます。<a href="https://www.w3.org/TR/html5/rendering.html#lists">既定では</a> {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素（ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}）に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<p><code>list-style</code> プロパティは1～3つのキーワードを任意の順序で指定します。 {{cssxref("list-style-type")}} と {{cssxref("list-style-image")}} が両方とも設定された場合、 <code>list-style-type</code> は画像が利用できない場合の予備として使用されます。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt>{{cssxref("list-style-type")}}</dt>
<dd>{{cssxref("list-style-type")}} を参照して下さい。</dd>
<dt>{{cssxref("list-style-image")}}</dt>
<dd>{{cssxref("list-style-image")}} を参照して下さい。</dd>
<dt>{{cssxref("list-style-position")}}</dt>
<dd>{{cssxref("list-style-position")}} を参照して下さい。</dd>
<dt><code>none</code></dt>
<dd>リストスタイルは使用されません。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.one {
list-style: circle;
}
.two {
list-style: square inside;
}</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample('Examples', 'auto', 220)}}</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
<p>Safari は順序なしリストで <code>list-style</code> の値に <code>none</code> が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前に<a href="https://ja.wikipedia.org/wiki/%E3%82%BC%E3%83%AD%E5%B9%85%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9">ゼロ幅スペース</a>を<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">擬似コンテンツ</a>として追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。</p>
<pre class="brush: css">ul {
list-style: none;
}
ul li::before {
content: "\200B";
}
</pre>
<ul>
<li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver and list-style-type: none – Unfettered Thoughts</a></li>
<li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN "WCAG を理解する ― ガイドライン 1.3 の解説"</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}</td>
<td>{{Spec2('CSS3 Lists')}}</td>
<td>変更なし。</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<p>{{Compat("css.properties.list-style")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
</ul>
|
