この翻訳は不完全です。英語から この記事を翻訳 してください。

list-style-position プロパティは、主要ブロックボックス内のマーカーボックスの位置を指定します。

簡略 list-style を使うほうがしばしば便利です。

/* Keyword values */
list-style-position: inside;
list-style-position: outside;

/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;

初期値outside
適用対象 リスト項目
継承継承する
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

Note: This property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. Because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items.

Note: There is variance among browsers regarding behavior when a block element is placed first within a list element declared as list-style-position: inside. Chrome and Safari both place this element on the same line as the marker box, whereas Firefox, Internet Explorer and Opera place it on the next line. For more information on this, see バグ 36854.

構文

outside
マーカーボックスは主要ブロックボックスの外側に描画されます。
inside
マーカーボックスは主要ブロックボックスの最初のインラインボックスとなり、要素の内容はそれに続けて描画されます。

形式構文

inside | outside

HTML

<ul class="one"> 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="two"> 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="three"> 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

.one {
  list-style:square inside;
}

.two {
  list-style-position: outside;
  list-style-type: circle;
}

.three {
  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
  list-style-position: inherit;
}

結果

仕様

仕様書 策定状況 コメント
CSS Lists Module Level 3
list-style-position の定義
草案 変更なし
CSS Level 2 (Revision 1)
list-style-position の定義
勧告 初回定義

ブラウザー実装状況

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

関連情報

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

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