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-positionCSS のプロパティで、リストアイテムに対する ::marker の位置を指定します。

試してみましょう

構文

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

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

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

inside

::marker はリストアイテムの最初の要素として配置されます。

outside

::marker は主要ブロックボックスの外に配置されます。これは list-style の既定値です。

解説

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

ブロック要素が list-style-position: inside の宣言されたリスト要素の最初の子である場合、そのブロック要素はマーカーボックスの次の行に配置されます。

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

公式定義

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

形式文法

list-style-position = 
inside |
outside

リストアイテムの位置の設定

HTML

html
<ul class="inside">
  リスト 1
  <li>リストアイテム 1-1</li>
  <li>リストアイテム 1-2</li>
  <li>リストアイテム 1-3</li>
  <li>リストアイテム 1-4</li>
</ul>
<ul class="outside">
  リスト 2
  <li>リストアイテム 2-1</li>
  <li>リストアイテム 2-2</li>
  <li>リストアイテム 2-3</li>
  <li>リストアイテム 2-4</li>
</ul>
<ul class="inside-img">
  リスト 3
  <li>リストアイテム 3-1</li>
  <li>リストアイテム 3-2</li>
  <li>リストアイテム 3-3</li>
  <li>リストアイテム 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("star-solid.gif");
}

結果

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
list-style-position
inside
outside

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報