CSSのみで実現！liタグにカスタムナンバリングと文字を追加する簡単ガイド｜DAD UNION

Webデザインの世界では、ページの視覚的魅力と利便性が重要です。今日は、CSSのcounter-incrementプロパティを活用し、リスト項目（liタグ）にナンバリングとカスタムテキストを追加する方法を詳しく解説します。これは、読者が一覧を追いやすくするだけでなく、デザインの一環としても非常に効果的です。

Contents

CSSを使ってリスト項目にナンバリングを追加する
HTMLの構造
liタグにナンバリングと前後に文字をつけて表示するデモページ
さらなる応用例
- フォントスタイルのカスタマイズ
- 数字のフォーマット変更
まとめ

CSSを使ってリスト項目にナンバリングを追加する

基本的なCSSの設定

まず、基本的なCSSの構造から見ていきましょう。以下のスタイルは、ウェブページ全体のフォントサイズやリストスタイルを設定しています。

body{
  padding: 0;
  margin: 0;
  font-size: 18px;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:15px 0 30px 0;
  font-size: 18px;
}
ul{
  list-style: none;
  width: 400px;
  margin: 0 auto;
}

counter-incrementの利用

counter-incrementプロパティは、CSSカウンターをインクリメント（増加）するのに使われます。このプロパティをliタグに適用することで、各リスト項目に自動的に番号を付けることができます。

ul > li {
 counter-increment: count;
 position: relative;
 padding: 0 0 8px 4rem;

}

カスタムテキストの追加

次に、:before擬似要素とcontentプロパティを使用して、各リスト項目の前に「第」と「弾:」というテキストを追加します。この部分はカスタマイズ可能で、任意のテキストに変更できます。

ul > li:before {
 content:  "第"counter(count)"弾:";
 position: absolute;
 top: 10%;
 left: 0;
}

HTMLの構造

CSSスタイルを適用するためには、適切なHTML構造が必要です。基本的には、ulとliタグを使用します。

<h1>liタグにナンバリングと前後に文字をつけて表示</h1>

<ul>
  <li>テキスト1テキスト1テキスト1</li>
  <li>テキスト2テキスト2</li>
  <li>テキスト3</li>
  <li>テキスト4テキスト4</li>
  <li>テキスト5テキスト5テキスト5</li>
</ul>

liタグにナンバリングと前後に文字をつけて表示するデモページ

実際にこのスタイルがどのように機能するかを見るために、デモページを用意しました。以下のリンクからアクセスできます。デモページでは、実際のリスト項目がどのように表示されるかを確認できます。

liタグにナンバリングと前後に文字をつけて表示するデモ

さらなる応用例

この基本的な設定を応用して、さまざまなスタイリングが可能です。たとえば、異なるフォントスタイルや色を適用することで、リストの見た目をさらに魅力的にすることができます。また、カウンターの数字のフォーマットを変更することも可能です。

フォントスタイルのカスタマイズ

ul > li:before {
  font-weight: bold;
  color: #333;
}

数字のフォーマット変更

@counter-style roman {
  system: additive;
  symbols: I V X L C D M;
  addends: 1 5 10 50 100 500 1000;
  range: 1 1000;
}
ul {
  list-style: roman inside;
}