【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。よくある『・』『■』『算用数字』といったリストマーカーだけじゃないものを実装してみます（色つき・★マークなど）。使うのは、CSSの『擬似要素』。さっそくコードなどをみていきましょう。

cssの擬似要素（Pseudo-elements）とは？

CSSセレクターに付加するキーワードで、特定の部分にスタイル適応させたりすることができます。例えば、今回やってみる『::before』という擬似要素だと、選択した要素の前に、最初の子要素を作ってスタイル適応させます。『content: “アイコン〇〇”;』というプロパティも良く使われます。

『::before』のほかにも『::after（選択した要素の後）』『::first-letter（最初の文字）』『::first-line（ブロック要素の最初の行）』などがあります。

擬似要素 (Pseudo-elements) | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

普通に色を指定しただけだと、全体に色がついてしまう

たとえば、サイト全体のフォント色に黒が指定されていて、リストタグの『ul』に色を指定した場合はこうなります。 マーカーだけでなく、全体が赤くなってしまいました。

そのほか、『li』だけに色を指定しても、その項目だけ色がかわるので、リストマーカーだけ色付けというわけにはいきません。その場合は、ちょっと特殊なCSS要素を使うことになります。

cssのbefore擬似要素を使ってみる

before擬似要素で、リストタグマーカー色を変えてみた例

リストタグの頭のマーカー部分が星マークで、オレンジ色になりました。真っ黒の点だけのリストより華やか&場合によっては見やすくなります。なお、コードはこちらのサイトを参考にしてみました。海外のサイトにつき英語標記です。最近では、日本のサイトでも擬似要素を使ったデザインは増えています。

（how to set Bullet colors in UL/LI html lists via CSS）
https://stackoverflow.com/questions/5306640/how-to-set-bullet-colors-in-ul-li-html-lists-via-css-without-using-any-images-or

HTML＆CSSのコードとワンポイント解説

.ul-colored1 {list-style:none;padding:0;margin:0;}
.li-colored1 { text-indent: -.7em;}
.li-colored1:before {content: “★”;color: orange;}

<ul class=”ul-colored1″>
<li class=”li-colored1″>項目１</li>
<li class=”li-colored1″>項目２</li>
<li class=”li-colored1″>項目３</li>
</ul>

ポイントは、『擬似要素beforeを使って、内容（content）で★や色を指定』『list-style:none;で、マーカーをなくしておく』というところでした。また、上記の海外サイトの紹介ではul/liに対してクラスをつけてなかったんですけど、ここだけでなく他の部分のul/liに干渉しないよう、クラス指定（クラス名は適当です）を入れました。

失敗例→list-style:none;後に、別のlist-styleが適応

ちなみに、list-style:none;が効いていないと、このように通常のマーカーと擬似要素マーカーが２重に表示されて失敗します。 原因は、CSSでlist-style:none;を書いたあとに、CSSの下のほうで、 ulにlist-style:disc;(マーカーに丸)が書いてあったからです。下に書いてあるものがあとから読み込むから優先で表示されて、擬似要素は指定してないから残った、みたいな感じでしょうか。

この場合は、該当部分のlist-styleをnoneにすることで、狙った表示ができました。他の部分とかぶっていてうまく表示しないみたいな事例もあるので、押さえておくと対処しやすくなります。

あとがき・まとめ

まとめるとこのような形でしょうか。特に『親・元要素のスタイルと２重適応』は、ありがちな失敗例かなと思います（管理人もやってたし）。こういう意図しない表示に気をつけて、ぜひ皆さんも、このCSSテクを使って、見やすい・おしゃれ・個性的なリストをサイトに入れてみてください。