列数と列幅に自由に対応したカウンタ付きulリスト表を作るCSSの記述・display:flex
要約 : 縦横のリスト表に、縦(行)のカウンタを表示します。CSSの「counter-increment」を利用し、僅か3個の規則宣言(設置、加算、表示)で表示しています。
リスト表は、列数と列幅を自由に設定出来る汎用型で、疑似クラスのnth-of-typeタイプを利用しています。クラスを1つ追加するだけで、サイトやページ内に幾つも異なったタイプの表を設置出来ます。
注:1列の表には、対応していません。
事例 5行5列、先頭列に連番表示(初期値:10)。
- あいうえお
- アイウエオ
- AIUEO
- aiueo
- かきくけこ
- カキクケこ
- KAKIKUKEKO
- kakikukeko
- さしすせそ
- サシスセソ
- SASHISUSESO
- sashisuseso
- たちつてと
- タチツテト
- TACHITHUTETO
- tachithuteto
- なにぬねの
- ナニヌネノ
- NANINUNENO
- naninuneno
HTML表記 2行目以降は省略。1列目にカウンタ値が入る設定。
1 2 3 4 5 6 7 |
<div class="order_list jirei_1"> <ul> <li></li><li>あいうえお</li><li>アイウエオ</li><li>AIUEO</li><li>aiueo</li> </ul> <!-- 以下、省略 --> </div> <!-- 1列目に文字や記号を記述するとカウンタ値はその前に挿入される --> |
クラスを1つ追加しています。
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 |
.order_list{counter-reset: ctr_1 10;} /* 名前を ctr_1 として初期値10で設定 */ .order_list ul{ /* 横並びフレックス・ボックス設定 */ display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; flex-wrap: wrap;} /* 列内文字の折り返しを表示 */ .order_list li:first-of-type{ /* 最初の列(連番用)中央配置 */ text-align:center;} .order_list ul:nth-of-type(n+1) li{ /* 罫線の設定・行の最初から最後迄の列 */ border-top:1px solid #000; /* 上部罫線 */ border-left:1px solid #000;} /* 左罫線 */ .order_list ul li:last-of-type{ /* 最後の列 */ border-right:1px solid #000;} /* 右罫線 */ .order_list ul:last-of-type li{ /* 最終行の各列 */ border-bottom:1px solid #000;} /* 下部罫線 */ .jirei_1 li:first-of-type{ /* 最初の列(連番用)幅 */ width:4%;} /* 幅4% */ .jirei_1 li:nth-of-type(n+2){ /* 行内の列2番目から最後まで */ width:22%; /* 幅22% */ padding-left:5px;} /* 先頭文字列にスペース */ .order_list ul:nth-of-type(n+1){ /* 行の1番目から最後まで */ counter-increment: ctr_1;} /* ctr_1 にプラス1 */ .order_list li:first-of-type::before{ /* 列の1番目に */ content: counter(ctr_1);} /* カウンタ(ctr_1)を表示 */ |
CSS記述順序は、1.カウンタの初期化 2.ボックス・レイアウト 3.カウンタ加算と表示
補足説明-1.カウンタの設置と初期化、加算、表示
- Line No
- 説 明
- 1
- 設置と初期化 ctr_1 10;は、初期値10。数値(10)の未記入は初期値は0となる。入れる位置は連番を振る要素の親要素に。
- 28-29
- 加算 ul:nth-of-type(n+1)指定で行の1番目から最後迄、counter-increment: ctr_1;でカウンタに1を加算する。加算値を変えたい場合は、カウンタ名の後に半角スペース区切りで数値を入れる。
例えば、2を加算するの場合:ctr_1 2;。
- 31-32
- 表示 li:first-of-type::before 指定で列の1番目にcontent: counter(ctr_1);でカウンタ値を表示する。カウンタ値の前後に文字や記号を入れる場合は、以下のように。
“第”counter(ctr_1);“回”
補足説明-2.列数と列幅を自由に設定する記述
- Line No
- 説 明
- 3-20
リスト表の基本設定部分(ページやサイト内)で共通に使える。
- 22-26
列数・列幅を設定する2つ目のクラスのCSS記述です。事例は、5列で1列目は狭く、2~5列目は均等幅。このクラスを1つ追加するのがポイントです。
列数・列幅が異なる表はそれぞれのクラス名で設定すれば、何個でも作成出来ます。尚、26行目は、2列目以降の文字列先頭に5pxの余白指定で、任意に設定下さい。
5列均等幅の例
1.jirei_a li:nth-of-type(n+1){width:19.5%;}4列共、個別幅の例
1234.jirei_b li:nth-of-type(1){width:9%;}.jirei_b li:nth-of-type(2){width:19%;}.jirei_b li:nth-of-type(3){width:29%;}.jirei_b li:nth-of-type(4){width:39%;}幅(%)の指定 %の合計値は、100%以下で97%位に。