aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/list-style/index.md
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web/css/list-style/index.md')
-rw-r--r--files/ja/web/css/list-style/index.md158
1 files changed, 158 insertions, 0 deletions
diff --git a/files/ja/web/css/list-style/index.md b/files/ja/web/css/list-style/index.md
new file mode 100644
index 0000000000..72fbb70159
--- /dev/null
+++ b/files/ja/web/css/list-style/index.md
@@ -0,0 +1,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
+&lt;ul class="one"&gt;
+ &lt;li&gt;List Item1&lt;/li&gt;
+ &lt;li&gt;List Item2&lt;/li&gt;
+ &lt;li&gt;List Item3&lt;/li&gt;
+&lt;/ul&gt;
+List 2
+&lt;ul class="two"&gt;
+ &lt;li&gt;List Item A&lt;/li&gt;
+ &lt;li&gt;List Item B&lt;/li&gt;
+ &lt;li&gt;List Item C&lt;/li&gt;
+&lt;/ul&gt;
+</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="/ja/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>