狼読
[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はうまく動作せず、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>
数字の背景を丸い円形状にした順序付きリスト
- olのデザインを変えてみよう
- olの前の数字のデザインを変えてみよう
- olの使いこなそう
上述のように、円形状の中に数字が書かれた順序付きリストが出来上がりましたね。
まとめ
今回は、順序付きリストの数字のデザインをオリジナルデザインにする方法をご紹介させていただきました。olを使っていると数字が出てきますのでこんな方法もあるんだという気づきになれば幸いです。
![](https://info-wcn.com/wp-content/uploads/2020/07/book_640_360.jpg)
お空をかけるプログラマー
関連記事
Related Post