CSSで自動ナンバリングして装飾する

HTMLのリストを利用して、CSSで自動的にナンバリングしてみようと言う感じのアイデアなんですが、そんなに新しいやり方と言ったわけではなく極簡単に色々と応用できると思われますのでいかがかと。

ひとまずのところ、文字で説明してもわかりにくいかと思うので、今回も例を貼ってみます。

HTML

よくあるリストを作っておきます。もしナンバリングしたいということであれば通常はolを使うわけですが、ナンバリングも色々とありますし、それをちょっと装飾してみようってのが今回の目的なので、olであろうとulであろうと何でも良いわけなんですが、今回はulで。

見てもらってわかるように、リストの中にタイトルがあるだけです。

CSS

cssはこんな感じになってます。

さて、ひとまず、リストのスタイルはnoneで消しておきます。ナンバリングについてはCSS2のcounterと言うのを使います。リストが増えれば自動的にナンバリングをしていってくれます。
注意点としては、●で囲むかどうかだと思われます。上の設定では2桁ぐらいまでは何とかイケるかも知れませんがナンバーが100などの3桁になった時に丸が楕円になったりするかも知れません。そういう時は予め、リストのマージン(上では上側に5px)をやや間隔とっておき、数字を囲むサイズを各widthで調整して、かつpadding等も調整しておけば3桁でもイケると思います。
min-widthとmax-widthがあるのは、フォントが等幅でないので、1などの時は狭くそれ以外と大きさが異なるからです。ここらは便宜調整のこと。

●でやるので面倒な設定が必要ですが、例えばスクエアで囲む(borderと背景色の設定のみ)とか、アンダーラインあるいはサイドラインで装飾する場合はもっと簡単に装飾できると思います。

さて、カウンターの設定ですが、

このようにして、カウンターを初期化しておきます。hなどの見出しの場合は、bodyに初期化を入れておけば、h*が追加されるごとにナンバーが増えていきます。

このような感じになっています。

olも自動でナンバリングしてくれますが、counterを利用する際便利なのが、表示設定の所にあるcontentの部分になります。

例えばここを、

こんな感じにすれば、list 1、list 2・・・と言うふうにいじれるわけです。その場合はborder-radiusで●ではダメですが、アンダーラインやサイドラインで装飾ができたりします。
第 counter(number) 章とかにしておけば、第1章、第2章と言うようなこともできます。

カウンターのプロパティ値は色々とあって、例えば、

とか色々とあります。ulやolよりも柔軟に対応できるので便利といえば便利ですね。

参考リンク
CSSカウンタの利用(MDN)

スポンサーリンク

シェアする

フォローする