listの表示をスタイルシートで設定する
HTMLでlistについて紹介していますが、このlistについてもスタイルシート(CSS)で表示方法を変更させることが出来ます。
- リストのマークや番号の表示形式を変更する
list-style-type:種類指定 - リストマークを画像で表示する① list-style-image:（画像URL)
- リストマークを画像で表示する② （画像の位置を微調整する）
リストマークを画像で表示する②
前ページの方法でリストマークを画像で表示した場合、画像の高さの真ん中に文字を揃えることが困難です。
また、マークと文字との間隔を指定することもできません。
そこで、②の方法として、リストマークを背景画像として設定する方法を紹介します。
ここで注意するのは、今までは『ulタグ』に対してスタイルシートを設定していましたが、ここでは『liタグ』に対してスタイルシートの設定を行いますので、忘れないようにしてくださいね！
li{
list-style-type:none; <!--リストの表示を"無し"にする-->
background-image:url(画像のURL)<!--リストマークに設定する画像を選択-->
background-position:left center; <!--背景画像を左端の真ん中の位置に設定-->
background-repeat:no-repeat; <!--背景画像の繰り返しを"無し"にする-->
padding-left:20px
; <!--(画像の大きさ+マークと文字列の距離分)を左側に空ける-->
padding-top:4px; <!--画像の方が文字より大きい場合-->
padding-bottom:4px <!--画像の方が文字より大きい場合-->
}
少しややこしいですが、順を追って説明してみますね。
まず、どうしたいかというと、リストマークにする画像をリストマークとして設定するのではなく、背景画像として設定してあげたいということなんです。
そのために、
- ①リストマークの表示を"none"に設定する。
（リストマークを「表示しない」設定にします。） - ②リストマーク画像を背景画像として設定する。
（①でリストマークの表示を無くした代わりに、背景画像でリストマークを表示させます。） - ③リストマーク画像(背景画像)を左端真ん中に設定する。
（背景画像は何も設定しない場合、左上に表示されます。そうすると、マークと文字の表示がずれて表示されるので、左真ん中に表示させるようにします。） - ④背景画像の繰り返しを"no-repeat"に設定する。
- ⑤（画像＋画像と文字列とのスペース分）だけ左にスペースを設ける。
（任意の数値分だけ左側にスペースを設け、リストマークと文字が重ならないようにします。） - ⑥リストマークが文字より大きい場合は上下にpaddingを入れてマークが下に切れないようにします。
といった記述を行います。
①～④までは何となく理解しやすいと思いますので、⑤・⑥について少し説明します。
～⑤の補足説明～
背景画像としてリストマークを設定すると、paddingを指定して無い場合には背景画像(リストマーク)と文字が重なって表示されてしまいます。
そこで、リストマークとして使用する画像の大きさと、そのリストマークと文字列とのスペースを足した分だけ、文字列の左側にスペースを設けてあげなければなりません。
例えば、リストマークの大きさが15px、マークと文字列の間を2px分だけ開けたい場合は、15px+2px=17pxとなり、
padding-left:17px
という事になります。
～⑥の補足説明～
リストマークに使用する画像の方が文字の大きさより大きくなってしまうと画像の下端が表示されずに、ちょんぎれたような感じになってしまいます。
そこで、文字の上下に均等にpaddingを設定して画像が切れるのを防ぎます。
例えば、文字の大きさが16pxで画像の大きさが24pxの場合だと、
(24-16)÷2=4pxとなるので、
padding-top:4px;
padding-bottom:4px
という事になります。
割り切れない場合は上下どちらかを1px分多めに指定してあげてください。
ちなみに画像の方が文字より小さい場合や同じ大きさの場合はこの記述は必要ありません。
 |
 |
 |
|---|
