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

2022年10月24日2023年7月24日

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

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

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

リスト

リストタグは同じようなコンテンツを並べて表示する時に使用するタグです。

基本的な使い方

＊＊＊＊＊＊＊＊＊＊

VS codeでは効率的で便利な記述があるのでチェックしてみてください

2種類のリスト

同じような種類のコンテンツをリスト化して情報を整理するリストタグには2種類あります。

<ul>非序列リスト

<ul>タグ(unordered list)は各情報の重要度や順序に差がない時に使用します。

<ol>序列リスト

<ol>タグ(ordered list)は作り方など各情報の順序や序列がある場合に使用します。

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

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

例）白い丸

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

高さが揃いました。

リストタグには余白が入る

デベロッパーツールで確認してみましょう

ul {
  background-color: lightsalmon;
  list-style: none;
  margin: 0;
  padding: 0;
}

＊＊＊＊＊＊＊＊＊＊

Webデザイナーには必須のデベロッパーツール。もっと知りたい方はこちらの記事

デフォルトCSS

<ul>、<ol>だけでなくタグにはCSSがデフォルトで適用されているものがあります。

こうしたデフォルトで入っているCSSはページレイアウトの際などに邪魔になることがあるため【リセットCSS】などを適用すると良いでしょう。

まとめ