diff options
Diffstat (limited to 'files/ja/web/css/list-style/index.md')
-rw-r--r-- | files/ja/web/css/list-style/index.md | 158 |
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 +<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="/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> |