こばゆた
以下の様にリストの先頭に付く点(リストマーカー)に色を付けたい時があるかもしれません
- リスト
- リスト
- リスト
そんな時のメモです。
またリスト関連の記事はコチラになります↓
1.リストに色を付ける
1-1.パターン１ spanタグを使う
- STEP1リストを作成する
<ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul>- リスト
- リスト
- リスト
- STEP2liタグの中にspanタグを入れる
<ul> <li><span>リスト</span></li> <!--<span>を入れる--> <li><span>リスト</span></li> <li><span>リスト</span></li> </ul> - STEP3リストに色を付けるまずリスト全体にマーカーに設定したい色を設定します。
ul{ color: blue; /* リストマーカーの色を指定 */ }- リスト
- リスト
- リスト
- STEP4spanタグに色を付ける文字色に設定した色に戻せば完成です。
ul{ color: blue; /*リストマーカーの色を指定*/ } span{ color: #333; /* リストの色を指定 */ }- リスト
- リスト
- リスト
1-2.パターン2 疑似要素で作成する
- STEP1リストを作成する
<ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul>- リスト
- リスト
- リスト
- STEP2リストマーカーを消すlist-style: none;で普通に消します。
ul{ list-style: none; }- リスト
- リスト
- リスト
- STEP3疑似要素でリストの前にマーカーを挿入する疑似要素を使ってマーカーを表示します。
またliをdisplay: flexにすることでリストマーカーとリストの本文の高さを合わせています。ul{ list-style: none; } li{ display: flex; /* 点とリストを横並びに */ align-items: center; /* 垂直方向に中央揃い */ } li::before{ content: "⚫︎"; /* 記号(黒丸)を挿入 */ color: blue; /* 好きな色にする */ font-size: 0.6em; /* 黒丸の大きさに差異があるので調整 */ margin-right: 1em; /* 余白 */ }- リスト
- リスト
- リスト
完成です。
ちなみに疑似要素の中身をハートにすればかわいいリストにもなります。
ul{
list-style: none;
}
li{
display: flex; /* 点とリストを横並びに */
align-items: center; /* 垂直方向に中央揃い */
}
li::before{
content: "❤︎";
color: #f67690;
font-size: 1.5em;
margin-right: 0.25em;
}- リスト
- リスト
- リスト
コメント