狼読

2020/05/02

[css]olの前の数字のデザインを変えてみよう

今回は数字付きのリストを出してくれるolの前の数字のデザインを変えてみようと思います。数字が出て順序が出てくれるのは嬉しいですが、見た目がシンプルすぎてデザインを変えてみたい方がいらっしゃるかと思います。
そういった方向けに、olの前の数字のデザインをオリジナルデザインにする方法をご紹介したいと思います。

HTMLのご紹介

htmlのご紹介をしたいと思います。olの構造は至ってシンプルで数字の部分をオリジナルデザインにするからといって特別な構造にする必要はありません。当ブログの目次も同じような作りになっております。

<ol class="original_ol">
<li>olのデザインを変えてみよう</li>
<li>olの前の数字のデザインを変えてみよう</li>
<li>olの使いこなそう</li>
</ol>

サンプルの実装例

olのデザインを変えてみよう
olの前の数字のデザインを変えてみよう
olの使いこなそう

上記のようにolで囲みliでひとつずつ書きたいことを箇条書きに書いていきますと、箇条書きの項目の前に数字が自動でついていくのがolの役割となります。
しかし、このままでは味気ないですね。数字の色を変えたり、数字の背景を塗りつぶしたりしてデザインをオリジナルデザインにしていきましょう。

CSSを使って順序付きリストをオリジナルデザインにしてみよう

上述のhtmlを使って、順序付きリストをオリジナルデザインにしてみましょう。まずは、cssでこちらの数字を消してしまいます。
olでせっかく自動でついてくれる数字を消してしまったら、後から数字つけるのはjsとかで頑張らないといけないのでは？と思う方もいらっしゃるかと思いますがそんなことはありません。cssでナンバリングしてくれるものがありますのでご安心ください。

まずは上述通り数字を消してみようと思います。

<style>
 .original_ol li{
  list-style:none;
 }
</style>
<ol class="original_ol">
<li>olのデザインを変えてみよう</li>
<li>olの前の数字のデザインを変えてみよう</li>
<li>olの使いこなそう</li>
</ol>

サンプル実装例

olのデザインを変えてみよう
olの前の数字のデザインを変えてみよう
olの使いこなそう

上記のようにlist-style:noneをliに当てることで前の数字を消すことができましたね。そしてここからがこの記事の重要なところになります。
li:beforeを使うことでここに数字を入れ込んでいきます。

記述の仕方は次の通りになります。

<style>
 .original_ol{
    counter-reset: item;
  }
 .original_ol li{
  list-style:none;
 }
 .original_ol li:before{
    counter-increment: item;
    content: counter(item);
    display: inline-block;
  }
</style>
<ol class="original_ol">
<li>olのデザインを変えてみよう</li>
<li>olの前の数字のデザインを変えてみよう</li>
<li>olの使いこなそう</li>
</ol>

サンプル実装例（数字をつけてみよう）

olのデザインを変えてみよう
olの前の数字のデザインを変えてみよう
olの使いこなそう

上記のように数字を出すことに成功しましたね。olにcouter-resetを設定しないと、liに設定したcounter-incrementはうまく動作せず、１が３つ並ぶような動作になってしまいます。counter-resetは、カウンターの要素をリセットするのに使用します。また、counter-incrementはカウンターを進めるために使用します。このように順序付きのリストの数字を自作することができます。
ではこちらの数字のデザインを少し変えてみましょう。
そうですね。今回はサンプルとして、丸い円の中に数字が書かれているようなデザインにしてみましょう。

<style>
 .original_ol{
    counter-reset: item;
  }
 .original_ol li{
  list-style:none;
 }
 .original_ol li:before{
    counter-increment: item;
    content: counter(item);
    display: inline-block;
  }
</style>
<ol class="original_ol">
<li>olのデザインを変えてみよう</li>
<li>olの前の数字のデザインを変えてみよう</li>
<li>olの使いこなそう</li>
</ol>