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