なんにもない日の頭の中はこんなもんだったりする

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

  • 2019.7.19
【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;
}

丸数字の環境依存文字

表示 数値参照 表示 数値参照
&#9312; &#9313;
&#9314; &#9315;
&#9316; &#9317;
&#9318; &#9319;
&#9320; &#9321;
&#9322; &#9323;
&#9324; &#9325;
&#9326; &#9327;
&#9328; &#9329;
&#9330; &#9331;

さいごに

きのこさん
牛乳買いに行きましょう
きのこさん
角のお店がいいですよー

関連記事

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

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

ネ・ネット | HUMOR ユーモア
itgirlie
  • 2019.11.11New
  • itgirlie
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
11月13日
11月12日