CSS【 list 】～リストのstyle

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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プロパティで値を指定すると、次のようなリストマークが付きます。

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

▲目次へ戻る

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

▲目次へ戻る

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

▲目次へ戻る