もくじ

ul・ol・li リストのデザイン調整に使えるテクニック

ハウツー
蛙のicon

こんにちは、蛙です。
何もスタイルを適応してないリストの見た目って非常に簡素ですよね。 サイトのデザインに合わせて、リストの見た目も整えるとサイトのこだわりを感じます。
今回は、私がリストのデザインによく使うCSSの記述をいくつかご紹介いたします。

ul・ol・liタグのおさらい

まずはリスト関連のタグについてさらっとおさらいです。 そんなの知ってるよ!という人は、この項目は読み飛ばしてOKです。

リストの作り方

書き方は以下の通りです。 リストアップしたい項目をliタグで囲い、リストの1番外側を<ul>もしくは<ol>タグで囲みます。
<ul> <li>ネコ</li> <li>トカゲ</li> <li>カエル</li> </ul>
リスト
<ul><ol>の直下に入れて良いのはliタグだけです。 <div><span>を入れるのはルール違反になるので注意してください。
<li>の中には<div><span>も入れることができます。

リストを入れ子にする

リストの中にさらにリストを入れる、いわゆる入れ子状態にする場合はこんな感じ。
入れ子リスト
<ul> <li> 哺乳類 <ul> <li>ネコ</li> <li>イヌ</li> </ul> </li> <li> 爬虫類 <ul> <li>トカゲ</li> <li>ヘビ</li> </ul> </li> <li> 両生類 <ul> <li>カエル</li> <li>イモリ</li> </ul> </li> </ul>
入れ子にする場合、<li>の直下に<li>を入れることはできません。 <li>の外側は必ず<ul>もしくは<ol>になると覚えておきましょう。

ul・olの使い分け

<ul>は主に順番が入れ替わっても意味の変わらない箇条書きのリストに使用します。
パンくずリストや記事のもくじ、料理の作り方など、順番にも意味のあるリストを作る場合には<ol>を使いましょう。

マーカー(liタグ先頭の黒丸)の形を変える

デフォルトでは<ul>リストの<li>の先頭には黒丸が、<ol>リストの<li>の先頭には数字が出るようになっています。 こちらはlist-style-typeというプロパティで変更することが可能です。
さまざまなマーカー比較
ul{ /* 黒丸 ulデフォルト */ list-style-type: disc; /* 白抜きの丸 */ list-style-type: circle; /* 黒四角 */ list-style-type: square; /* 数字 olデフォルト */ list-style-type: decimal; /* マーカーなし */ list-style-type: none; }

記号をマーカー代わりに

*や・などの記号をリストマーカーの代わりに使うこともできます。 今回はサンプルとして「★」を表示させてみますね。
ul { /* マーカーを消す */ list-style-type: none; padding-left: 0; } li::before { content: "★"; }
★をマーカー代わりに表示
からくりとしては、一旦list-style-type: none;でマーカーを消し、:before擬似要素を使って★を表示させています。 星の部分はお好みで好きな記号に変えてくださいね。 fontawesomeなどのアイコンフォントを利用するのもおすすめです。
また、リストの左側に本来マーカーが表示される分の余白が残ってしまっていたので、padding-left: 0;で余白を詰めて見栄え調整しています。

インデントの調整

リスト項目が単語で短い場合はここまででも十分ですが、長文で折り返しがあると個人的にはちょっと見た目が嫌な感じになります…。
li { text-indent: -16px; padding-left: 16px; }
インデント比較
★も文章の一部として認識されているのでこんな風になっちゃうんですよね。 個人的には文章の先頭位置は揃っていてほしいです。
こういった場合は、<li>text-indentをマイナスの数値で設定します。 text-indentの値は記号の横幅と同じにする必要があるので、適宜調整してください。 また、このままでは★が左にはみ出してしまうので、text-indentの数値と同じだけ左に余白を入れて調整します。

画像をマーカーとして使う

自分で用意した画像をマーカーとして使用することも可能です。 やり方はlist-style-imageで指定する方法と、background-imageとして画像を入れる方法の2通りあります。

list-style-imageプロパティを使う

list-style-imageで画像をマーカー化
ul { list-style-image: url("画像のパス"); padding-left: 24px; }
list-style-imageとして用意した画像のパスを指定するだけです。 今回はリスト左の余白が大きすぎたので、paddingも調整していますが、こちらは必要があればという感じなので必須ではありません。 用意した画像のサイズなどにもよると思うので、適宜調整してください。
画像が大きすぎたり小さすぎたりすると、画像の位置がズレて不自然に感じることがあります。 今回のサンプルだと、画像がやや上に寄っている気がしますね…。

background-imageを使う

ul { /* マーカーを消す */ list-style-type: none; padding-left: 0; } li { /* 画像を背景に設置 */ background-image: url("画像のパス"); /* 1つだけ表示したい */ background-repeat: no-repeat; /* 位置調整 */ background-position: 0 4px; padding-left: 24px; }
background-imageで画像をマーカー代わりに表示
list-style-type: none;でマーカーを消し、<li>の背景として画像を入れ込んでいます。
list-style-imageを使うよりも記述が多く難しいように感じますが、個人的にはこちらの方法がおすすめです。 background-imageで指定する場合、画像サイズはbackground-size、画像の位置はbackground-positionで変更できます。 わざわざ画像の差し替えをしなくても、CSS側である程度見栄えの調整が可能なんです。

olリストの数字の色を変えたい

<ol>リストの数字の色は、デフォルトでは<li>の文字の色と同じに設定されています。 また、数字の色のみを変更するCSSプロパティはありません。
そのため、数字の色だけを変えたい場合、少し工夫が必要です。

HTMLのspanタグを使う

<ul> <li><span>htmlのspanタグを使う</span></li> <li><span>htmlのspanタグを使う</span></li> </ul>
spanタグを使って数字の色変更
li { color: green; } li span { /* 文字色を戻す */ color: #000; }
まず、<li>の中身をすべて<span>で囲みます。 その後<li>全体の文字色を変更し、さらに<span>だけ元の文字色に戻せば、結果的に数字の部分だけ色付いた状態になります。
ね、簡単でしょ?

:before擬似要素を使う

ul { /* マーカーを消す */ list-style-type: none; padding-left: 16px; /* liカウント用 */ counter-reset: ol_li; } li::before { /* liカウント用 */ counter-increment: ol_li; content: counter(ol_li)". "; /* 色指定 */ color: green; }
:before疑似要素を使って数字の色変更
こちらの方法は少し複雑です。 私も誰かがやってるのを真似しただけなので、説明するとなるといまいち自信がありません…。
一応、<li>をカウントしてその数値をcontentで表示しているということみたいです。 HTMLの記述を変えることなく、CSSだけで対応できるので便利ですよね!
この方法だと、数字の後ろについているピリオドを消したり、数字の前後に文字を入れることもできます。 例えば、ランキングなら第1位、第2位…などにすることもできるわけです。 また、font-weight: bold;で数字だけ太字にしたり、数字を丸で囲う・背景色を入れるなどかなり自由なスタイル調整ができます。

リスト項目を横並びにする

デフォルトでは、リストの項目は縦並びになっています。 しかし、グローバルメニューやパンくずリストなどは横並びにしたいですよね。 そんなときはdisplay: flex;を使いましょう。
ul { /* マーカーを消す */ list-style-type: none; padding-left: 0; /* 横並びにする */ display: flex; }
リスト項目を横並びにする
display: flex;を適用すると、リストに含まれるすべての項目が横1列に並びます。 マーカーも邪魔なのでついでに消しました。
項目が少なく文字数も少ないとこれだけで良い感じに決まるのですが、項目が多かったり文字数が長いと、<li>内で文字が折り返されてしまうのでちょっと嫌かも…。
横並び・複数行のリスト
ul { /* マーカーを消す */ list-style-type: none; padding-left: 0; /* 横並びにする */ display: flex; /* li内の折り返し解消・複数行に */ flex-wrap: wrap; } /* 1行に2つだけ表示したい */ li { width: 50%; }
flex-wrap: wrap;の記述を追加すると、<li>内の文章の折り返しが解消され、リストが複数行になります。
また<li>に横幅を設定すれば、1行あたりのリスト項目の数も変更可能です。 今回は%で指定していますが、もちろんpxやremなどで指定することもできますよ。

まとめ

<div><span>などと違い、リストはデフォルトである程度スタイルが適応されているので、それを一旦消して好みのスタイルを適用しようとすると少し面倒なんですよね。 今回紹介したテクニックを使えば、あとは色や余白を調整したり、borderなどの装飾を入れるだけで理想のデザインのリストを作れると思います。
リストの扱いがよくわからないのか、「・」などの記号を使ってリスト風に箇条書きにしている方をたまに見ます。 しかし、リストにすべきところはきちんとリストにしておかないと、SEO的にもあまりよろしくありません。
リストの扱いに悩んでいる人はぜひ参考にしてみてください!
蛙のicon
ひょんなことからIT業界に迷い込んだ1匹のカエル。知識ゼロからのスタートで四苦八苦。特にJavaScriptが怖い…。