*

ウェッブ制作

Width =px

ホーム > UL・OL・DLリストとテーブル >
カウンタ付olリスト表・汎用型 MENU 

列数と列幅に自由に対応した汎用型カウンタ付きolリスト表

要約:ol表は、自動でカウンタを付けるのが特徴だが、以下のようなliを横に並べた縦横リスト表ではol縦(行)の連番が設定出来ない(筆者の知識不足か)。なので、CSSの「counter-increment」を利用して表示している。これでは、何らulリストと変わらないのだが。

リスト表は、列数と列幅を自由に設定出来る汎用型で、疑似クラスのnth-of-typeタイプを利用している。クラスを1つ追加するだけで、サイトやページ内に幾つも異なったタイプの表を設置出来る。 

ulとolの違い

ul(Unordered List・並列列挙リスト)記述順に意味を持たない、ol(Ordered List・順序付きリスト)記述順が大事 という事になる。このページのリスト表と筆者が別ページで作成した「汎用カウンタ付ulリスト表」と表示は全く同じとなる。検索エンジンでは殆ど同じようだが、順序が大事と思う方は、olを使って下さい。

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

  1. 順位
  2. 河川名
  3. ふりがな
  4. 長さ(km)
  5. 都道府県
  1. 信濃川
  2. しなのがわ
  3. 367
  4. 長野県 新潟県
  1. 利根川
  2. とねがわ
  3. 322
  4. 群馬県 茨城県 千葉県
  1. 石狩川
  2. いしかりがわ
  3. 268
  4. 北海道
  1. 天塩川
  2. てしおがわ
  3. 256
  4. 北海道
  1. 北上川
  2. きたかみがわ
  3. 249
  4. 岩手県 宮城県

HTML表記

  1行目親ボックスのクラス指定で、2つ目に列幅と列数を指定するクラス(flex)を追加している。

CSS表記

補足説明

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行目以降、罫線設定なので、不要の場合は削除する。