Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

list-style-position

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

概要

list-style-position は、主要ブロックボックス (principal block box) 内のマーカーボックスの位置を設定する CSS プロパティです。このプロパティと、関連する他のプロパティを同時に指定するのに便利な list-style というプロパティも存在します。

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

構文

inside | outside

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

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

Result

仕様

仕様書 策定状況 コメント
CSS Lists and Counters Module Level 3
The definition of 'list-style-position' in that specification.
草案 変更なし
CSS Level 2 (Revision 1)
The definition of 'list-style-position' in that specification.
勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

注意:list-style-position:inside の定義がされたリスト要素内に、初めにブロック要素が置かれた時の挙動は、ブラウザによって異なります。
Chrom と Safari はどちらもマーカーボックスと同じ行にこの要素を置きます。Firefox、Internet Explorer、Operaは次の行に置きます。この件についての詳しい情報は Mozilla Bug reportこちらの例 をご覧ください。

関連情報

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

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