ulやolのリストマーカーの種類・位置・画像を指定するlisty-styleプロパティの使い方【CSS】

最終更新日:

公開日:2024-11-18

ページ内に広告が含まれています。
ulやolのリストマーカーの種類・位置・画像を指定するlisty-styleプロパティの使い方【CSS】

先日、ulやolのマーカーの種類を変更するlist-style-typeプロパティの使い方【CSS】でリストマーカーの種類の変更の仕方について解説しましたが、今回はulolのリストマーカーの種類・位置・画像を一括指定出来るlisty-styleプロパティについて解説していきます。

list-styleプロパティとは

list-styleプロパティは、ulolなどのリストマーカーの種類・位置・画像の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(外側)

リストマーカーを外側に配置します。ulolの初期値になります。

ul {
    list-style-position: outside;
}
  • リスト1
  • リスト2
  • リスト3
    リスト3

外側にリストマーカーを配置する事で、改行しても文字の先頭が揃うようになっています。
ですが、リストマーカーだけ外側に出てしまいますので、ulolに対して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;が指定されている

lidisplayプロパティの値は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つでも指定可能で記述が短くて済みますので、積極的に使用していきましょう。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

PAGE TOP