リスト関連の主なプロパティ。

CSS(カスケーディングスタイルシート)でのリスト関連のプロパティ(属性)について、主なものについて解説します。

`list-style-type` プロパティ(リスト項目のマーカのタイプ)。

list-style-type プロパティは、各リスト項目の冒頭に付けられるマーカのタイプです。

list-style-type プロパティの主なプロパティ値としては、以下のものが取れます。

list-style-type プロパティを指定しない場合、上位要素から継承された値を採ります。

このため、本来なら<li>要素に適用すべきプロパティであるものの、上位要素の<ul>要素や<ol>要素にこの list-style-type プロパティを与える場合もあります。

尚、仕様上はデフォルトは disc (塗り潰した円)ですが、実際にはブラウザのデフォルトスタイルに依存したものとなります。

デフォルト値は、上位要素を遡っても list-style-type プロパティの指定がない場合に適用されます。ただ、上記のようにブラウザのデフォルトスタイルがあるので、余り意味はないかも知れません。

list-style-type プロパティは、仕様上デフォルト値を disc (塗り潰した円)としていると言う事は、<ol>要素(順序付きリスト)直下の<li>要素(リスト項目)に対しても本来なら指定しない限りデフォルトスタイルとして黒丸がマーカとして用いられると言う事になります。

勿論、多くのウェブブラウザでは、仕様に反したデフォルトスタイルとして、<ol>要素直下の<li>要素に対しては黒丸ではなく数字をマーカとして用いるようにしております。

ですが、仕様で定められている以上、マーカとして数字ではなく黒丸が用いられたとしてもおかしくはありません。

ですから、文書に<ol>要素を用いるのであれば、直下の<li>要素のマーカとして数字が正しく用いられるよう、以下のように<ol>要素にスタイル指定をするようにしてください。

ol {
    list-style: decimal;
    …
    }

list-style-image プロパティは、各リスト項目の冒頭に付けられるマーカに利用する画像です。

画像が読み込めない或いは読み込まない場合には、list-style-type プロパティで指定されたマーカで代用されます。

ですから、マーカに画像を用いる場合であっても、必ず list-style-type プロパティで代わりのマーカを指定するようにしてください。

また、画像の大きさについては仕様での定義はありませんが、大体16ピクセルズ四方くらいの大きさであれば問題無いでしょう。

list-style-image プロパティのプロパティ値には以下のものが取れます。

list-style-image プロパティを指定しない場合、上位要素から継承された値を採ります。

このため、本来なら<li>要素に適用すべきプロパティであるものの、上位要素の<ul>要素や<ol>要素に list-style-image プロパティを与える場合もあります。

また、list-style-image　プロパティのデフォルト値は none (画像なし)となります。

list-style-position プロパティは、各リスト項目の冒頭に付けられるマーカの位置の指定です。

list-style-position プロパティのプロパティ値には以下のものが取れます。

list-style-image プロパティを指定しない場合、上位要素から継承された値を採ります。

また、list-style-image プロパティのデフォルト値は outside (テキストの外)です。この値は、上位要素を遡っても list-style-image プロパティの指定がない場合に用いられます。

list-style プロパティは、各リスト項目の冒頭に付けられるマーカに関する指定を一括して行う記述法です。

list-style-position プロパティのプロパティ値記述法には以下のものがあります。