*

ウェッブ制作

ホーム >  Web制作 >  サイト編集支援 > 
連番付きdlリスト表 MENU 

dl dt ddリストに連番を付ける事例紹介

要約 :dlリストは、HTML5より説明リストという定義になっている。この事例では、dtの説明項目(タイトル)に連番を設定している。、CSS記述は僅か3個の設定(設置、加算、表示)で表示出来ます。ページ後半の補助説明でも、dlリストを使用している。事例の内容的には、こちらの方が良いのでしょうね。 公開

事例

日本の河川・長さランキング

信濃川 しなのがわ
367 km 長野県 新潟県
利根川 とねがわ
322 km 群馬県 茨城県 千葉県
石狩川 いしかりがわ
268 km 北海道
天塩川 てしおがわ 
256 km 北海道
北上川 きたかみがわ
249 km 岩手県 宮城県

日本の湖沼・広さランキング

琵琶湖 びわこ
669.2 km 滋賀県
霞ヶ浦 かすみがうら
168.2 km 茨城県
サロマ湖 さろまこ
151.6 km 北海道
猪苗代湖 いなわしろこ 
103.2 km 福島県
中海 なかのうみ
85.7 km 鳥取県 島根県

HTML表記

表の左右配置など修飾は記述していない。

親ボックスを作り、その中にdlリストを入れる、。事例では、ボックスのclass名を rank にしている。

CSS表記

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 {} の中に以下を記述。

2.カウンタの連番タイプ

counter(r_ctr,upper-alpha)のように、半角カンマで区切りでタイプ名を入れる。upper-alphaは、ABC順。その他のタイプ → デザイン・スタジオ・エフ様
全てのパソコンで利用出来るタイプは少ないので、使用には注意が必要。