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;

The 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
適用対象 リスト項目
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112143.51
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり124 ? ? あり

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: sutara79, momdo, teoli, SphinxKnight, Sebastianz, ethertank, sosleepy
最終更新者: sutara79,