CSS【 list 】 ～ リストのstyle

要点を分かりやすく列挙する場合など、リストはWebサイトでよく使われるHTML要素です。
そして、CSSではリストに関するプロパティが用意されています。
今回は、リスト用のCSSプロパティをまとめたいと思います。

また、displayプロパティでも、リストのような表示を指定することができます。
displayプロパティでリストを作成する際の指定方法等については、CSS【 display 】２ ～ list-itemをご覧下さい。

目次

１．リスト用のCSSプロパティ
２．list-style-typeプロパティ
３．list-style-positionプロパティ
４．list-style-imageプロパティ

１．リスト用のCSSプロパティ

リスト用のCSSプロパティは、次の通りです。

list-style-type	リストマークの種類を指定 値：disc（デフォルト）、none、circle、square、decimal、lower-roman、upper-roman、他 （list-style-imageを指定する場合は無効）
list-style-position	リストマークの位置を指定 outside（デフォルト）、inside、hanging
list-style-image	リストマークに画像を指定 値：none（デフォルト）、url(“画像ファイルのURL”)
list-style	ショートハンドプロパティ 複数の値を半角スペースで区切ってまとめて指定（順不同）

▲目次へ戻る

２．list-style-typeプロパティ

list-style-typeプロパティは、リストマークの種類を指定する際に使用するプロパティです。
li要素について、li { list-style-type : 値 } のように指定します。

list-style-typeプロパティで値を指定すると、次のようなリストマークが付きます。

none	リストマークなし
circle	黒丸（デフォルト） 黒丸（デフォルト） 黒丸（デフォルト）
circle	白丸 白丸 白丸
square	四角 四角 四角
decimal	数字（ol要素でのデフォルト） 数字（ol要素でのデフォルト） 数字（ol要素でのデフォルト）
decimal-leading-zero	先頭に0が付いた数字 先頭に0が付いた数字 先頭に0が付いた数字
lower-roman	ローマ数字（小文字） ローマ数字（小文字） ローマ数字（小文字）
upper-roman	ローマ数字（大文字） ローマ数字（大文字） ローマ数字（大文字）
lower-greek	ギリシャ文字（小文字） ギリシャ文字（小文字） ギリシャ文字（小文字）
lower-latin	アルファベット（小文字） アルファベット（小文字） アルファベット（小文字）
lower-alpha	アルファベット（小文字） アルファベット（小文字） アルファベット（小文字）
upper-latin	アルファベット（大文字） アルファベット（大文字） アルファベット（大文字）
upper-alpha	アルファベット（大文字） アルファベット（大文字） アルファベット（大文字）
hebrew	ヘブライ数字 ヘブライ数字 ヘブライ数字
armenian	アルメニア数字 アルメニア数字 アルメニア数字
georgian	グルジア数字 グルジア数字 グルジア数字
cjk-ideographic	漢数字 漢数字 漢数字
cjk-earthly-branch	（子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥..） （子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥..） （子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥..）
cjk-heavenly-stem	（甲 乙 丙 丁 戊 己 庚 辛 壬 癸..） （甲 乙 丙 丁 戊 己 庚 辛 壬 癸..） （甲 乙 丙 丁 戊 己 庚 辛 壬 癸..）
hiragana	ひらがな（あいうえお順） ひらがな（あいうえお順） ひらがな（あいうえお順）
hiragana-iroha	ひらがな（いろは順） ひらがな（いろは順） ひらがな（いろは順）
katakana	カタカナ（アイウエオ順） カタカナ（アイウエオ順） カタカナ（アイウエオ順）
katakana-iroha	カタカナ（イロハ順） カタカナ（イロハ順） カタカナ（イロハ順）

数字、アルファベット、あいうえお等のリストマークは、もともとol要素（番号付きリスト）のためのものですが、ul要素内のli要素でも指定できます。
但し、ol要素特有のstart属性やreversed属性などは、ul要素では使用できません。

▲目次へ戻る

３．list-style-positionプロパティ

list-style-positionプロパティは、リストマークの位置を指定する際に使用するプロパティです。

list-style-positionプロパティは、次の通り外側か内側かで指定します。

outside	リストマークを、li要素のボックスの左端より外側に配置（デフォルト）
inside	リストマークを、li要素のボックスの左端より内側に配置

外側と内側の違いは、次の通りです。

　
ソースは次の通りです。

（CSS）
ul#sample {
    border:solid 1px #ccc;
    padding:0;
    margin:0}
ul#sample li {
    padding:0;
    background:#EEE;
    margin:1em 1em 1em 2em}
ul#sample li:nth-child(2) {list-style-position:inside}

（HTML）
<ul id="sample">
    <li>outside
    <li>inside
</ul>

比較しやすいように、li要素の背景に色を付けています。
insideは、リストマークがli要素のボックス（色付け部分）の内側に表示され、outsideは、外側に表示されます。

▲目次へ戻る

４．list-style-imageプロパティ

list-style-imageプロパティは、画像をリストマークに指定できるプロパティです。

list-style-imageプロパティの値は、次の通りです。

none	画像無し（デフォルト）
URL	画像ファイルのURLを指定

画像がある場合とない場合を並べると、次のようになります。

　
ソースは次の通りです。

（CSS）
ul#sample {
    border:solid 1px #ccc;
    padding:0;
    margin:0}
ul#sample li {
    padding:0;
    margin:1em;
    list-style-type:circle;
    list-style-position:inside}
ul#sample li:nth-child(2) {
    list-style-image: url("img/mark.jpg")}

（HTML）
<ul id="sample">
    <li>画像なし
    <li>画像あり
</ul>

li要素全体に、list-style-typeプロパティで白丸のリストマークを指定していますが（list-style-type:circle;）、list-style-imageプロパティの指定がある場合は、そちらが優先されます。

▲目次へ戻る