【CSS】liststyleは「ul」「ol」に付けるべき？「li」に付けるべき？

2022年10月24日

list-style:none;は<ul>につけるか<li>につけるか

どちらにつけてもちゃんと消えてくれるのでどちらでも良さそうですが、サイトや本などを参考にしますとほぼ全てが<ul>,<ol>。

基本<ul>,<ol>に指定すると覚えておけば間違いないでしょう。

「・」以外のリストマーカーに変える

リストマーカーは「・」（デフォルト）の他にもいろいろありますので用途によて使い分けするのも良いでしょう。

例）白い丸

.circle{
  list-style: none;
  list-style-type:circle;
}

オリジナルのリストマーカー

リストマーカーに画像を表示させてオリジナルのリストを作成することもできます。

<ul class="daiya">
<li><img src="img/daiya.png" width="16px" height="16px">リスト1</li>
<li><img src="img/daiya.png" width="16px" height="16px">リスト2</li>
<li><img src="img/daiya-gray.png" width="16px" height="16px">リスト3</li>
<li><img src="img/daiya-gray.png" width="16px" height="16px">リスト4</li>
</ul>

このように画像を指定することでこのように好みのリストを作成できます。

5種類作ってみましたので良かったら使ってみてください。
画像は幅100px高さ100pxで作ってありますので、文字のサイズに合わせて
「width="16px" heiht="16px"」などとすると良いです。

グレーの方はこちらからダウンロードできます。

リスト画像の高さが違う

画像とテキストをリスト表示させようとすると高さが合わないときがあります。

少し違和感があって嫌なので直したいのですが、

<li>に「vertical-align: middle;」を指定してもうまくいきません。

このような時はimgの親要素に当たる<li>に「 display: flex;」「align-items: center;」を指定するとうまくいきます。

li{
  display: flex;
  align-items: center;
}

高さが揃いました。