【17-2-2】リスト関連の要素のためのCSSプロパティ

前回は display: list-item を使って、<li>要素じゃない要素を<li>要素のようにしてみました。
<li>要素じゃない要素にリストマーカーを付けたりできるんでしたね。

いろんな要素をリストっぽくする display: list-item ですが、リストのためCSSプロパティを知らなきゃ話になんないので、今回はそれをまとめます。
displaypプロパティの流れの途中ですが、今回は displaypプロパティから一旦離れて、リストのためのCSSプロパティの話です。

margin、padding、border など、どのHTML要素にも使えるプロパティ（displayもそうですね）がある一方で、特定の要素専用のプロパティもあります。
今回のリスト関連の要素のためのプロパティもそれ。リストにしか使いません。

で、本日のINDEX

1. リストのためのCSSプロパティ
   1. list-style-type でリストマーカーの種類を指定する
   2. list-style-position でマーカーの位置を指定する
   3. list-style-image でマーカーを画像にする
   4. list-style-image はズレるので、backgroundのほうがイイです
   5. ショートハンドプロパティ list-style でまとめる
2. リストのデフォルトのスペース（padding-left）
3. display:list-itemにした要素にカウントマーカーは使える？
   1. 擬似要素を使えば どのブラウザでもカウントマーカーを付けられる

display プロパティは記事を数回に分けています。こんなかんじで↓

【17-1】display でボックスの表示形式を自由に変えよう

displayプロパティと値の一覧／display: inline／block／inline-block／none／run-in

【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく

display:list-item で、<li>要素じゃない要素を<li>要素のように扱えます

【17-2-2】リスト関連の要素のためのCSSプロパティ　←今ココ

リスト関連の要素だけに使えるCSSプロパティをまとめます

【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく

display:table などで、テーブル関連じゃない要素にテーブルの性質を与えます

【17-3-2】テーブル関連の要素のためのCSSプロパティ

テーブル関連の要素だけに使えるCSSプロパティをまとめます

【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに

display:ruby で、要素にルビ（ruby）を表示する機能を与えます

【17-4-2】ルビ関連の要素のためのCSSプロパティ

ルビ関連の要素だけに使えるCSSプロパティをまとめます

【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）

display: flex に関しては、Flexbox として仕切り直します。 display: flex で「Flexboxコンテナ」を定義し、その他のプロパティも使ってフレキシブルボックスを作ります

リストのためのCSSプロパティ

まずはリスト用のプロパティと値の一覧です。数も少なくて簡単。

プロパティ	概要	値
list-style-type	マーカーの種類を指定	すべてキーワード。list-style-image が指定されていたら無効。 none　disc（デフォルト）　circle　square　decimal lower-roman　upper-roman　などなど。詳細は後ほど。
list-style-position	頭の位置を指定	すべてキーワード。 outside（デフォルト）　inside　hanging
list-style-image	マーカーに画像を指定	none（デフォルト） url("画像のURL")で指定
list-style	ショートハンド プロパティ	値を半角スペースで区切ってまとめる。順不同。 list-style-type と list-style-image があったら list-style-image が優先される（画像がイキ）

では、リスト用のプロパティと値を順に見て行きましょう↓

list-style-type でリストマーカーの種類を指定する

list-style-typeプロパティは、リストマーカーの種類を指定します。
li {list-style-type: circle} というカタチで <li>要素に対して指定しますよ。

この一覧は <li>要素を使ったサンプルになっていますので、いろんなブラウザで表示してみてね。

list-style-type の値
none	リストマーカーなし
disc	塗りつぶされた正円（デフォルト） 塗りつぶされた正円 塗りつぶされた正円
circle	輪郭線による正円 輪郭線による正円 輪郭線による正円
square	塗りつぶされた正方形 塗りつぶされた正方形 塗りつぶされた正方形
decimal	数字（<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	ひらがなのあいうえお順 ひらがなのあいうえお順 ひらがなのあいうえお順
katakana	カタカナのアイウエオ順 カタカナのアイウエオ順 カタカナのアイウエオ順
hiragana-iroha	ひらがなのいろは順 ひらがなのいろは順 ひらがなのいろは順
katakana-iroha	カタカナのイロハ順 カタカナのイロハ順 カタカナのイロハ順

値の継承	あり	適用できる要素	display: list-item な要素

特にlist-style-type を指定しなくても、<ul>要素の<li>要素は、デフォルトの「disc（塗りつぶされた正円）」になります。

リストじゃない要素に display: list-item を指定すれば、デフォルトの disc（塗りつぶされた正円）マーカーが自然に付きます。
ただし、<dl>要素内の <dt> と <dd>は、display: list-item を指定しただけではダメで、list-style-type も指定しないとマーカーが付きません。たぶん、ブラウザデフォルトであえて list-style-type: none になっているんでしょうね。

<ol>要素（番号付きリスト）の<li>要素のデフォルトは「decimal（数字）」です。

「数字・アルファベット・あいうえお」など カウントするためのマーカー は、もともと <ol>（番号付きリスト）のためのものですが、 <ul>内の<li>でも使えます。
ただ、<ol>要素特有の HTMLの「start属性」「reversed属性」などは <ul>では不可。<ol>要素じゃないと使えません。

<ol>要素（番号付きリスト）では、HTMLの start属性、reversed属性、または<li>要素に value属性を使って、開始番号を変えたり、番号を逆順にしたり、途中でカウントの数字を変えたりできます。詳しくは [15-2] 番号付きリストを作ろう（ ol ）をご覧ください。

list-style-position でマーカーの位置を指定する

list-style-positionプロパティは、リストの先頭のマーカーの位置を指定します。
といっても、outside（外側）か inside（内側）の二択しか無いけど。

list-style-position の値
outside	マーカーは<li>のボックスの左端より外側に配置（デフォルト）
inside	<li>のボックスの左端より内側に配置

「hanging」という値も CSS3のドラフトにあがっていましたが、どうも無くなったみたいね。↓検索しても出ないよ。
参考資料：CSS Lists and Counters Module Level 3 __ 4 Marker Position: The list-style-position property

値の継承	あり	適用できる要素	display: list-item な要素

それぞれの値をサンプルで見てみましょう。
わかりやすいように <li>要素に背景色を敷いています。insideは<li>のボックスの中にマーカーが入っているのがわかりますね。

• outside
• inside

上のサンプルの HTMLです。

<ul id="smp1_2">
  <li>outside
  <li>inside
</ul>

サンプルの CSSです。

ul#smp1_2 {border:solid 1px #ccc; padding:0; margin:0}
ul#smp1_2 li {
	padding:0;
	background:#ffc;  /*わかりやすいように背景に黄色を敷いています*/
	margin:1em 1em 1em 2em} 
ul#smp1_2 li:nth-child(2) {list-style-position:inside}

list-style-image でマーカーを画像にする

list-style-imageプロパティで、リストマーカーに画像を指定することができます。

list-style-image の値
none	画像は無し（デフォルト）
URL	url(画像のURL) というカタチで指定します

値の継承	あり	適用できる要素	display: list-item な要素

サンプルです。2番目の <li>要素だけ画像を指定しています。

• 画像無し
• 画像あり

上のサンプルの HTMLです。

<ul id="smp1_3">
  <li>画像無し
  <li>画像あり
</ul>

サンプルの CSSです。

ul#smp1_3 {border:solid 1px #ccc; padding:0; margin:0}
ul#smp1_3 li {
	padding:0;
	margin:1em;
	list-style-type:circle;  /*list-style-typeを指定しています*/
	list-style-position:inside}
ul#smp1_3 li:nth-child(2) {
	list-style-image: url("images/listImage.gif")}

<li>要素に list-style-type を指定していても（5行目）、list-style-image で指定した画像が優先されているのがわかりますね。

でも、この画像のマーカー、ズレてますよね...。対処法はこちら↓

list-style-image はズレるので、backgroundのほうがイイです

list-style-imageプロパティで指定した画像はズレます。
これは、テキスト配置のベースライン（vertical-alignプロパティで変更します）と、マーカーのベースラインが違うからだそうです。
そもそも display:list-item を指定された要素はインラインではないので vertical-alignプロパティは効きません。そこを強引に<span>などで囲んで vertical-align を使ってマーカー画像と位置を合わそうとしても、ブラウザによって若干違って見えるので骨折り損。

vertical-alignプロパティについては、
【32】インラインの縦方向の整列を決める vertical-alignプロパティをご覧ください。

マーカー画像とテキストの位置を合わせるのに最適なのは、
list-style-image はあきらめて（笑）、backgroundプロパティを使う方法です。
ブラウザによって微妙に1〜2pxずれて見えるけど、list-style-image よりはマシ。そして簡単。

• 画像はbackgroundで
• 画像はbackgroundで
• 画像はbackgroundで

上のサンプルの HTMLです。

<ul id="smp1_4">
  <li>画像はbackgroundで
  <li>画像はbackgroundで
  <li>画像はbackgroundで
</ul>

サンプルの CSSです。

ul#smp1_4 {border:solid 1px #ccc; padding:0; margin:0}
ul#smp1_4 li {
	padding:0 0 0 22px;  /*画像は17×17pxなので、5pxほど足したスペースを作っています*/
	margin:1em;
	list-style-type:none;
	background: url("images/listImage.gif") no-repeat left center;}

ショートハンドプロパティ list-style でまとめる

リストのための list-style-type、list-style-position、list-style-imageプロパティの値をひとまとめにするショートハンドプロパティが list-style です。
それぞれの値を「半角スペース」で区切って書きます。順番は自由です。

display:list-item を指定された要素（もちろんli要素も）は、既に3つのプロパティのデフォルト値が設定されていますので、デフォルトから変更したい値だけ書けばOK。省略した値はデフォルト値に。

例えば、list-style-position だけ変えたければ「list-style: inside」と書くだけでOKです。

spanにlist-style:inside spanにlist-style:inside

上のサンプルの HTMLです。

<div id="smp1_5">
  <span>spanにlist-style:inside</span>
  <span>spanにlist-style:inside</span>
</div>

サンプルの CSSです。

div#smp1_5 {border:solid 1px #ccc; padding:1em; margin:0}
div#smp1_5 span {display:list-item; list-style:inside}

リストのデフォルトのスペース（padding-left）

ここで、<li>要素のデフォルトのスペースについて。
<li>要素は何も指定していなくても、どのブラウザでも勝手に左側にスペースができますよね。
で、例えば<li>をメニューに使う時、「●」も付けないし引っ込まなくてもイイんだけど、どこをどう直せばあのスペースが消せるか、わからないと困るよね。
そこんところを図にして貼っときます。

<li>要素は、親の<ul>（または<ol>）の pading-left がデフォルトで入っています（サイズはブラウザによって違うけど）
これが無いと、list-style-position のデフォが outside なので、場合によっては「●」が見えなくなっちゃうからですね。
ということで、親（ul）の左のpaddingを無くせば引っ込まないわけですね。
そのほか、親（ul）には上下の margin があります。
で、<li>要素本人には margin も padding も無い（0）のがデフォルト。

<li>要素じゃない要素に display:list-item を指定した場合は、親に勝手に padding-left は付かず、その要素が元々持っていた padding のままです。
display:list-item を指定すれば list-styleプロパティが効くようになるってだけのことなのね。
ですので「●」が左側にはみ出します。（list-style-position のデフォが outside だから）
はみ出しを解消するには、親に padding-left を指定するか、本人に margin-left を指定する、または本人に list-style-position: inside を指定します。

ちなみに、<li>要素じゃないけど、<dl>の<dd>も引っ込んでるので調べてみました。

<dd>は margin-left がありました。<dd>の左のmarginを無くせば引っ込まないのね。
全体のブロックの上下のマージンは 親の<dl>のものです。

display:list-itemにした要素にカウントマーカーは使える？

前回の display: list-item を使って、<li>要素じゃない要素を<li>要素のようにした場合、<ul>で使う●や○や■などは どのブラウザも問題なく表示します。

でも、<ol>でのカウント用のマーカー（1.2.3. とか A. B. C. など）は、ブラウザによってはカウントできないモノもあるので要注意です。

下のサンプルは、<h3>要素に display: list-item を指定しています。
いろいろなブラウザで見てみてください。

小型・軽量化で持ち運びに便利！

ニューモデルはより小さく、より軽く、さらに丈夫に改良されています。

豊富なカラー・パターンからお選びいただけます

カラーは24色、ボタニカルアートや水玉模様なども12パターンご用意しています。

母の日のプレゼントに最適！

ハンドバッグにもすっきり収まる軽い折りたたみ傘は、プレゼントにも最適です。

上のサンプルの HTMLです。

<div id="smp3">
<h3>小型・軽量化で持ち運びに便利！</h3>
 <p>ニューモデルはより小さく、より軽く、さらに丈夫に改良されています。</p>
<h3>豊富なカラー・パターンからお選びいただけます</h3>
 <p>カラーは24色、ボタニカルアートや水玉模様なども12パターンご用意しています。</p>
<h3>母の日のプレゼントに最適！</h3>
 <p>ハンドバッグにもすっきり収まる軽い折りたたみ傘は、プレゼントにも最適です。</p>
</div>

サンプルの CSSです。

div#smp3 {border:solid 1px #ccc; padding:1em; margin:0}
div#smp3 h3{
	display:list-item;
	list-style:decimal inside; /*マーカーはdecimal（数字）に*/
	margin:0}
div#smp3 p{margin:0 0 .5em 1.3em}
div#smp3 p:last-child { margin-bottom:0}

ほとんどのブラウザでは、マーカー decimal（数字）が ちゃんとカウントしますが、なぜか Firefox だけは全部「0」になってカウントしません。upper-latin（アルファベット大文字）などにしても同じく「0」のままです。（2016年4月現在）
下は Chrome と　Firefox のプレビュー画像です↓

惜しいですね。どのブラウザでも display:list-itemにした要素にカウントマーカーが使えると便利なんですが。そのうち Firefoxも対応するかも。Firefoxって<ol>関連のバグが多いんだよね。

擬似要素を使えば どのブラウザでもカウントマーカーを付けられる

ちなみに、ちょっと list-style から脱線しますが、
要素にカウントする数字をつけるには、擬似要素 ::before で counter()関数を使う方法があります。

CSSはこんなかんじ↓　HTMLはすぐ上のサンプルとまったく同じ構成です。

div#smp4 {
	border:solid 1px #ccc; padding:1em; margin:0;
	counter-reset: osusume /*カウンタを0にリセット。カウンタ名は10行目のもの*/
    }
div#smp4 h3{
	color:#f9c;
	margin:0
    }
div#smp4 h3::before {
	content: "オススメ "counter(osusume)"：";   /*カウンタ名をつけたり他の文言を加えたり*/
	counter-increment: osusume /*カウンタを1つずつ進める指定です*/
    }
div#smp4 p{margin:0 0 .5em 1.3em}
div#smp4 p:last-child {margin-bottom:0}

プレビューはこちら。これなら Firefoxでも大丈夫です。

小型・軽量化で持ち運びに便利！

ニューモデルはより小さく、より軽く、さらに丈夫に改良されています。

豊富なカラー・パターンからお選びいただけます

カラーは24色、ボタニカルアートや水玉模様なども12パターンご用意しています。

母の日のプレゼントに最適！

ハンドバッグにもすっきり収まる軽い折りたたみ傘は、プレゼントにも最適です。

擬似要素「::before」や「::after」は、このサンプルで使った contentプロパティとセットで使うのがお約束です。
そして counter-incrementプロパティ、counter-resetプロパティは、contentプロパティでカウンタを挿入した時に必ず使うプロパティです。
どれも古くからあるプロパティなので、たいがいのブラウザは対応しています。

擬似要素については、【3】id とか classって何？ 擬似要素（Pseudo-elements）でも少し触れていますが、カウンタの件も含めて近いうちにまとめたいと思っています。

次回予告

次回はまた displayプロパティに戻って、テーブルじゃない要素に指定して <table>要素やその中の <td>要素のように扱えるようになる display: table や display: table-cell などを使ってみましょう。

<td>要素のように扱えるようになると、ブロックレベルの要素を簡単に横並びにしたり、横並びにしたボックスの高さを揃えられたりしてとっても便利です。