【初心者でもわかる】リストの・（リストマーク）の色をかえる方法

どうも7noteです。リストマークの色を変更する方法

<ul>や<ol>などの<li>に使用されるリストマークや数字の色を変更する方法。
デフォルトのリストマークでは色を変えることができない（正確にはテキストのカラーと一緒になるので変えにくい）ので、疑似要素を使って再現します。

ソース

index.html

<ul>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ul>
<ol>
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
</ol>

style.css

ul li {
  list-style-type: none;  /* デフォルトのリストマークを非表示にする */
  position: relative;     /* 基準位置とする */
}
ul li::before {
  content: "・";           /* リストマークのかわりを */
  color: #f00;            /* 文字を赤色に指定 */
  position: absolute;     /* 相対位置に指定 */
  left: -1em;             /* 左に1文字分ずらした位置に配置 */
  top: 0;                 /* 上から0pxのいちに指定 */
}

ol {
  counter-reset: item;    /* 疑似要素で数字を使うときに指定 */
}
ol li {
  list-style-type: none;  /* デフォルトのリストマークを非表示にする */
  position: relative;     /* 基準位置とする */
}
ol li::before {
  counter-increment: item;    /* 疑似要素で数字を使うときに指定 */
  content: counter(item)'.';  /* 疑似要素で数字を使うときに指定 */
  color: #f00;            /* 文字を赤色に指定 */
  position: absolute;     /* 相対位置に指定 */
  left: -1em;             /* 左に1文字分ずらした位置に配置 */
  top: 0;                 /* 上から0pxのいちに指定 */
}

解説

リストマークの色を変更する方法として、spanと使った方法もありますが、その方法では毎回spanをつかわないといけなくなってしまうので、あまり現実的な方法ではありません。

なので疑似要素にリストマークの代わりとなる点（・）や数字をcontentで指定します。

表示位置はposition指定をおこない、左に1文字文ずらした位置に配置します。

まとめ

CSSのデフォルトのものは結構制約がついているものも多いので、そのようなときには疑似要素がとても活躍します。
ただし疑似要素で設定しているものはカーソルで選択したりテキストをコピーすることはできないので注意してください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ