ul要素で箇条書きリストを書くと、自動的に黒ポチがつきますよね。この点の色を変えて、「リストをちょっと華やかにしたい！」なんて時もあるはずです。
しかし、ul要素やli要素に文字色を指定すると、リストのテキストも色が変わってしまうので、困っている人もいるのではないでしょうか。
もちろん、点だけ色を変える方法はあります。
そのやり方を紹介しますね。
ul要素の黒ポチだけ色を変える一番かんたんな方法
一番手っ取り早い方法は、liの中のテキストをspan要素でかこんでしまうことです。
HTML
<ul>
<li><span>牛乳</span></li>
<li><span>小麦粉</span></li>
<li><span>塩</span></li>
</ul>CSS
li{
color: #4dd2ff;
}
li span {
color: #222222;
}- li要素に黒ポチにつけたい色を指定する。
- span要素にテキストにつけたい色を指定する。
li要素に色を指定したら、黒ポチだけでなくテキストも色が変わります。そこでspan要素に色を指定して、テキストだけ色を上書きするというわけです。
これが一番手っ取り早い方法ですが、このスタイルを使いたい時に、毎回span要素でテキストをくくるのはとてもめんどくさいですね。
たとえばこのリストだけ色を変えたいとかで、これから使うつもりもないなら、この方法でもいいでしょう。
疑似要素で色をつけるのがおすすめ
疑似要素を使うことで、HTMLでspan要素など余分な記述を加えることなく、CSSのみで黒ポチの色を変えることができます。
HTML
<ul>
<li>牛乳</li>
<li>小麦粉</li>
<li>塩</li>
</ul>CSS
li {
list-style-type: none; /*点を非表示*/
position: relative; /*基準位置*/
padding-left: 0.6em;
}
li:before {
border-radius: 50%; /*丸くする*/
width: 5px; /*点の幅*/
height: 5px; /*点の高さ*/
display: block;
position: absolute; /*絶対配置*/
left: 0; /*点の位置*/
top: 0.6em; /*点の位置*/
content: "";
background: #1ec4e6; /*点の色*/
}黒ポチの色を変えるといいましたが、ul要素のデフォルト黒ポチはlist-style-type: none;で消してしまいます。
widthとheightは点の大きさです。同じ数値にして正方形を型どります。
その正方形を、border-radius: 50%;でまん丸を表示させます。これを指定しなければ、四角の点になります。そっちが好みの人ははずしてしまってもOK。
position: absolute;を指定して、点を適切な位置に調整します。親要素であるliに忘れずにposition: relative;を指定しましょう。
文字の大きさやpaddingによって点の適切な位置は変わりますので、それぞれの状況によってtopの数値を調整してください。
代わりに、疑似要素(before)で点っぽいものをスタイルによって表示させているというわけです。
まとめ
毎回li要素の中にspan要素を入れる作業は骨が折れますし、HTMLに無駄な記述が増えます。
疑似要素を使う方法は、CSSの記述量が少し多いですが、書いちゃえば後は楽なのでおすすめです。
