list-style

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

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

list-style

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

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

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

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

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

サンプル(A)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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

[CSSの記述]

.sampleB { list-style:square inside; }

[HTMLの記述]

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

[ブラウザ上の表示]

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