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

【CSS】olのリストで①、②、③(丸数字)を表示させる
lのリストで①、②、③(丸数字)ってできますかー
できますよー

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

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;

さいごに

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

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

3

/

19

2024

Googleさんの
おすすめ

3

/

19

2024

デザインの記事

HAKUTAI WEDDING
増量計画
【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える