dlリストにカウンタを付ける事例紹介
要約 :dlリストは、HTML5より説明リストという定義になっている。この事例では、dtの説明項目(タイトル)にカウンタを設定している。、CSS記述は僅か3個の設定(設置、加算、表示)で表示出来ます。
ページ後半の補助説明では、dlリストを使用している。dlの意味合いからは内容的この方が、dlリストとして合っているのでしょうね。
事例
日本の河川・長さランキング
- 信濃川 しなのがわ
- 367 km 長野県 新潟県
- 利根川 とねがわ
- 322 km 群馬県 茨城県 千葉県
- 石狩川 いしかりがわ
- 268 km 北海道
- 天塩川 てしおがわ
- 256 km 北海道
- 北上川 きたかみがわ
- 249 km 岩手県 宮城県
日本の湖沼・広さランキング
- 琵琶湖 びわこ
- 669.2 km2 滋賀県
- 霞ヶ浦 かすみがうら
- 168.2 km2 茨城県
- サロマ湖 さろまこ
- 151.6 km2 北海道
- 猪苗代湖 いなわしろこ
- 103.2 km2 福島県
- 中海 なかのうみ
- 85.7 km2 鳥取県 島根県
HTML表記
表の左右配置など修飾は記述していない。
親ボックスを作り、その中にdlリストを入れる、。事例では、ボックスのclass名を rank にしている。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="rank"> <p><strong>日本の河川・長さランキング</strong></p> <dl> <dt>信濃川 しなのがわ</dt> <dd>367 km 長野県 新潟県</dd> </dl> <!-- 以下 北上川まで省略 --> <p><strong>日本の湖沼・広さランキング</strong></p <dl> <dt>琵琶湖 びわこ</dt> <dd>669.2 km<sup>2</sup> 滋賀県</dd> <!-- 以下 中海まで省略 --> </dl> </div> |
CSS表記
1 2 3 4 5 |
.rank p {counter-reset:r_ctr;} /* 名前を r_ctr 初期値0で設定 */ .rank dt:nth-of-type(n+1) { /* dtの最初から最後迄 */ counter-increment:r_ctr;} /* r_ctr に1を加算 */ .rank dt:nth-of-type(n+1)::before { /* dtの最初から最後迄 dt域の先頭に */ content:"第"counter(r_ctr)"位 ";} /* r_ctr値を表示 */ |
1.カウンタの設置と初期化、加算、表示
この説明では dl リストを利用し、カウンタ表示を装飾している。
- 設置と初期化(1行目)
- カウンタを入れたボックス内のpタグで、名前を r_ctr とし、初期値は0で設定される。 r_crt 初期値を変えたい時は、半角スペースで区切り数値を入れる。例) r_ctr 10 初期値10となる。
- 加算(2~3行目)
- dt:nth-of-type(n+1) 疑似クラス指定で dt 1番目から最後迄に、 counter-increment: r_ctr;でカウンタに1を加算する。加算値を変えたい場合は、カウンタ名の後に半角スペース区切りで数値を入れる。 例えば、2を加算するの場合は、 r_ctr 2 。
- 表示(4~5行目)
- dt:nth-of-type(n+1) 疑似クラス指定で dt 1番目から最後迄に、疑似要素::beforeで設定した先頭dtに挿入される。
content: “第”counter(r_ctr)”位”;でカウンタ値を表示する。カウンタ値の前に「第」、後に「位」を挿入している。
上記のカウンタの装飾について参考までに、 ::before {} の中に以下を記述。
1 2 3 4 5 6 7 8 9 |
background-color: #000; color: yellow; display: block; float: left; /* dtにカウンタと文字を横並び設定 */ line-height: 22px; text-align: center; height: 22px; width: 35px; border-radius: 7px; |
2.カウンタの連番タイプ
counter(r_ctr,upper-alpha)のように、半角カンマで区切りでタイプ名を入れる。upper-alphaは、ABC順。その他のタイプ → デザイン・スタジオ・エフ様
全てのパソコンで利用出来るタイプは少ないので、使用には注意が必要。