低価格・高品質・最速のHTMLコーディングはクロノドライブへ

リストマーカーに色を付ける方法

ulやolを使った際に表示されるリストマーカーがありますが、もしもデフォルトとは違う色を使う必要が出てきた場合、わざわざ画像を用意して表示させたりしていませんか?そんなことをしなくとも、簡単にリストマーカーに色を付ける方法をご紹介します。

HTML

1<ul class="sampleList">
2<li><span>サンプルサンプルサンプル</span></li>
3<li><span>サンプルサンプルサンプル</span></li>
4<li><span>サンプルサンプルサンプル</span></li>
5</ul>

CSS

1.sampleList li {
2color: #FF0000;
3}
4.sampleList span {
5color: #000000;
6}

サンプルページ

たったこれだけです。li要素に色指定をすることで、リストマーカーも含めli内のすべての要素の色が指定されるので、文字列などをspanタグで囲み、改めて文字色を指定し直すことで、リストマーカーの色を指定することが可能です。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ