OLタグの数字番号をCSSで丸く装飾表現するやり方を解説

この記事では、OLタグで表示される数字を丸で囲う方法を説明する。

HTMLで数字をつけたリスト表現したい場合、通常OLタグを使う。OLタグとは「Ordered List」の略で、順序のあるリストであるということ。反対に順序のないリストは「Unordered List」と呼ばれ、お馴染みのULタグである。

OLタグの番号を丸で表現するCSSのやり方

HTMLの用意

次のようなHTMLを用意しよう。これにスタイルシートを当てて数字を丸で表現していく。

<ol>
    <li>コメント</li>
    <li>コメント</li>
    <li>コメント</li>
    <li>コメント</li>
</ol>

OLタグのHTML
OLタグのHTML

丸パターン1

OLタグの数字を丸でデザイン
OLタグの数字を丸でデザイン

数字を丸で囲ったパターンがこちら。

ol {
  counter-reset:num;
  list-style-type: none!important;
  padding:0;
  margin:0;
}
ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

ol li:before {
  position: absolute;
  counter-increment: num;
  content: counter(num);
  display:inline-block;
  background:transparent;
  border:#555 1px solid;
  color: #555;
  font-family: 'Arial',sans-serif;
  font-weight:bold;
  font-size: 14px;
  border-radius: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  top: 10px;
}

丸パターン2

OLタグの数字を丸でデザイン
OLタグの数字を丸でデザイン

図のように、背景を色で埋めた丸のパターンがこちら。

ol {
  counter-reset:num;
  list-style-type: none!important;
  padding:0;
  margin:0;
}
ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

ol li:before {
  position: absolute;
  counter-increment: num;
  content: counter(num);
  display:inline-block;
  background: #555;
  color: #FFF;
  font-family: 'Arial',sans-serif;
  font-weight:bold;
  font-size: 14px;
  border-radius: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  top: 10px;
}

解説

OLタグの数字をデザインするポイントは、デフォルトの数字を非表示にし、counterで新たに数字を作ってデザインしているところ。次のように最小限の構成で表示を試すとわかりやすい。ちなみにこのcounterはCSS2から存在している。

ol {
  counter-reset:num; /* num変数を0で初期化 */
  list-style-type: none!important; /* デフォルトの数字を非表示 */
}
ol li:before {
  counter-increment: num; /* numに1を加算 */
  content: counter(num); /* numの値を表示 */
}

CSSのカウンターを使って数字を表示
CSSのカウンターを使って数字を表示

Webデザインのオススメ書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web界隈やデザイナーに大人気! Web関連の情報やデザインについて学べる『Webクリエイターボックス』の中の人、Manaによる渾身のHTML&CSSとWebデザインが学べる本。 Webサイト制作に必要な知識がすべて身につく! 今のWebサイトの作り方が一気に学べる!

KindleAmazonRakuten
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。

KindleAmazonRakuten
スラスラわかるHTML&CSSのきほん
スラスラわかるHTML&CSSのきほん

4万人が学んだベストセラーが、5年ぶりの大改訂! 小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版! 第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。 ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。 これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

KindleAmazonRakuten

Amazonでお得に購入するなら、Amazonギフト券がオススメ!

\Amazonギフトがお得/

コンビニ・ATM・ネットバンキングで¥5,000以上チャージすると、プライム会員は最大2.5%ポイント、通常会員は最大2%ポイントがもらえます!
Amazonギフト券

\この記事をシェアする/