--- title: list-style-position slug: Web/CSS/list-style-position tags: - CSS - CSS プロパティ - CSS リスト - Reference - list-style - list-style-position translation_of: Web/CSS/list-style-position ---
{{CSSRef}}

CSS の list-style-position プロパティは、リストアイテムに対する {{cssxref("::marker")}} の位置を指定します。

{{EmbedInteractiveExample("pages/css/list-style-position.html")}}

多くの場合、一括指定の {{cssxref("list-style")}} を使うほうが便利です。

メモ: このプロパティはリストアイテムに対して適用されます。つまり、 {{cssxref("display")}}: list-item; が指定された要素です。既定では、 {{HTMLElement("li")}} 要素を含みます。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリストアイテムに適用することができます。

メモ: list-style-position: inside を指定したリスト要素の中で最初にブロック要素が配置された場合、その動作はブラウザーによって異なります。 Chrome と Safari では、この要素はマーカーボックスと同じ行に配置されますが、 Firefox、 Internet Explorer、 Opera では次の行に配置されます。 詳細については {{bug(36854)}} をご覧ください。

構文

/* キーワード値 */
list-style-position: inside;
list-style-position: outside;

/* グローバル値 */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;

list-style-position プロパティには、下記の値の中の一つが指定されます。

値

inside
{{cssxref("::marker")}} はリストアイテムの最初の要素として配置されます。
outside
{{cssxref("::marker")}} は主要ブロックボックスの外に配置されます。

形式文法

{{csssyntax}}

例

HTML

<ul class="inside">List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="outside">List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="inside-img">List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>

CSS

.inside {
  list-style-position: inside;
  list-style-type: square;
}

.outside {
  list-style-position: outside;
  list-style-type: circle;
}

.inside-img {
  list-style-position: inside;
  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
}

結果

{{EmbedLiveSample("Examples", 200, 420)}}

仕様書

仕様書 状態 備考
{{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}} {{Spec2('CSS3 Lists')}} 変更なし
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}} {{Spec2('CSS2.1')}} 初回定義

{{cssinfo}}

ブラウザーの対応

{{Compat("css.properties.list-style-position")}}

関連情報