「リスト」ブロックで丸数字を使用する方法

はじめに

「リスト」ブロックで丸数字を使用する方法には、次の2つの案があります（表1参照）。

丸数字を使用する方法

案	方法	特徴
1	疑似要素を使用	`::before`などの疑似要素で円と数字を組み合わせて丸数字を表現する。デザインの自由度は高いが、円の大きさと数字のサイズを調整する手間が必要。
2	テキストとして丸数字を入力	直接、文字として丸数字（①②③…）を入力する。サイズ調整が不要で簡単。

特に、箇条書きの書き出し位置を揃える点で、案2の方が簡単です。

この記事では、この方法について説明します。

以下の手順で実装します。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  text-indent: hanging 1em;
}

今回紹介した方法を使えば、「リスト」ブロックで丸数字を簡単に表現できます。
特に、テキストとして直接入力する方法は調整の手間が少なく、すぐに利用できるのが魅力です。
箇条書きの書き出し位置も揃いやすいため、デザインと可読性を両立させたい場合におすすめです。