list-style-position

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

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

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

メモ: list-style-position: inside を指定したリスト要素の中で最初にブロック要素が配置された場合、その動作はブラウザーによって異なります。 Chrome と Safari では、この要素はマーカーボックスと同じ行に配置されますが、 Firefox、 Internet Explorer、 Opera では次の行に配置されます。 詳細については バグ 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
::marker はリストアイテムの最初の要素として配置されます。
outside
::marker は主要ブロックボックスの外に配置されます。

形式文法

inside | outside

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");
}

結果

仕様書

仕様書 状態 備考
CSS Lists Module Level 3
list-style-position の定義
草案 変更なし
CSS Level 2 (Revision 1)
list-style-position の定義
勧告 初回定義

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

ブラウザーの対応

BCD tables only load in the browser

関連情報