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

最終更新日:2016年08月17日  (初回投稿日:2016年04月26日)

前回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
  1. ローマ数字の小文字
  2. ローマ数字の小文字
  3. ローマ数字の小文字
upper-roman
  1. ローマ数字の大文字
  2. ローマ数字の大文字
  3. ローマ数字の大文字
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-type の値
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
<ul id="smp1_2">
  <li>outside
  <li>inside
</ul>
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-type の値
none 画像は無し(デフォルト
URL url(画像のURL) というカタチで指定します
値の継承 あり 適用できる要素 display: list-item な要素

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

  • 画像無し
  • 画像あり
<ul id="smp1_3">
  <li>画像無し
  <li>画像あり
</ul>
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 を使ってマーカー画像と位置を合わそうとしても、ブラウザによって若干違って見えるので骨折り損。

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

  • 画像はbackgroundで
  • 画像はbackgroundで
  • 画像はbackgroundで
<ul id="smp1_4">
  <li>画像はbackgroundで
  <li>画像はbackgroundで
  <li>画像はbackgroundで
</ul>
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
<div id="smp1_5">
  <span>spanにlist-style:inside</span>
  <span>spanにlist-style:inside</span>
</div>
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パターンご用意しています。

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

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

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

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.