list-style

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

リストマークに関する値を一括で指定するプロパティ。

複数の値を一緒に指定することで、宣言数を減らす（＝CSSをシンプルに書き上げる）ことができる。なお、一括での指定を必要としない値は省略することが可能。（値はどの順番で記載しても可。）

タイプ	list-style-typeの解説ページを参照
画像	list-style-imageの解説ページを参照
位置	list-style-positionの解説ページを参照

以上3つの値を半角スペースで区切って指定することができ、指定する必要のないものは省略することができる。なお、list-style-typeとlist-style-imageが同時に指定された場合は、list-style-imageが優先して表示される。

[CSSの記述]

.sampleA { list-style:url('hogehoge.gif') outside; }

[HTMLの記述]

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

[ブラウザ上の表示]

[CSSの記述]

.sampleB { list-style:square inside; }

[HTMLの記述]

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

[ブラウザ上の表示]

CSSレイアウト実践講座カテゴリ