列数と列幅に自由に対応した汎用型カウンタ付きolリスト表
要約:ol表は、自動でカウンタを付けるのが特徴だが、以下のようなliを横に並べた縦横リスト表ではol縦(行)の連番が設定出来ない(筆者の知識不足か)。なので、CSSの「counter-increment」を利用して表示している。これでは、何らulリストと変わらないのだが。
リスト表は、列数と列幅を自由に設定出来る汎用型で、疑似クラスのnth-of-typeタイプを利用している。クラスを1つ追加するだけで、サイトやページ内に幾つも異なったタイプの表を設置出来る。
ulとolの違い
ul(Unordered List・並列列挙リスト)記述順に意味を持たない、ol(Ordered List・順序付きリスト)記述順が大事 という事になる。このページのリスト表と筆者が別ページで作成した「汎用カウンタ付ulリスト表」と表示は全く同じとなる。検索エンジンでは殆ど同じようだが、順序が大事と思う方は、olを使って下さい。
事例 日本の河川・長さランキング
- 順位
- 河川名
- ふりがな
- 長さ(km)
- 都道府県
- 信濃川
- しなのがわ
- 367
- 長野県 新潟県
- 利根川
- とねがわ
- 322
- 群馬県 茨城県 千葉県
- 石狩川
- いしかりがわ
- 268
- 北海道
- 天塩川
- てしおがわ
- 256
- 北海道
- 北上川
- きたかみがわ
- 249
- 岩手県 宮城県
HTML表記
1 2 3 4 5 6 7 8 9 10 |
<div class="ol_list flex"> <p class="font_bold mgn_t10 mgn_btm10 mgn_l15">事例 日本の河川・長さランキング</p> <ol> <li>順位</li><li>河川名</li><li>ふりがな</li><li>長さ(km)</li><li>都道府県</li> </ol> <ol> <li></li><li>信濃川</li><li>しなのがわ</li><li>367</li><li>長野県 新潟県</li> </ol> <!-- 以下省略 --> </div> |
1行目親ボックスのクラス指定で、2つ目に列幅と列数を指定するクラス(flex)を追加している。
CSS表記
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.ol_list{width: 100%;} /* ==========横並びリスト========== */ .ol_list ol{ display: flex; flex-wrap: wrap;} /* ==========カウンタ========= */ .ol_list p { /* pタグに */ counter-reset:counter;} /* 名前をcounter、初期値は0 */ .ol_list ol:nth-of-type(n+2) { /* olの2番目から最後迄 */ counter-increment:counter;} /* counterにプラス1 */ .ol_list ol:nth-of-type(n+2) /* olの2番目から最後迄 */ li:nth-of-type(1)::before { /* liの1番目の先頭に */ content:"第"counter(counter)"位 ";} /* counterの値を入れる */ /* ==========リスト表の設定========= */ .ol_list ol:first-of-type li{ /* 1行目のli(タイトル行) */ font-weight:bold;} /* フォントを太字 */ .ol_list li{ /* li全部を */ text-align:center; /* テキスト中央配置 */ line-height:25px;} /* 行の高さ 25px */ .ol_list ol{ /* olが自動で作る空間に */ margin-top: 0; /* 上部余白を取る */ margin-bottom: 0; } /* 下部余白を取る */ /* ==========列ごとに合わせた列幅設定========= */ .flex li:first-of-type{width:10%;} .flex li:nth-of-type(2){width: 15%;} .flex li:nth-of-type(3){width: 15%;} .flex li:nth-of-type(4){width: 15%;} .flex li:nth-of-type(5){width: 25%;} /* ========== 罫線の設定 ========= */ .ol_list li:nth-child(n+1) { border-top: 1px solid #000;} .ol_list ol:last-child li { border-bottom: 1px solid #000;} .ol_list li:nth-child(n+1) { border-left: 1px solid #000;} .ol_list li:last-child { border-right: 1px solid #000;} |
補足説明
- 1.リスト表の1行目のタイトルが不要の場合、以下を修正
- 1) CSS・11行目と13行目の(n+2)を(n+1)に修正
- 2) CSS・18~19行目を削除
- 2.列幅・列数に自由に対応する
- 1)HTML・リスト表の親ボックスに2つ目のクラス・flexを設定する。
- 2)CSS・1行目~25行目は共通でサイト内に1つあれば良い。
- 3)CSS・28行目から32行目、列の順に列数の数だけ列幅を設定する。
- 3)罫線の設定
- 1)35行目以降、罫線設定なので、不要の場合は削除する。