display: list-item

要素に list-item を定義すると、その要素は ul の子要素の li と同じ性質を持ったリストエレメントとして表示される。list-item は li 同様ブロックレベル要素として以下の特徴を持っている。

• 要素の前後には改行を伴う
• contents (内容) のプロパティにサイズ値 (width と height) を定義できる
• contents (内容) の前後左右に padding, margin, border が存在する
• ブロック要素に対して許可されているプロパティを利用できる
• リストに関連するプロパティを利用できる

特徴

1. 要素の前後には改行を伴う

display: list-item で定義されたセレクタはブロック要素となるため、要素の前後に改行を伴う。ブロック要素は元々の改行が存在するので、display: list-item を適用した場合は相殺されるようだが、インライン要素では inline-block のように inline (行内) で改行される。
下のサンプルは、パラグラフ内でインライン要素の span で囲んだテキスト「disc」「circle」「square」にそれぞれ display: list-item を定義している。辛子色の背景で表示されているブロックが span 要素のボックス。

HTML <p>リストエレメント値の中で<span id="inline-list1">disc</span><span id="inline-list2>circle</span><span id="inline-list3">square</span>の３つは UA に依存したレンダリング結果となる。

						CSS .inline-list1 {
 display: list-item;
 list-style-type: disc;/* Marker style property */
 color: #663333;
 background-color: #eee8aa;
 }

リストエレメント値の中で disccirclesquare の３つは UA に依存したレンダリング結果となる。

2. 指定要素のプロパティにサイズ値 (width と height) を定義できる

span 要素はインライン要素だが list-item を指定することでブロック要素の素質を持つため、width (幅) と height (高さ) を指定することができる。ただ、inline-block とは違い、生成ボックスの高さの基準は行の下端に有るような感じだ。
ちなみにレンダリング結果は Safari, Opera, Firefox 2 とも同じ。

.inline-list2 {
 display: list-item;
 width: 8em;
 height: 2em;
 color: #663333;
 background-color: #eee8aa;
 }

リストエレメント値の中で disccirclesquare の３つは UA に依存したレンダリング結果となる。

3. contents (内容) の前後左右に padding, margin, border が存在する

ブロック要素の性質である padding、margin、border を前後左右に設定することができる。このレンダリング結果も Safari, Opera, Firefox 2 とも同じ。

.inline-list3 {
 display: list-item;
 width: 8em;
 height: 2em;
 margin: 0.1em 2em;
 padding: 0.6em;
 color: #663333;
 background-color: #eee8aa;
 border: 4px solid #6600cc;
 }

リストエレメント値の中で disccirclesquare の３つは UA に依存したレンダリング結果となる。

4. ブロック要素に対して許可されているプロパティを利用できる

このプロパティは色々あるが、手軽な text-align: center と float: left を定義してみる。

.inline-list4 {
 display: list-item;
 width: 12em;
 margin: 0.4em 3em;
 padding: 1.4em;
 border: 4px solid #6600cc;
 text-align: center;
 float: left;
 color: #663333;
 background-color: #eee8aa;
 }

リストエレメント値の中で disccirclesquare の３つは UA に依存したレンダリング結果となる。

レンダリング結果は Safari, Opera, Firefox 2 とも同じ。
結果は両方とも有効だが、こういった使い方にメリットが有るのかどうか分からないし、コントロールは面倒くさそう。

作っておいてなんですが、役に立ちそうなサンプルはありませんねぇ。
こういうこともできるのだということでお茶を濁して、この list-item は単独で存在することになるので、ul 要素の中の li 要素のように連続する番号マーカーを期待することはできない（もしかしたら方法はあるのかもしれないが、見つからない）連番が必要なければ問題はないのだが、項目数の多いリストの場合は ul 要素を使う方が無難ではないだろうか。。
ちなみに、英文ではパラグラフ内にリスト項目が現れることがある（役所の書類などで見かける）。欧文圏からの要求で用意されたプロパティなのだろうか、これって？

追記：

この規則が分かったので、下に 追記 としてアップしました。

リストに関するプロパティ

定義できるのは list-style, list-style-image, list-style-position, list-style-type の４つ。ただし上でも書いたように、display: list-item は単独のリストアイテムとなるため、連番リストは期待できない。
また、マーカーについては簡単に説明するので、より詳しい情報は参考書かネット上で調べてください。

list-style

list-style-image, list-style-position, list-style-type をまとめて指定する簡略プロパティ。各プロパティはスペースで区切って定義するが、その記述順番は問われない。
注意点としては、記述しないプロパティがあっても構文エラーとはならないが、その場合は自動的に各プロパティの初期値が有効になるので、記述を省く場合は結果を確かめておくこと。
マーカーを表示しないということであれば list-style: none; と定義すると、list-style-position と list-style-type も none を受け継ぐ。

ist-style-image

マーカーとして利用する画像を指定する。初期値は none であり、この場合は list-stayle-type の値が使われる。
マーカー用の画像を指定する場合は、値に url( ) で（）内に指定画像の url を記述する。

ul { list-style-image: url(image-folder/marker_image.png); }

list-style-position

マーカーの位置を outside か inside で指定する。初期値は outside で、対象要素のブロックの外側に表示する。対して inside を指定した場合は、ブロックの中に表示する。

ul { list-style-position: inside;}

inside を指定したリストエレメント

ul { list-style-position: outside;}

outside を指定したリストエレメント

list-style-type

マーカーの種類 (形状) を値によって指定する。利用できる値は disc や square といったキーワードとなる。キーワードは CSS 1 で定義された 9 種類と CSS 2 で定義された 12 種類があるが、css 2.1 では６つののキーワードが削除されたので、利用できるキーワードは下のテーブルの 15 種類だ。また CSS 2 仕様のキーワードの対応はブラウザによってかなり差があり、現状、利用する場合は検証した方がよいだろう。
なお、Firefox と Safari 3.1, Opera 9.51 は 8 月 1 日 2008 年現在、現行の CSS 2.1 すべてのキーワードに対応している。

Firefox のみで起きる問題

注意：

Firefox は全てのキーワードに対応していると書いたが、display: list-item を定義した要素に list-style-type の disc, circle, square 以外の値を定義するとおかしなことが起きる。
この場合のマーカーは値の初期値が表示されるはずなのだが、なぜか存在しないはずのゼロがマーカーとして現れる。以下は list-style-type の decimal-leading-zero を設定した list-item だ。

本来「01.」が初期値のはずだが「00.」とレンダリングされると思う。ちなみに Safari は全て正しくレンダリングする。

This value causes an element (e.g., LI in HTML) to generate a principal block box and a list-item inline box. For information about lists and examples of list formatting, please consult the section on lists.w3c display properties

upper-roman もなかなかおかしな結果となる。uppe-roman は I, II, III と続くのだが「0.」が表示されるはずだ。

This value causes an element (e.g., LI in HTML) to generate a principal block box and a list-item inline box. For information about lists and examples of list formatting, please consult the section on lists.w3c display properties

なお、Safari 3.1 と Opera 9.51 は正常にレンダリングする。
その他のキーワードも Firefox では同じ状態なので、もう少し検証して、これがバグかどうかを確かめてみることにする。

追記: display: list-item の連番マーカーの規則

• 親ブロック要素の直下に置かれた、list-item を定義したエレメントのみが連番付けされる
• 親ブロック要素下に置かれた子ブロック要素内で list-item を定義したエレメントは関連付けられない
• list-item の値が数字か文字であること
• list-item の値が異なっても、表示されるマーカーの種類が変わるだけで連番は有効

テスト1

下のサンプルは div 内に置いた p 要素に list-item: decimal で連番になるように設定してみた。HTML と CSS はこんな感じ。

<div>
	<p class="item1">最初のマーカーは「1」</p>
	<p>このパラグラフはリスト設定していない</p>
	<p class="item1">2番目のマーカーは「2」</p>
	<p class="item1">3番目のマーカーは「3」</p>
</div>

.marker-test1 {
 display: list-item;
 list-style-type: decimal;
}

残念ながら Firefox では連番で表示されずに「0.」となっているはずだ。
で、正しくレンダリングできるブラウザなら div 内に置いた list-item は出現順に連番付けされ、上のサンプルでは2番目のパラグラフを飛び越して「1」から「3」の連番になっていると思う。

テスト2

下のサンプルは DIV 内にもう一つ DIV を設け、その中に list-item を定義したパラグラフを加えた。

<div>
	<p class="item1">最初のマーカーは "Ι."</p>
	<div>
		<p class="item1">このパラグラフは子 DIV の中にあるので連番にならない</p>
	</div>
	<p class="item1">2番目のマーカーは "ΙΙ."</p>;
	<p class="item1">3番目のマーカーは "ΙΙΙ."</p>;
</div>

marker-test1 {
 display: list-item;
 list-style-type: upper-roman;
}

Firefox では確認のしようがないのだが…、2番目の DIV に梱包したパラグラフのリストマーカーは「Ι.」で 1 番扱いになっているはずだ。
テストケースはアップしないが、要素毎に異なるマーカー値を設定しても連番は有効だ。また要素の種類にも関係なく、display: list-item を適用した要素は、親要素ブロックの中で連番付けされる。

list-style-type のキーワード一覧

ブラウザでのレンダリング状況を確認できるように、css 2.1 で定義されている 15 種のキーワード一覧を置いときます。
現在 (2008-08-01) このマーカーを全て表示できるのは Firefox, Safari 3.1, Opera 9.5.1 です。

The value of list-style-type on css 2.1

Velue	Description	Example
disc	黒丸	disc は装飾文字の一つ レンダリング結果は UA に依存する
circle	白抜きの丸	circle は装飾文字の一つ レンダリング結果は UA に依存する
square	黒い四角	square は装飾文字の一つ レンダリング結果は UA に依存する
decimal	1から始る数字	decimal は 1 から始る数字 ゼロは存在しない
decimal-leading-zero	01から始る数字	decimal-leading-zero は 01 から始る ゼロゼロは存在しない
lower-roman	小文字のローマ数字	lower-roman は i, ii, iii と続く ゼロは存在しない
upper-roman	大文字のローマ数字	uppe-roman は I, II, III と続く ゼロは存在しない
lower-greek	小文字のギリシア文字	lower-roman は α, β, γ と続く ゼロは存在しない
lower-latin	小文字の英字	lower-latin は a, b, c と続く lower-alpha と同じ結果
upper-latin	大文字の英字	upper-latin は A, B, C と続く upper-alpha と同じ結果
armenian	アルメニア数字	armenian は伝統的なアルメニア数字 ゼロは存在しない
georgian	グルジア数字	georgian は an, ban, gan と続く ゼロは存在しない
lower-alpha	小文字の英字	lower-alpha は a, b, c と続く lower-latin と同じ結果
upper-alpha	大文字の英字	upper-alpha は A, B, C と続く upper-latin と同じ結果
none	生成しない	none はマーカーを生成しない リストとは認識し難い

Library

• Home
• ってもzilla Archive
• CSS Test Cont.

Selector Group

• display index

• none
• block
• inline
• inline-block
• list-item
• table
• inline-table
• Other table propaties