ｄｌリストにカウンタを付ける事例紹介

2019-6-6 要約：dlリストは、ＨＴＭＬ５より説明リストという定義になっている。この事例では、dtの説明項目（タイトル）にカウンタを設定している。、ＣＳＳ記述は僅か３個の設定（設置、加算、表示）で表示出来ます。

ページ後半の補助説明では、dlリストを使用している。ｄｌの意味合いからは内容的この方が、ｄｌリストとして合っているのでしょうね。

事例

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

信濃川　しなのがわ: ３６７ｋｍ長野県　新潟県
利根川　とねがわ: ３２２ｋｍ群馬県　茨城県　千葉県
石狩川　いしかりがわ: ２６８ｋｍ北海道
天塩川　てしおがわ　: ２５６ｋｍ北海道
北上川　きたかみがわ: ２４９ｋｍ岩手県　宮城県

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

琵琶湖　びわこ: ６６９．２ｋｍ^２滋賀県
霞ヶ浦　かすみがうら: １６８．２ｋｍ^２茨城県
サロマ湖　さろまこ: １５１．６ｋｍ^２北海道
猪苗代湖　いなわしろこ　: １０３．２ｋｍ^２福島県
中海　なかのうみ: ８５．７ｋｍ^２鳥取県　島根県

ＨＴＭＬ表記

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

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

<div class="rank">
<p><strong>日本の河川・長さランキング</strong></p>
<dl>
  <dt>信濃川　しなのがわ</dt>
  <dd>３６７ ｋｍ　長野県　新潟県</dd>
</dl>
	<!-- 以下　北上川まで省略 -->

<p><strong>日本の湖沼・広さランキング</strong></p
<dl>
  <dt>琵琶湖　びわこ</dt>
  <dd>６６９．２ ｋｍ<sup>２</sup> 滋賀県</dd>
	<!-- 以下　中海まで省略 -->
</dl>
</div>

<p><strong>日本の河川・長さランキング</strong></p>

<dl>

<dt>信濃川　しなのがわ</dt>

</dl>

<p><strong>日本の湖沼・広さランキング</strong></p

<dl>

</dl>

</div>

ＣＳＳ表記

.rank p {counter-reset:r_ctr;}          /* 名前を r_ctr 初期値０で設定 */
.rank dt:nth-of-type(n+1) {             /* dtの最初から最後迄 */
  counter-increment:r_ctr;}                /* r_ctr に１を加算 */
.rank dt:nth-of-type(n+1)::before {     /* dtの最初から最後迄 dt域の先頭に */
  content:"第"counter(r_ctr)"位 ";}        /* r_ctr値を表示 */

.rank p {counter-reset:r_ctr;} /* 名前を r_ctr 初期値０で設定 */

.rank dt:nth-of-type(n+1) { /* dtの最初から最後迄 */

counter-increment:r_ctr;} /* r_ctr に１を加算 */

.rank dt:nth-of-type(n+1)::before { /* dtの最初から最後迄 dt域の先頭に */

content:"第"counter(r_ctr)"位 ";} /* r_ctr値を表示 */

１．カウンタの設置と初期化、加算、表示

この説明では dl リストを利用し、カウンタ表示を装飾している。

　設置と初期化（１行目）: カウンタを入れたボックス内のpタグで、名前を r_ctr とし、初期値は０で設定される。 r_crt 初期値を変えたい時は、半角スペースで区切り数値を入れる。例） r_ctr 10　初期値１０となる。
　加算（２～３行目）: dt:nth-of-type(n+1) 疑似クラス指定で dt 1番目から最後迄に、 counter-increment: r_ctr;でカウンタに１を加算する。加算値を変えたい場合は、カウンタ名の後に半角スペース区切りで数値を入れる。例えば、２を加算するの場合は、 r_ctr 2 。
　表示（４～５行目）: dt:nth-of-type(n+1) 疑似クラス指定で dt 1番目から最後迄に、疑似要素::beforeで設定した先頭dtに挿入される。
content: “第”counter(r_ctr)”位”;でカウンタ値を表示する。カウンタ値の前に「第」、後に「位」を挿入している。

上記のカウンタの装飾について参考までに、 ::before {} の中に以下を記述。

  background-color: #000;
  color: yellow;
  display: block;
  float: left;             /* ｄｔにカウンタと文字を横並び設定 */
  line-height: 22px;
  text-align: center;
  height: 22px;
  width: 35px;
  border-radius: 7px;

background-color: #000;

color: yellow;

display: block;

float: left; /* ｄｔにカウンタと文字を横並び設定 */

line-height: 22px;

text-align: center;

height: 22px;

width: 35px;

border-radius: 7px;

２．カウンタの連番タイプ

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