CSSでリスト要素につける連番をカスタマイズする
HTMLのol要素ではリストアイテムに対して連番をあてることができますが、デフォルトでいくつかのスタイルが用意されているものの、デザインに合わないこともあるかと思います。そこで今回はリストアイテムにあてる連番をカスタマイズする方法についてまとめていきたいと思います。
まずはol要素で連番をあてるリストを作成します。CSSでは、list-style-typeのプロパティでデフォルトの連番があてられるスタイルを指定できます。
このように、list-style-typeプロパティを使う方法では連番の形が限定的になってしまいますが、li要素に対して「counter-increment」プロパティを使うことで連番の形を独自のものにすることができます。
このcounter-incrementプロパティですが、その名の通り、CSSでカウンター増やしていくことができます。使い方はリストのアイテム要素となるものに対して、下記のようにcounter-incrementプロパティを設定します。そして値には任意の変数名を指定します。
【SCSS】
今回はCSSでリストアイテムにあてる連番をカスタマイズする方法をまとめてみました、nth-childなどのセレクタで実装しようとするとなかなか面倒ですが、counter-incrementプロパティを使うことで、リストアイテムの増減時にも自動で対応できるのでとても便利ですよね、機会があれば是非試してみてください。
// HTML <ol> <li>東京都</li> <li>大阪府</li> <li>北海道</li> </ol> // CSS ol { list-style-type: decimal; }このようにコーディングした場合、下記のように表示されるようになります。
1. 東京都 2. 大阪府 3. 北海道上記は数字での連番ですが、list-style-typeプロパティに指定する値を変えることでいろんな表記にすることができます。主なものをいくつか挙げておきます。
decimal-leading-zero | ゼロがついた数字(01. 02. 03. ........) |
---|---|
lower-alpha | 小文字アルファベット(a. b. c. ........) |
cjk-ideographic | 漢数字(一. 二. 三. ........) |
upper-roman | 大文字ローマ数字(Ⅰ. Ⅱ. Ⅲ. ........) |
katakana | カタカナでのアイウエオ(ア. イ. ウ. ........) |
hiragana-iroha | ひらがなでのいろは(い. ろ. は. ........) |
ol { list-style-type: none; li { counter-increment: number; &::before { content: "No."counter(number)":"; } } }そして、before擬似要素もしくはafter擬似要素のcontentプロパティに、counter関数を入れ、その引数に先ほどの変数名を指定します。また前後には文字列を合わせることができます。これで出力してみると、次のようにカスタマイズした連番をあてることができます。
No.1:東京都 No.2:大阪府 No.3:北海道counter関数の第二引数には、先ほど紹介したlist-style-typeプロパティの値を指定することで出力されるフォーマットを変えることができます。 【SCSS】
ol { list-style-type: none; li { counter-increment: number; &::before { content: "その"counter(number, cjk-ideographic)"、"; } } }そうすると次のような文言にもマッチした連番をあてることができますね。
その一、東京都 その二、大阪府 その三、北海道また、文書の見出しのように入れ子で連番を振りたいときは、counter-resetプロパティを使って、指定した要素ごとに連番をリセットすることができます。 【HTML】
<dl> <dt>大項目</dt> <dd>小項目</dd> <dd>小項目</dd> <dt>大項目</dt> <dd>小項目</dd> <dd>小項目</dd> </dl>例えば上記のような場合には、大項目ごとに小項目の連番をリセットする必要があります。ですので、大項目にあたるdt要素に対して下記のようにcounter-resetプロパティを指定します。 【SCSS】
dl { dt { counter-increment: heading; counter-reset: lead; &::before { content: "第"counter(heading)"条:"; } } dd { counter-increment: lead; &::before { content: counter(lead)"項:"; text-indent: 1em; } } }counter-resetプロパティの値には、連番をリセットしたいcounter-incrementの値を指定します。そうすると下記のように特定の項目ごとに連番をリセットすることができます。
第1条:大項目 1項:小項目 2項:小項目 第2条:大項目 1項:小項目 2項:小項目これでいろんなケースにも対応できますね!また、あまり用途がないかもしれませんが、counter-incrementプロパティの値に入れる変数名の後に半角スペースを入れて整数値を指定すると、その整数値分だけカウントを進めることができます。
// 2ずつ連番が振られる counter-increment: number 2;
今回はCSSでリストアイテムにあてる連番をカスタマイズする方法をまとめてみました、nth-childなどのセレクタで実装しようとするとなかなか面倒ですが、counter-incrementプロパティを使うことで、リストアイテムの増減時にも自動で対応できるのでとても便利ですよね、機会があれば是非試してみてください。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories