overview_008
リスト:テーブル式で、thとtdの枠線を残した一般的なテーブルデザイン。008aはthとtdの間の線はなく、背景色での区切りにしてあります。
overview_007
リスト:テーブル式で、thとtdを背景色でデザインしたBlockDesign。
overview_006
表の形式で、右側内で小見出しやリスト、囲みなどの要素がある時。
リスト:テーブル式では、td内にリスト要素を設定するのが難しくなります。
右側(td)で見出しを設けてその上下の余白で見やすくしたり、リスト(記号・数字)を使って見やすくしたい時のための、カラム構成で2カラムに設定した擬似的なテーブルで作成したパターンです。
overview_005
thとtdの間に縦線が入るだけのシンプルな設定。
スマホではthが太字になるようにCSSで設定しただけのシンプルなBlock Designです。スマホで見た時はthの下に横線が入ります。
overview_004
リスト・テーブル式の一番シンプルなカタチ。
罫線をなしにし、スマホではthが太字になるようにCSSで設定しただけのシンプルなBlock Designです。overview_004aは、スマホで見た時にthとtdを改行しないで横に並ぶように設定したバリエーションです。
overview_003
th(左)の下線を色のある太線に設定したシンプルなテーブル式リストをCSSで設定。スマホではthに設定していた下線の色が文字色になるようにして、罫線はなしとしています。
overview_002
リスト:テーブル式で、横線だけの設定のシンプルパターン。td要素で「本文」指定を入れることで見出しとの間に縦線を入れる設定。
overview_001
リスト:テーブル式で、横線だけの設定のシンプルパターン。001a、001bはスマホでのレイアウトのバリエーション