【CSS】olのリストで①、②、③（丸数字）を表示させる

olのリストで①、②、③（丸数字）を表示させる。
何かと使うのでメモ。

まるいほうがかわいいですねー

デザインにもよりますがねー

サンプル①、簡単バージョン

See the Pen
【CSS】olのリストで①、②、③（丸数字）を表示させる、簡単バージョン by 125naroom (@125naroom)
on CodePen.

HTML

丸数字は、環境依存文字で書く。そのまま使うのもありな気もします。①②③と。

<ol>
  <li>&#9312; リスト1のテキスト</li>
  <li>&#9313; リスト2のテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
  <li>&#9314; リスト3のテキスト</li>
  <li>&#9315; リスト4のテキスト</li>
  <li>&#9316; リスト5のテキスト</li>
</ol>

CSS

『ol』の、『list-style』は『none』にする。数字の後は半角スペース、見た目が綺麗。折り返しは『padding-left』と『text-indent』で調整。ここは『em』を使うのがベスト。『1.3em』なら『-1.3em』、『1.5em』なら『-1.5em』、ここはデザインによって調整すればOK。

ol  {
  margin: 0;
  padding: 0
}
ol li  {
  list-style: none;
  padding-left: 1.3em;
  text-indent: -1.3em;
}

サンプル②、spanで囲って丁寧バージョン

See the Pen
【CSS】olのリストで①、②、③（丸数字）を表示させる by 125naroom (@125naroom)
on CodePen.

HTML

丸数字は、環境依存文字で書く。そのまま使うのもありな気もします。①②③と。

<ol>
  <li><span>&#9312;</span>リスト1のテキスト</li>
  <li><span>&#9313;</span>リスト2のテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
  <li><span>&#9314;</span>リスト3のテキスト</li>
  <li><span>&#9315;</span>リスト4のテキスト</li>
  <li><span>&#9316;</span>リスト5のテキスト</li>
</ol>

CSS

『ol』の、『list-style』は『none』にする。数字部分をspanで囲んで調整する。少し手間だが使いまわせるので便利ではある。

ol  {
  position: relative;
  margin: 0;
  padding: 0
}
ol li  {
  list-style: none;
  list-style-position: outside;
  margin: 0;
  padding-left: 1.25em
}
ol li span {
  position: absolute;
  left: 0;
  margin: 0
}

サンプル③、spanや①（環境依存文字）は無しバージョン

See the Pen
【CSS】olのリストで①、②、③（丸数字）を表示させる、spanや①は無しバージョン by 125naroom (@125naroom)
on CodePen.

HTML

①、②、③の環境依存文字は使わず、CSSだけで丸文字を作る。

<ol>
  <li>リスト1のテキスト</li>
  <li>リスト2のテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
  <li>リスト3のテキスト</li>
  <li>リスト4のテキスト</li>
  <li>リスト5のテキスト</li>
</ol>

CSS

『ol』の、『list-style』は『none』にする。『counter-reset』と『counter-increment』で数字をカウント化する。HTMLの記述はシンプルですがCSSでの調整が少々面倒なのであまりおすすめはできません。。

ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  font-size: 16px;
  line-height: 1.5;
  padding-left: 30px;
  position: relative;
}
li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #333;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  color: #ffffff;
  font-size: 85%;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
}

丸数字の環境依存文字

さいごに

牛乳買いに行きましょう

角のお店がいいですよー

関連記事

【デザインツール】よく使う環境依存文字をまとめました