2023/11/10 (更新日:2024/07/11)

【CSS】「list-style」プロパティの使い方！【分かりやすい】

Categories > CSSの基本編

CSSの「list-style」プロパティの使い方が詳しく知りたい。

この記事はこのような方へ向けて書いています。

この記事で得られる知識！

「list-style」は何ができるプロパティなのか？
「list-style」の使い方！
「list-style」の使用例！
「list-style」を使う上での注意点！

この記事を読むことで、これらの知識が得られます。

この記事でサクッと「list-style」について学習しちゃって下さい！

また、下の動画でも「list-style」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

では、内容へ入っていきますね！

「list-style」は何ができるプロパティなのか？

CSSの「list-style」プロパティは、リストアイテムの設定ができる３つのプロパティを一括で指定できる「一括指定プロパティ」です。

具体的には、ul要素や、ol要素で作るリストの、それぞれの項目の

「マーカーの種類」
「マーカーにどの画像を使うか」
「マーカーの位置」

の設定ができます。

まずはどんな感じか見てもらう！

「list-style」を使ってみた。

このように、「list-style」を使うと、ul要素やol要素で作るリストの項目のマーカーの種類を変えたりする設定ができます。

リストの項目につく「マーカー」が上から順に、「黒丸」「白丸」「四角形」となっています。

なるほど！イメージできたよ！

「list-style」で一括指定できるプロパティは？

「list-style」で一括指定できるプロパティは、下記の通りです。

「list-style」で一括指定できるプロパティ！

list-style-type
list-style-image
list-style-position

「list-style」を使うと、これら３つのプロパティに対して一括で値をセットすることができます。

「list-style」の詳しい解説をする前に、まずはこれら３つのプロパティの知識が必要なので、そこを先に書いていきます！

「list-style-type」の使い方。

「list-style-type」を使うと、リスト項目に使われるマーカーの設定ができます。（円、四角、文字、など）

ul、ol要素のデザインの設定ができるプロパティだね！面白い。

どんな値が使える？

「list-style-type」には、様々な値を使うことができます。

よく使う代表的なものは下記です。

list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;

none

「none」を使うと、マーカーは表示されません。

disc

塗りつぶされた円形のマーカー

「disc」を使うと、「塗りつぶされた円形のマーカー」が表示されます。

circle

枠線だけの円のマーカー

「circle」を使うと、「枠線だけの円のマーカー」が表示されます。

square

塗りつぶされた四角形のマーカー

「square」を使うと、「塗りつぶされた四角形のマーカー」が表示されます。

decimal

連番
連番
連番

「decimal」を使うと、「１から始まる連番」が振られます。

マーカーの色は？

マーカーの色は、特に何も設定しなければ、li要素の「color」プロパティの値と等しくなります。

「マーカーの色」と「文字色の色」を別々に設定するには？

li::marker {
    color: blue;
}

マーカーの色と文字色の色を別々に設定するには、上記のように書けばOKです。

「::marker」としてあげて疑似要素の「color」プロパティの値を変更してあげれば、それがマーカーの色となります。

他にもいろいろな値が使える。

MDNというサイトに載っているlist_style_typeの値の一覧表の一部分。

引用元：MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

「list-style-type」には他にたくさんの値が設定できるので、気になる方は調べてみてください。

↑こちらのサイトにたくさん載っています。

グローバル値も使えます。

あとは、「list-style-type」に「unset」などの「グローバル値」も使えます。

「グローバル値」については、こちらの僕の記事で解説しています！気になる方はどうぞ！

【CSS】「グローバル値」とは？「initial」「inherit」「unset」「revert」【分かりやすい】

「list-style-type」の公式定義。

「list-style-type」の公式定義は下記の通りです。

「list-style-type」の公式定義！

初期値は、disc
継承は、あり

※「初期値は、disc」ですが、ol要素は「user agent stylesheet」によって「decimal」と指定されることが多いです。

「list-style-image」の使い方。

「list-style-image」を使うと、リストの項目のマーカーに「画像を使う」ことができます。

設定方法は、値に「url(画像ファイルへのパス)」みたいに書いてあげればOKです。

これも非常に面白いプロパティだね！

実際に使ってみる！

「list-style-image」を使ってみる。

ul {
    list-style-image: url("pengin_mini.png");
}

すると上の画像のように、マーカーに画像を使うことができます。

「list-style-image」に設定できる値は？

「list-style-image」に設定できる値は下記の通りです。

「list-style-image」に設定できる値！

使う画像
「none」というキーワード

これら２つです。

※「linear-gradient()」などのグラデーションを表す関数を使った指定も、それらが画像という扱いなのでOKです。

「none」というキーワードを使うと？

ul {
    list-style-image: none;
}

「none」と指定すると、画像は何も設定されません。初期値です。

url関数の使い方！

ul {
    list-style-image: url("pengin_mini.png");
}

ここで使ってる「url()」というものは、CSSに用意されている関数です。

使い方はシンプルで、（）の中にファイルへのパスを書いてあげればＯＫです。

絶対指定
相対指定

どちらでもＯＫです。

“”(引用符)で囲むかどうか

ul {
    list-style-image: url(img/pengin_mini.png);
}

こんな感じで、（）の中に直接ファイルへのパスを書いてもOKです。

※ですが、フォルダ名にスペースが入っているフォルダを経由する場合は、引用符で囲まないと上手くいかないので注意してください。

ul {
    list-style-image: url("image min/pengin_mini.png");
}

上の様な場合は、引用符で囲む必要があります。

グローバル値も使えます。

あとは、「list-style-image」に「unset」などの「グローバル値」も使えます。

「グローバル値」については、こちらの僕の記事で解説しています！気になる方はどうぞ！

【CSS】「グローバル値」とは？「initial」「inherit」「unset」「revert」【分かりやすい】

「list-style-image」の公式定義。

「list-style-image」の公式定義は下記の通りです。

「list-style-image」の公式定義！

初期値は、none
継承は、あり

これについても、知っておいてください！

「list-style-position」の使い方。

「list-style-position」を使うと、リスト項目の「マーカーの位置の設定」ができます。

細かいけど知っておくべきプロパティです！

「list-style-position」に設定できる値は？

「list-style-position」に設定できる値は、下記の通りです。

「list-style-position」に設定できる値！

inside
outside

この２つだけです！

シンプルだね！

「list-style-position」に「inside」を使う。

「list_style_position」に「inside」と指定する。

ul {
    list-style-position: inside;
}

「list-style-position」に「inside」を使うと、マーカーはリスト要素の「中」に配置されます。

「padding」をつけると？

「list_style_position」に「inside」と指定し、「padding」も設定する。

「list-style-position」に「inside」を使い、かつ、「padding」をつけると上のようになります。

「list-style-position」に「outside」を使う。（初期値）

「list_style_position」に「outside」と指定する。

ul {
    list-style-position: outside;
}

「list-style-position」に「outside」を使うと、マーカーはリスト要素の「外」に配置されます。

「padding」をつけると？

「list_style_position」に「outside」と指定し、「padding」も設定する。

「list-style-position」に「outside」を使い、かつ、「padding」をつけると上のようになります。

グローバル値も使えます。

あとは、「list-style-position」に「unset」などの「グローバル値」も使えます。

「グローバル値」については、こちらの僕の記事で解説しています！気になる方はどうぞ！

【CSS】「グローバル値」とは？「initial」「inherit」「unset」「revert」【分かりやすい】

「list-style-position」の公式定義。

「list-style-position」の公式定義は下記の通りです。

「list-style-position」の公式定義！

初期値は、outside
継承は、あり

これについても、知っておいてください！

「list-style」の使い方。

ul {
    list-style: square inside;
}

「list-style」には、一括指定するそれぞれのプロパティの値を「半角スペース」もしくは「改行」で区切って書けばOKです。

なるほど！分かりやすい！シンプルだね。

値を省略すると、それぞれのプロパティの初期値が入る。

ul {
    list-style: square;
}
ul {
    list-style-type: square;
    list-style-image: none;
    list-style-position: outside;
}

上の１行の指定と、下の３行の指定は同じ意味になります。

「list-style」には、値を省略して書くことが可能で、省略された場合は、そのプロパティの初期値が入ります。

※なので予期せぬ上書きに注意してください。

「display: list-item」の要素に適用できる。

「list-style」および一括指定できる３つのプロパティは、「display: list-item」の要素にだけ適用することができます。

li要素には意識せず使える。

li要素はwebブラウザが予めスタイルをつけてくれる「user agent stylesheet」によって、「display: list-item」となるので、あまり意識しなくてOKです。

継承はありなので、ul、olに設定しておけばOK。

「list-style」の設定は、ul、olの要素に設定するのが一般的です。

もちろんli要素に設定してもＯＫですが、リストごとにスタイルは共通させることが多いので、ul、olに設定するのがいいのかなと思います。

「list-style」もそうですし、一括指定できる３つのプロパティも継承はありなので、ul、olに設定すればＯＫということですね！

dlの中に入れる、dt、ddは予め「display: list-item」とならないので、注意！

dlの中に入れる、dt、ddは予め「display: list-item」とならないことが多いので、「list-style」を使うなら、「display: list-item」の設定が必要です。

div要素なども「display: list-item」と設定すれば、「list-style」が適用される。

li要素じゃなくても、「display: list-item」と設定すれば、「list-style」を適用することができるので、使わないと思いますが、div要素に「list-style」の設定をすることも可能です。

ですがＳＥＯ的に、それがリストならしっかりul,olタグを使ってマークアップするのがいいと思うので、これは非推奨です。

「list-style」が効かない？使用上の注意点とは。

「list-style」が効かない！という時にのために、予めミスりそうな箇所を書いておきますね。

予期せぬ上書きに注意する。

ul {
    list-style-position: inside;
    list-style: square;
}

このように書くと一見上手くいきそうです。ですがこれだと「inside」が効きません。

「list-style」の設定をする時に、「list-style-position」の値を省略しています。なのでここで初期値の「outside」が入ってきちゃうからですね。

このような意図しない上書きに注意してください。

解決策！

ul {
    list-style: square;
    list-style-position: inside;
}

このように「list-style-position: inside;」の設定を下の書いてあげればOKです。これなら、上書きされることはありません。

まず「 list-style」で大まかに指定して、それから「list-style-position」で細かく指定する感じです。

「display: list-item」に設定しているか？

先ほどもちらっと書きましたが、「list-style」および一括指定できる３つのプロパティは、「display: list-item」の要素にだけ適用することができるので、もし上手く効かない場合は、しっかり「display: list-item」となっているか確認してみてください。

特に何も設定しなければ、li要素はwebブラウザが予めつけてくれる「user agent stylesheet」によって、「display: list-item」となるので、あまり意識しなくてOKだと思いますが、自分で書いたCSSによって、li要素に「display: list-item」以外の設定がされていると、上手く効かないので、一応この知識も知っておいてね！