CSS リスト設定

CSSリスト属性は、リストアイテムのマーカーを配置、変更したり、画像をリストアイテムのマーカーとして使用することができます。

ある意味では、描述的でないテキストのいかなる内容もリストと考えられます。国勢調査、太陽系、家系図、訪問メニュー、あなたのすべての友人もリストまたはリストのリストとして表現できます。

リストが非常に多様であるため、リストは非常に重要です。しかし、CSSのリストスタイルが十分に豊富でないことは、大きな残念事項です。

リストのスタイルに影響を与える最も簡単（そして最も完全にサポートされている）方法は、マーカーの種類を変更することです。

例えば、無序列表中では、リストアイテムのマーカーは各リストアイテムの横に表示される点です。有序リストでは、マーカーはアルファベット、数字、または他の数体系のシンボルである可能性があります。

リストアイテムのアイコンの種類を変更するには、以下の属性を使用できます： list-style-type：

ul {list-style-type : square}

上記の宣言は、無序列表中のリストアイテムアイコンを四角形に設定しています。

時には、一般的なアイコンが十分ではありません。各アイコンに対して画像を使用したい場合があります。これは、以下で利用できます： list-style-image 属性で実現されています：

ul li {list-style-image : url(xxx.gif)}

url()値を使用するだけで、画像を使用してアイコンを設定できます。

CSS2.1では、アイコンがリストアイテムの内容の外側に表示されるか、内容の内部に表示されるかを確定できます。これは、以下の方法で行われます： list-style-position 完了です。

シンプルにするために、上記の3つのリストスタイル属性を1つの便利な属性にまとめることができます：list-styleこんな感じです：

li {list-style : url(example.gif) square inside}

list-styleの値はどの順番でも並べることができ、これらの値はすべて省略可能です。値が1つ提供されると、他のものはデフォルト値に設定されます。

CSS リスト例：

属性	説明
list-style	ショートカット属性。リストに使用されるすべての属性を1つの宣言で設定するために使用されます。
list-style-image	画像をリストアイテムマークとして設定します。
list-style-position	リスト内のリストアイテムマークの場所を設定します。
list-style-type	リストアイテムマークのタイプを設定します。
marker-offset