list-style-position

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

list-style-position は CSS のプロパティで、リスト項目に対する ::marker の位置を指定します。

試してみましょう

多くの場合、一括指定の list-style を使ったほうが便利です。

メモ: このプロパティはリスト項目に対して適用されます。つまり、 display: list-item; が指定された要素です。既定では、 <li> 要素が該当します。このプロパティは継承されるので、親要素 (通常は <ol> や <ul>) に設定することで、すべてのリスト項目に適用することができます。

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

構文

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

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

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

値

inside

::marker はリスト項目の最初の要素として配置されます。

outside

::marker は主要ブロックボックスの外に配置されます。

公式定義

初期値outside
適用対象 リスト項目
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

list-style-position = 
  inside   |
  outside

例

リスト項目の位置の設定

HTML

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

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("starsolid.gif");
}

結果

仕様書

Specification
CSS Lists and Counters Module Level 3
# list-style-position-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報