狼読

 
2020/05/02

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

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

HTMLのご紹介

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

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

サンプルの実装例

  1. olのデザインを変えてみよう
  2. olの前の数字のデザインを変えてみよう
  3. 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>

サンプル実装例

  1. olのデザインを変えてみよう
  2. olの前の数字のデザインを変えてみよう
  3. 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>

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

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

上記のように数字を出すことに成功しましたね。olにcouter-resetを設定しないと、liに設定したcounter-incrementはうまく動作せず、1が3つ並ぶような動作になってしまいます。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>

数字の背景を丸い円形状にした順序付きリスト

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

上述のように、円形状の中に数字が書かれた順序付きリストが出来上がりましたね。

まとめ

今回は、順序付きリストの数字のデザインをオリジナルデザインにする方法をご紹介させていただきました。olを使っていると数字が出てきますのでこんな方法もあるんだという気づきになれば幸いです。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/31

[html]placeholderを使いこなしてinputに入力サンプルを入れてみよう

2020/06/01

[jquery]テキストボックスが入力された時にどんな文字が入力されているのかを取得してみる

投稿カレンダー

2020年12月
 123456
78910111213
14151617181920
21222324252627
28293031  

Technology

category

©狼読