CSS【 list 】 ~ リストのstyle

colmun_main5207

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

また、displayプロパティでも、リストのような表示を指定することができます。
displayプロパティでリストを作成する際の指定方法等については、CSS【 display 】2 ~ 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
  • リストマークなし
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要素では使用できません。

▲目次へ戻る

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です