list-style-position

CSSプロパティ「list-style-position」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

list-style-position

リストの表示・回り込み形式を指定するプロパティ。

値により、マーク部分を外側に出しリストの内部を左揃えにしたり、マークを内側に表示させたりすることができる。

outside マーク部分を外側に出し、リストの内部が左揃えになる。何も指定しない場合はこれが指定される。
inside マーク部分が内側に入り、それを回り込む形でリストの内容が表示される。

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

.sampleA { list-style-position:outside; }

[HTMLの記述]

<ul class="sampleA">
	<li>テキストテキストテキストテキスト<br />テキスト</li>
	<li>テキストテキストテキストテキスト<br />テキスト</li>
	<li>テキストテキストテキストテキスト<br />テキスト</li>
</ul>

[ブラウザ上の表示]

  • テキストテキストテキストテキスト
    テキスト
  • テキストテキストテキストテキスト
    テキスト
  • テキストテキストテキストテキスト
    テキスト
サンプル(B)

[CSSの記述]

.sampleB { list-style-position:inside; }

[HTMLの記述]

<ul class="sampleB">
	<li>テキストテキストテキストテキスト<br />テキスト</li>
	<li>テキストテキストテキストテキスト<br />テキスト</li>
	<li>テキストテキストテキストテキスト<br />テキスト</li>
</ul>

[ブラウザ上の表示]

  • テキストテキストテキストテキスト
    テキスト
  • テキストテキストテキストテキスト
    テキスト
  • テキストテキストテキストテキスト
    テキスト