型別プロパティーListスタイル

型別プロパティー(List)

マークを使ったリストは順序が重要な意味を持たず、単純な箇条書きが必要な場合に適しています。マークを使ったリストでは箇条書きにする内容の行の頭に記号がつきます。

画面表示（Display）
空白文字（Whitespace）
リスト様式型（List Style Type）
リスト画像様式（List Style Image）
リスト様式配置（List Style Position）
リスト様式（List Style）

display画面表示

displayとは、要素の表示形式を指定するためのプロパティです。初期値はinlineであり、指定された要素はインラインで表示されます。このほかに、指定が可能なキーワードには要素を表示させないnone、ブロックレベルで表示するblockなどがあります。

Functional list
書式	display: <value:値>
値	block \| inline \| list-item \| none
初期値	block
適用要素	全ての要素
継承性	不可

displayプロパティーは四つの値の一つで要素を定義するのに使われます。

block（要素の前後で改行）
inline（要素の前後で改行しない）
list-item（リスト項目マークを除く blockと同じブロックがつく）
none（画面表示なし）

各要素は、典型的には初期にdisplay値がブラウザによって与えられていて、これはHTML仕様書での示唆された表示にもとずいています。不適切な形式の要素の表示能力故に displayプロパティーは危険です。値 noneは、指定された要素の子要素も含めて画面表示を無効にします。

white-space空白文字

white-spaceとは、半角スペース、タブ、改行の表示を指定するためのプロパティです。初期値はnormalで、連続する半角スペース、タブ、改行は一つの半角スペースとして表示されます。nowrapを指定すると、normalと同様の変換を行いますが、ただし自動的な改行は行われなくなります。また、preを指定すると半角スペース、タブ、改行はそのまま表示されます。

Functional list
書式	white-space: <value:値>
値	normal \| pre \| nowrap
初期値	normal
適用要素	ブロック－レベル要素
継承性	可能

white-spaceプロパティーは、要素内でのスペースをどう処理するかを決めます。このプロパティーは三つの値の一つを取ります：

normal（複数のスペースを一つとします）
pre（複数のスペースを破棄しません）
nowrap（<BR>タグなしの行折り返しを許しません）

list-style-typeリスト様式型

list-style-typeとは、リストのマーカーの種類を指定するためのプロパティです。初期値はdiscであり、項目のマーカーとして黒く塗りつぶされた丸が表示されます。このほかに指定ができる値としては、線で描かれた丸を表示するcircle、算用数字を表示するdecimal、小文字のローマ数字を表示するlower-romanなどがあります。

Functional list
書式	list-style-type: <value:値>
値	disc \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none
初期値	disc
適用要素	display値 list-itemの要素
継承性	可能

list-style-typeプロパティーはリスト項目マークを特定し、list-style-imageがnoneである場合や画像読み込みが切られている場合に使われます。

LI.square {
list-style-type: square
}
UL.plain {
list-style-type: none
}
OL {
list-style-type: upper-alpha
} /* A B C D E etc. */

OL OL {
list-style-type: decimal
}
/* 1 2 3 4 5 etc. */

OL OL OL {
list-style-type: lower-roman
}
/* i ii iii iv v etc. */

このように成ります
 css/ex/list-style-type.html
css/ex/list-style-type2.html

list-style-imageリスト画像様式

list-style-imageとは、リストのマーカーに画像を指定するためのプロパティです。初期値はnoneであり、画像は表示しません。画像を表示させるためには、値にそのURIを指定します。何らかの理由により画像が表示できなかった場合には、list-style-typeプロパティが指定するマーカーが表示されます。

Functional list
書式	list-style-image: <value:値>
値	<url> \| none
継承性	不可
適用要素	display値list-itemの要素
継承性	可能

list-style-imageプロパティーは画像読み込みが機能している場合リスト項目マークとして使われる画像を特定し、list-style-typeプロパティーで特定されたマークと置き代えます。

UL.check {
list-style-image: url(/LI-markers/checkmark.gif)
}

UL LI.x {
list-style-image: url(x.png)
}

例css/ex/list-style-image.html

list-style-positionリスト様式配置

list-style-positionとは、リストのマーカーの位置を指定するためのプロパティです。マーカーをリスト項目の外側に配置する場合にはoutside、内側に配置する場合にはinsideを指定します。初期値はoutsideです。

また、list-style-imageプロパティでマーカーに画像を指定している場合には、そちらが優先されます。

Functional list
書式	list-style-position: <value:値>
値	inside \| outside
初期値	outside
適用要素	display値list-itemの要素
継承性	可能

list-style-positionプロパティーは値insideかoutsideを取りoutsideが初期値です。このプロパティーは、リスト項目からみてマークが何処に来るかを決めます。値 insideが使われていり場合、字下げになるのでなく行はマーカーの下に折り返します。

例css/ex/list-style-position.html

list-styleリスト様式

list-styleとは、リストに関連する設定を一括して指定するためのプロパティです。具体的には、list-style-type、list-style-image、list-style-positionで指定する値をスペースで区切って指定します。値にnoneを含む場合、list-style-typeとlist-style-imageの双方の値にnoneを指定したのと同義になり、マーカーは非表示となります。

Functional list
書式	list-style: <value:値>
値	<list-style-type> \|\|<list-style-position> \|\|<url>
初期値	未定義
適用要素	display値list-itemの要素
継承性	可能

list-styleップロパティーは、list-style-type・list-style-positionそしてlist-style-imageプロパティーの短縮型です。

LI.square {
list-style: square inside
}
UL.plain {
list-style: none
}
UL.check {
list-style: url(/LI-markers/checkmark.gif) circle
}
OL {
list-style: upper-alpha
}
OL OL {
list-style: lower-roman inside
}

例css/ex/list-style.html

HOME スタイルシート型別プロパティー(List)