< !--Tradedoubler siteverification 3222025-- >

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

リストの


このような点々を非表示にする「list-style:none;」
<ul>に適用するか<li>に適用するのか迷います。

今回はリストに付いている点(リストマーカー)について見ていきましょう。

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

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

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

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

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

例)白い丸

.circle{
  list-style: none;
  list-style-type:circle;
}
【circle】
【square】
【hiragana】
【katakana】
【lower-alpha】
【upper-alpha】

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

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

<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;
}

高さが揃いました。

その他

Posted by sweetchilli