【CSS】ul,liのリストの箇条書きデザインを変更する方法

箇条書きのような点のついたリストを作ることができる「ulとli」を、僕はブログでもウェブサイト制作でも結構多用するんですけども、このデザインを変更方法がちょっとややこしいので解説します。

ざっくりというと擬似要素のbeforeを使って点を作ることで、色や形を自在に操ることができるんですよ。

コピペで使えるソースコード付きでご紹介しますので、ぜひご自由にお使いください。

ul,liのデザインを変更する方法
- liに設定するスタイル
- li:beforeに設定するスタイル
個別に色を変更したい場合
デフォルトの設定で問題ない場合は
olのリストの小技
最後に

ul,liのデザインを変更する方法

ul,liを使うリストの例として、例えば下記のようなHTMLがあったとします。

<div class="list">
  <ul>
    <li>譜久村聖</li>
    <li>生田衣梨奈</li>
    <li>石田亜佑美</li>
    <li>佐藤優樹</li>
    <li>小田さくら</li>
  </ul>
</div>

上記のリストを、箇条書きにするために下記のCSSを当てます。

.list ul li {
  position: relative;
  padding-left: 40px;
}
.list ul li:before {
  color: #fc0;
  content: "・";
  font-size: 46px;
  position: absolute;
  top: -20px;
  left: 0;
}

左がデフォルトの設定、右が変更後の設定です。形はほぼ同じようなものをチョイスしましたが、色を変更することができました。

ちなみに、いろんな要素が絡み合って点の位置はずれると思います。liのpadding-leftと、li:beforeのtopとleft、この3つの数値を変更して良き位置に来るように調整してください。

ざっくりと全体的に説明しておきます。

liに設定するスタイル

liにposition: relative;を設定して、点の位置の起点とします。liの左上が起点となるので、そこから位置調整ができるようになります。

padding-left: 40px;で左側に余白を持たせて、点を表示できるようにします。これを設定しておかないと画面外に点が表示されるようなことが起こり得ます。

li:beforeに設定するスタイル

li:beforeの方が「擬似要素」というもので、こちらで点のデザインを表現します。

color: #fc0;で色を、content: "・";で表示させたい点の元となるものを設定します。紹介したソースコードには日本語の「中黒」を設定してますが、英数の「.」でもいいですし、★などの記号でも大丈夫です。

font-size: 40px;で点の大きさを調整します。

position: absolute;は位置を決めるための1行で、その下のtopとleftの数字で位置を調整します。

個別に色を変更したい場合

ニーズがあるかどうかはわかりませんが、それぞれの点を個別に色変更することも可能です。

その場合は、liにクラスをつけて、それぞれに色を設定していきます。

<div class="heart">
  <ul>
    <li class="fukuchan">譜久村聖</li>
    <li class="eripon">生田衣梨奈</li>
    <li class="ayumin">石田亜佑美</li>
    <li class="ma-chan">佐藤優樹</li>
    <li class="oda">小田さくら</li>
  </ul>
</div>

.heart {
  padding: 200px;
}
.heart ul li  {
  padding: 0 0 0 40px;
  position: relative;
}
.heart ul li:before {
  content: "&#x2764;&#xfe0f;";
  font-size: 16px;
  position: absolute;
  top: 0px;
  left: 15px;
}
.fukuchan:before {
  color: #d42f7d;
}  
.eripon:before {
  color: #befb5b;
}  
.ayumin:before {
  color: #0c38c3;
}  
.ma-chan:before {
  color: #46a29d;
}  
.oda:before {
  color: #905f9d;
}

上記のようにすることで、こちらのキャプチャー画像のように異なる色を設定できます。