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 ⁨2015年7月⁩.

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

試してみましょう

list-style-position: inside;

list-style-position: outside;

<section class="default-example" id="default-example"> <div> <p>NASA Notable Missions</p> <ul class="transition-all" id="example-element"> <li>Apollo 11: First Human Landing</li> <li>City in Space: The International Space Station</li> <li>Great Observatory: The Hubble Space Telescope</li> <li>Everlasting Mars Rovers</li> </ul> </div> </section>

.default-example { font-size: 1.2rem; } #example-element { width: 100%; background: #be094b; color: white; } section { text-align: left; flex-direction: column; } hr { width: 50%; color: lightgray; margin: 0.5em; } .note { font-size: 0.8rem; } .note a { color: #009e5f; } @counter-style space-counter { symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D"; suffix: " "; }

構文

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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1970年1月1日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content