先日、ulやolのマーカーの種類を変更するlist-style-typeプロパティの使い方【CSS】でリストマーカーの種類の変更の仕方について解説しましたが、今回はulやolのリストマーカーの種類・位置・画像を一括指定出来るlisty-styleプロパティについて解説していきます。
list-styleプロパティとは
list-styleプロパティは、ulやolなどのリストマーカーの種類・位置・画像の3つのプロパティの値を一括で指定出来るプロパティです。
必ず3つの指定をしないといけないわけではなく、1つだけの指定も可能となります。
指定出来るプロパティは以下の3つとなります。
- list-style-type
リストマーカーの種類を指定。(黒丸や数字などのマーカー) - list-style-position
リストマーカーの位置の指定。(内側または外側) - list-style-image
リストマーカーを画像にする際に指定。
list-styleプロパティの基本的な書き方
list-styleプロパティは以下のように記述します。
ul {
listy-type: disc inside url(/img/image.jpg);
}各プロパティの値を半角スペースで区切って記述します。
記述する順番は決まっていませんので、好きな順番で大丈夫です。
list-style-typeプロパティについて
list-style-typeプロパティは、リストマーカーの種類を指定出来ます。
指定出来るリストマーカーの種類については、ulやolのマーカーの種類を変更するlist-style-typeプロパティの使い方【CSS】で解説していますので参考にしてみてください。
list-style-positionプロパティについて
list-style-positionプロパティは、リストマーカーの位置を指定出来ます。
指定出来る値は以下の2つとなります。
※分かりやすいようにliに背景色を指定しています。
outside(外側)
リストマーカーを外側に配置します。ulやolの初期値になります。
ul {
list-style-position: outside;
}- リスト1
- リスト2
- リスト3
リスト3
外側にリストマーカーを配置する事で、改行しても文字の先頭が揃うようになっています。
ですが、リストマーカーだけ外側に出てしまいますので、ulやolに対してpadding-left等で余白を指定してあげる必要があります。
inside(内側)
リストマーカーを内側に配置します。
ul {
list-style-position: inside;
}- リスト1
- リスト2
- リスト3
リスト3
outsideと違い、リストマーカーが内側にある事で、余白の調整は必要ありません。
ですが、リストマーカーが内側にある事で改行時に文字の先頭がずれてしまいますので注意してください。
list-style-imageプロパティについて
list-style-imageプロパティはリストマーカーに画像を使用する際に指定するプロパティです。
指定する場合は以下のように指定出来ます。初期値は画像無し(none)となります。
ul {
list-style-image: url(/img/image.jpg);
}上記のようにurl(画像のURL)と指定します。
list-style-imageで指定した画像はサイズ調整ができませんので、レスポンシブ時に変更したい場合は画像のサイズを複数用意するか、リストマーカー画像をbackgroundプロパティ(または::before・::afterなどの疑似要素)で指定する必要があります。
list-styleプロパティが効かない場合
list-styleプロパティが効かない場合は以下の内容を確認してみてください。
リセットCSSなどで効かない指定になっている場合が多いかなと思います。
list-style: noneまたはlist-style-type: none;が指定されている
list-style: none;またはlist-style-type: none;が指定されているとリストマーカー(黒丸や数字)が表示されません。
liにdisplay: block;が指定されている
liのdisplayプロパティの値はdisplay: list-item;が初期値となります。
block・inline-block・inlineになっていないか確認してみてください。
ulやolのpadding-left: 0;が指定されている
list-style-position: outside;の場合、padding-leftの値が0だと隠れて表示されません。
padding-leftの値を確認してみてください。
さいごに
いかがでしたでしょうか。
今回は、ulやolのリストマーカーの種類・位置・画像を指定するlisty-styleプロパティの使い方を解説しました。
値が1つでも指定可能で記述が短くて済みますので、積極的に使用していきましょう。
