Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

list-style-position

li要素及び、『display』プロパティが『list-item』または『inline-list-item』と指定されている要素のマーカーの表示位置を指定します。

サンプルコード

li.test { list-style-position: outside;}
li.test1 { list-style-position: inside;}

指定可能な値一覧

値	概要
outside	マーカーは外側に描写されます。この『outside』が初期値です。
inside	マーカーは内側に描写されます。その際のマーカーはその要素の最初のインラインボックスとして描写されます。

ブラウザでの表示結果

<ul style="list-style-position: outside; list-style-type: disc;">
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
</ul>

<ul style="list-style-position: inside; list-style-type: disc;">
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
</ul>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

li要素及び、『display』プロパティが『list-item』または『inline-list-item』と指定されている要素のマーカーの表示位置を指定します。

値に『inside』と指定した場合はその要素の最初のインラインボックスとして描写されますのでご注意ください。

<ul style="list-style-position: inside; list-style-type: disc;">
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
	<li>ここはli要素です。</li>
</ul>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル