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

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

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

デザインにもよりますがねー
サンプル①、簡単バージョン
See the Pen
【CSS】olのリストで①、②、③(丸数字)を表示させる、簡単バージョン by 125naroom (@125naroom)
on CodePen.
HTML
丸数字は、環境依存文字で書く。そのまま使うのもありな気もします。①②③と。
<ol> <li>① リスト1のテキスト</li> <li>② リスト2のテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> <li>③ リスト3のテキスト</li> <li>④ リスト4のテキスト</li> <li>⑤ リスト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>①</span>リスト1のテキスト</li> <li><span>②</span>リスト2のテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> <li><span>③</span>リスト3のテキスト</li> <li><span>④</span>リスト4のテキスト</li> <li><span>⑤</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; }
丸数字の環境依存文字
表示 | 数値参照 | 表示 | 数値参照 |
---|---|---|---|
① | ① | ② | ② |
③ | ③ | ④ | ④ |
⑤ | ⑤ | ⑥ | ⑥ |
⑦ | ⑦ | ⑧ | ⑧ |
⑨ | ⑨ | ⑩ | ⑩ |
⑪ | ⑪ | ⑫ | ⑫ |
⑬ | ⑬ | ⑭ | ⑭ |
⑮ | ⑮ | ⑯ | ⑯ |
⑰ | ⑰ | ⑱ | ⑱ |
⑲ | ⑲ | ⑳ | ⑳ |
さいごに

牛乳買いに行きましょう

角のお店がいいですよー
関連記事
おすすめ
かんれん
- web / 2019.4.18
- 【CSS】css-doodle を使って雨を降らせてみる
- web / 2022.3.18
- 【CSS】『プロパティ』と『値』の読み方をまとめました
- web / 2018.9.14
- 【CSS】Flexbox 上下中央揃え
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.10.02New
- Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。