箇条書きリストの点の色を変える３つの方法／CSS

アイキャッチ／リストカスタマイズ
2022年04月04日
はじめに

カスタマイズをする手順、CSSの書き方、セレクタの調べ方をこちらにまとめました。初心者の方のお役に立てる内容になっておりますのでご覧になってみてください。

CSSコードの書き方とセレクタの調べ方（デベロッパーツール使用）をご紹介（初心者向け）
当ページの記事ですアピールエリアのカスタマイズやサイト型トップページの作り方を公開してから、これ私のカスタマイズだー♪と分かるCocoonサイトがちらほら見られるようになりました。公開したカスタマイズを使ってくださるのは嬉しいです!一方で、
turicco.com

記事を書くときに使われる箇条書きのリスト。

要点を見やすく、伝えやすくするためにどんなサイトでも使われていますね。

今回はリストのデザインを少し変えてみる（点の色を変える）カスタマイズについて。

３つの方法をご紹介します。

箇条書きリストBefore／After

デフォルトでは自動的に先頭に黒丸がついたごく普通の箇条書きになります。

  • リスト１
  • リスト２
  • リスト３

シンプルで何も問題はありませんが、もう少し印象に残るように遊び心で可愛くしてみたいと思います！

最初の黒丸・の部分を少しだけ大きくして色をつけると…こんな感じに。

  • リスト１
  • リスト２
  • リスト３

これだけで柔らかくて可愛い感じになりませんか♪

それでは箇条書きの作り方から色を変える方法まで、コピペできるコードを公開します。

この記事ではCSSを使いますが、編集には子テーマを使用しましょう。
（ワードプレスの場合：ダッシュボードの外観 → テーマの編集 → style.css）

HTML／箇条書きの作り方

まずはHTMLでul、olタグなどを使って箇条書きリストを作成します。

Cocoonなど、テーマによってはブロックエディタで箇条書きを選択するだけで自動的にHTMLが作成されます。>>作り方をスキップする

箇条書きに使うタグについて

HTMLではul、ol、liの3つのタグを使って箇条書き（リスト）を作ることができます。

  • ul：Unordered Listの略（順序のない箇条書き）
  • ol：Oredered Listの略（順序ありの箇条書き）
  • li : list itemの略（リストの項目を表示するために使用するタグ）

基本的にul&liのセット、またはol&liのセットで使います。

タグの書き方の例

箇条書きリスト

  • 前後を<ul></ul>ではさむ
  • ひとつひとつの箇条書きの項目は<li></li>ではさむ（liタグは何個でも使えます）
<ul>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>
ブラウザではこのように表示されます
  • 1つめの項目
  • 2つめの項目
  • 3つめの項目

番号付きのリスト

またタグを<ol>にすると番号付きのリストになります。

<ol>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ol>
ブラウザではこのように表示されます
  1. 1つめの項目
  2. 2つめの項目
  3. 3つめの項目

（※番号に背景色はつきません）

箇条書きの点の色を変える３つの方法

番号なしリストの先頭につく黒丸（・）をカスタマイズする場合は３つの方法があります。

  1. 項目のliをspanで囲んで色を変える
  2. markerという擬似要素を使う
  3. beforeという擬似要素を使う

①li（リストの項目）をspanで囲む

まずは単純に項目をspanで囲む方法について。

span単体では特に意味を持たないタグですが、<span>～</span>で囲った部分をインライン要素としてグループ化することができます。改行されず、文章の一部分を装飾するときによく使われます。

  1. HTMLで <li>の内容を<span></span>タグで囲む
  2. CSSでli要素に黒丸につけたい色を指定する。（文字すべてがこの色になります）
  3. spanで囲んだ部分につけたい色を指定する（部分的に上書きするイメージ）

<ul>
  <li><span>1つめの項目</span></li>
  <li><span>2つめの項目</span></li>
  <li><span>3つめの項目</span></li>
 </ul>
li{
  color: lightblue;
}

li span {
  color: black;
}

See the Pen list-span by はっちゃん (@hacchan) on CodePen.

単発な箇条書きならこの方法でもいいけど、li項目を毎回spanで囲むのは手間がかかりますね…

他にいい方法がないかな？？

②デフォルトの疑似要素markerを使う

①は単純にspanで囲んだ部分の色を変更するだけでしたが、②～③は疑似要素？と言っても分かりずらいので特徴を書いてみます。

marker
  • liタグにデフォルトで付いていてリストの点や数字を作っている
  • CSSの記述は少なくて済む
  • 使えるプロパティが限られている
  • 対応ブラウザが限られる
  • 柔軟なカスタマイズには向かない
before
  • デフォルトの点をlist-style: none;で消して新たに作り直すときに使う
  • 記述するCSSは多くなる
  • 使えるプロパティ、ブラウザに制限はなし
  • 柔軟なカスタマイズができる

箇条書きリストに使われるliのCSSを見てみると::markerという擬似要素があります。

これで黒丸（・）が作られています！

この疑似要素::markerにカスタマイズしたい項目（プロパティ）を記述するだけ。

例）点の色を赤にしたいときのCSSの書き方

<ul>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>
li::marker {
color: red;/*点を赤色にする*/
font-size:1.3rem;/*点を少し大きく*/
}
ブラウザではこのように表示されます
  • 1つめの項目
  • 2つめの項目
  • 3つめの項目

簡単ですが対応ブラウザが限られてしまうのが難点。

Chromeでは動作するけど、私のスマホ（android）は対応していないよ～

また疑似要素で指定できるプロパティには制限があります。

::markerで使えるプロパティの例

  • font系
  • white-space
  • color
  • content
  • animation・transition系など

これらのデメリットを考えると次に書く方法が良いかもしれません。

③新たに疑似要素beforeを作成する

続いて新たに疑似要素を使う方法です。

ブラウザ、プロパティの制限がなく柔軟なカスタマイズができるので、この方法をマスターすればいろいろな応用ができて便利です。

簡単にイメージするとこんな感じです。

  1. 箇条書きのリストマーク（・）を非表示にする
  2. CSSで円を作って位置を合わせる

  • ←つまりは新しく作成した丸ポチをこのようにしてリストマークっぽく見せています！

CSSで設定する内容についての詳細

  • list-style: none;でリストマークの点を消す
  • li:beforeで項目の先頭に疑似要素を作成する
  • content: ”;で実体化させる
  • widthとheightは点の大きさとなり、同じ数値にして正方形を作る
  • その正方形を、border-radius: 50%;でまん丸にする
  • positionを使って作った円の位置を調整する
positionの使い方
  • 親要素のliにposition: relative;を指定（ここを基準とする）
  • 疑似要素:beforeにposition: absolute;（ここを動かす）
  • left（左からの位置）、top（上からの位置）を適当な場所へ配置する（パソコン、スマホとも位置を確認して合わせる）

点を新しく作るCSSはこちら（ul指定）

それではコードをご覧ください。

/* リストの点*/
ul {
list-style: none;/*点を消す*/
padding-left:0;/*左の余白*/
line-height:1.8;/*行の高さ*/
}

ul li{ 
position: relative;/*ここを基準に*/
padding-left:20px;
}

ul li:before {
background-color: lightblue;/*色はここで変更*/
position: absolute;/*ここを動かす*/
content: '';
width: 6px;/*円の幅*/
height: 6px;/*円の高さ*/
top:10px;/*高さの位置調整*/
left: 0em;/*左側位置調整*/
border-radius: 50%;
}

/**480px以下**/
@media screen and (max-width: 480px){
ul li{ 
padding-left:20px;
}

ul li:before {
left:0;
top:11px;/*高さの位置調整*/
}
}

こちらのコードはサイト内でulタグを使ったすべてのリストに適用されます。意図しないところでレイアウトが部分的に崩れることがあるので、個人的にはあまりオススメしません。

部分的にデザインを適用する方法をお試しください。

部分的にCSSを適用させたいとき（クラス名指定）

部分的にデザインを適用させる場合はこちらを使います。

HTMLの<ul>タグの中にclass=”list-3″といったクラスを指定（””の中のクラス名は任意に決めてOK）,CSSではクラス名に.をつけてセレクタとして記述します。

<ul class="list-3">
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>
/* リストの点*/
.list-3 {
list-style: none;
padding-left:0;
line-height:1.8;
}

.list-3 li{ 
position: relative;/*ここを基準に*/
padding-left:20px;
}

.list-3 li:before {
background-color: lightblue;/*色はここで変更*/
position: absolute;/*ここを動かす*/
content: '';
width: 6px;/*円の幅*/
height: 6px;/*円の高さ*/
top:10px;/*高さの位置調整*/
left: 0em;/*左側位置調整*/
border-radius: 50%;
}

/**480px以下**/
@media screen and (max-width: 480px){
.list-3 li{ 
padding-left:20px;
}

.list-3 li:before {
left:0;
top:11px;/*高さの位置調整*/
}
}

※行の高さ（line-height）を変更すると点の位置がずれてしまうので、top（上からの位置）の値をパソコン表示、モバイル表示ともに調整してください。

See the Pen list(class) by はっちゃん (@hacchan) on CodePen.

点を四角にすることも

円の角丸を指定するborder-radiusを０にすることで、四角にすることもできます。

See the Pen list-square by はっちゃん (@hacchan) on CodePen.

<ul class="list-square">
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>
/* リストの点*/
.list-square {
list-style: none;
padding-left:0;
line-height:1.8;
}

.list-square li{ 
position: relative;
padding-left:20px;
}

.list-square li:before {
background-color: gray;/*色はここで変更*/
position: absolute;
content: '';
width: 6px;/*円の幅*/
height: 6px;/*円の高さ*/
top:10px;/*高さの位置調整*/
left: 0em;/*左側位置調整*/
border-radius: 0;/*円を四角にする*/
}

/**480px以下**/
@media screen and (max-width: 480px){
.list-square li{ 
padding-left:20px;
}

.list-square li:before {
left:0;
}
}

まとめ

箇条書きの点を装飾する方法を３つご紹介しました。

細かいところですが、自分好みの箇条書きが使えるとサイトに個性が出て記事を書く作業も楽しくなるかと思います。

やりやすい方法で試してみてくださいね。

Comment

タイトルとURLをコピーしました