ITコラム

ITコラム

2017.05.13

#CSS入門

CSS【 list 】～リストのstyle

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

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

1. リスト用のCSSプロパティ
2. list-style-typeプロパティ
3. list-style-positionプロパティ
4. list-style-imageプロパティ

1. リスト用の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	ショートハンドプロパティ複数の値を半角スペースで区切ってまとめて指定（順不同）

▲目次へ戻る

2. list-style-typeプロパティ

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

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

none	リストマークなし
disc	黒丸（デフォルト）黒丸（デフォルト）黒丸（デフォルト）
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要素では使用できません。

▲目次へ戻る

3. list-style-positionプロパティ

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

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

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

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

outside
inside

　
ソースは次の通りです。

（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は、外側に表示されます。

▲目次へ戻る

4. 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プロパティの指定がある場合は、そちらが優先されます。

▲目次へ戻る