« Daily Link | Note | Back To Blog Top | Daily Link »
テーブル『風』デザイン
今回は、テーブル風のデザインを、テーブルを使わないで実現する方法を紹介します。
ただ、ここで断っておきたいのは、僕は「全てのテーブルを認めない」、とは思わないという事です。
例えば、価格の一覧表や電車の時刻表など、表として使う分には書式上でも構造上でも、全く問題が無いからです。
ではなぜ、テーブルを使わないテーブル風デザインを紹介するかと言うと、表としての意味は持たないけど表っぽいデザインにしたい場合の為です。
例として上げると、このサイトのWorkをSanctuaryデザイン（footerのリンクで切り替え可能です）で見て貰えば解りやすいかと思います。
では、実際にどのようなコードなのか解説したいと思います。
XHtml
XHtml側で使うタグは、リスト系のタグです。
これは<ul>でも<dl>でも構いません。
通常通りの使い方で、リスト状にマークアップします。
CSS
CSS側は、少し頭を柔らかくする必要があります。
テーブルっぽいデザインの特徴は、borderで項目が区切られている事です。
それをCSSで実現するには、borderをバラバラに考える必要があります。
具体的にどうするのかと言うと、<ul>側でrightとbottom。 <li>側でleftとtopを指定します。
・・・・・・と言われても解りにくいと思いますので、サンプルを用意しました。
CSSを<head>内に記述してありますので、解りやすいと思います。
注意点としては、<li>タグにborderで罫線を表示させているので、marginを付けると間隔が空いてしまう事でしょうか（それを利用したデザインも意外と格好良かったりしますけれど）。
まあ、多用するテクニックでは無いと思いますけど、borderをバラすという考え方は割と使えるので、知っておいて損は無いと思います。