*

ウェッブ制作

Width =px

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

列数と列幅に自由に対応したカウンタ付き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つ追加しています。

CSS表記

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列均等幅の例

    4列共、個別幅の例

    幅(%)の指定 %の合計値は、100%以下で97%位に。