Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
list-style-position

list-style-position

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

サンプルコード

style.css

/* マーカーをコンテンツ領域の外側に配置（初期値） */
li.test { list-style-position: outside;}

/* マーカーをコンテンツ領域の内側に配置 */
li.test1 { list-style-position: inside;}

/* inside の使い方：li要素にパディングをつけてもマーカーが内側に収まる */
ul.boxed li {
    list-style-position: inside;
    padding: 8px 16px;
    background-color: #f5f5f5;
    margin-bottom: 4px;
}

/* outside（デフォルト）: テキストが折り返してもマーカーの下に揃う */
ul.standard li { list-style-position: outside; padding-left: 20px;}

指定可能な値一覧

値	概要
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>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

概要

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>

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

トップページへ