*

ウェッブ制作・パソコン

Width =px

ホーム >
UL・OL・DLリストとテーブル・メニュー概要 MENU 

列幅を自由に設定出来るカウンタ付汎用型リストとテーブル

要約:リストとテーブルの標準的な設定方法で、列数が異なっても、各列の列幅を自由に設定出来る汎用タイプです。 カウンタは、CSSの「counter-increment」を利用しているので、行の挿入や削除をしても、自動で連番を振り直すので、連番を修正する手間が不要です。

以下の説明は、dlリスト使用です。

ulリスト表・汎用型
Unordered List:表示順に拘(こだわ)らないタイプで順序を気にしない場合。li:List Item
カウンタ付ulリスト表・汎用型
上記に連番を振ったリストで意味が無いようで、olにすべきと思われるが。ただ、補足説明などで項目に番号があった方が説明が分かり易くなるでしょう。
カウンタ付olリスト表・汎用型
Ordered List:表示順が重要な場合に使う。順位、手順、格付け、等級などに向いている。
カウンタ付dlリスト表
Definition List:HTML4迄は「定義リスト」が、HTML5からは、説明リストとしても加わったので、利用範囲が広がった。ただ、ul、olとは表示形式が異なる。
説明項目:dt:Description Term、説明文:dd:definition/description)が2行として表示される。
汎用型基本テーブル
テーブルタグに共通CSSと追加CSSの2つのクラスを設定し、追加CSSで作成したい列数や列幅を決める基本的パターンです。テーブルは列結合が出来るので、ulやolの代替に使える。
カウンタ付テーブル・汎用型
上記のdt部に連番を付けてたタイプ。
リンク付テキストにカウンタ・注意点
汎用型リスト表及びテーブルに記述したテキストにカウンタを付けると2行になってしまう場合の対応策。