第6回　CSSで脱テーブルレイアウト？

テクノロジー

2006.8.7 MON

「脱テーブルレイアウト」とタイトルを見て驚いた方もいるかもしれないが、データの整理に使う表でのお話。繊細な罫線や背景グラデーションを効果的に使って、個性的な表組みを作ってみたい。ポイントはGIFで作った罫線を駆使することだ。

解説：矢野りん

■POINT

個性的にするのだから、立体的な加工などは積極的に使いたいもの。アクセシビリティのじゃまにならず、アイキャッチ化できるところと言えば、数字の表記かエンボス加工した下敷きに数字のある画像だ。エンボスの影の部分には「黒」でなく、下地の色のダークトーン（ライトブルーならダークブルー）を使うとしっくりくる。CSSには関係ないがちょっと難しい表記方法の「大字」を使ってみた。大字の4にあたる漢字は一般的でないので、3以降は単なる漢数字にした。表全体がひとまとまりに見えるように、キャプションやテキスト、背景グラデーションには関連のある色を使う。

アンケート集計を表示する今回のスタイル完成画面

■STEP 1

本表組みはアンケートの集計結果を想定して作成している。昇順のあるリストなら、別に「ol（ordered list）」でいいんじゃない？　そう思う方もあろうが、ランクと内容、その得票数をしっかりセルで分けないと、システムにも不親切というもの。XHTML側には「best5」というクラス名を与えたテーブルを作成する。この時、テーブル宣言の直下に表題にあたる「caption」タグを入れておく。

【図1】「caption」タグを入れたソース

テーブルの幅サイズやセル内部の余白についてはCSS側で指定するが、セルとセルの間隔をコントロールする「cellspacing」だけはここで指定しよう。そうしないとセル同士がうまくくっつきあってくれない。

あとは普通にテーブルを構成するだけだが、ここでのポイントは、表組みの罫線は各セルのボックス要素に対して「border」を指定しないこと。横線だけで各セルを区切るスタイルにしたい時はボックス要素の下部分だけ「border」を表示させる指定にすればできるけれど、セルとセルの接続部分で「border」が重なって、ちょっと雑に見えることもある。また、この表ではCSSの「border」スタイルでは表現できない繊細なドットラインを使いたいこともあって、画像にしてしまうほうが、【図2】のように精度があがるのだ。ではちょっとソースのCSS記述部分をみてみよう。

【図2】各ドットラインの構成。見えにくいと思うので、ツール上で1600％拡大している。こういう画像が横方向に繰り返し表示しているわけだ

最初にページに貼り付けた時不要な隙間が出ることを防ぐ意味で、【図3】のようにテーブル上部のマージンを完全に消しておく。

【図3】テーブル上部のマージンを完全消したソース

■STEP 2

次にテーブルの幅サイズを300pxに決め、一応paddingやborderに0を与える。そしてテーブルの先頭部分にグラデーションの無い、ドットラインだけの画像が、横方向に繰り返し表れるように背景の指定を入れる。

【図4】背景の指定を入れたソース

■STEP3

次は各セルのスタイル部分を見よう。ここではtdに対してピンポイントでセルの内側に出来る余白「padding」設定を与える。左と上下に5ピクセルずつ与えた。左の余白は数字用の画像が表の左端にくっつけないためにも必要だ。【図5】が完成した画像で、【図6】がソース。

【図5】表組の左側と丸がくっつかないように与えた5pxのマージン。ちなみに（感動）などのセルの値に文字間を与えているので、丸とこの値の間隔は、文字間よりもしっかり空ける。中途半端な間隔だと、数字と値全体が均等配置したように見えて、メリハリが悪い

【図6】　【図5】のHTMLソース

また、【図7】はセルの背景にはテーブルとは別に、グラデーションと罫線が一体化した画像を配置したものだ。

【図7】各ボーダーを指定しているクラス定義箇所。表組みの最上部だけ例外的なスタイルだ

最終的に細かい文字設定などを加えたらできあがりだ。ちなみにCSSを作るとき、文字のスタイルはできるだけセル独自の指定を作らず、ページ全体でシェアできる指定方法を使うとインターフェースとしての統一感も出てくるし、管理もしやすい。もっと言えばWebの場合、表組みだけ独自なフォントスタイルなどを付て過度に装飾しても、かえって統一感が無くなることにも繋がる。要注意だ。下記は、完成したHTMLのソース。