影付き角丸テーブルをスタイルシートで作る その３　～３つのDIVと背景画像で～

影付き角丸テーブルを作る　その３　～３つのDIVと背景画像～

　「影付き角丸テーブル　その１」では、絶対指定と背景画像をミックスして角丸テーブルを実現しました。「影付き角丸テーブル　その２」では、影付きのフレーム状の枠の中にテキストを入れてみました。

　ここでは、全方位に影（グロー）が付いた角丸テーブルを、３つのDIV要素と背景画像を使うことで作成してみたいと思います。

完成例（円の半径：30px）

　横幅は246px固定、縦はテキストの量に応じて v伸びるタイプの角丸テーブルです。テキストを入れるボックスのパディングは左14px、右22px、横幅は2108pxで、パディングと横幅を合計して246pxです（表示モードは標準準拠モード）。

どんな部品を使ったのか？

　Firework 8 で横220pxの長方形を作成し、角を半径30pxで角丸にした上で、一番上と一番下を高さ42pxで影と一緒にスライスして書き出しました。影の部分を含めると横幅は246ｐｘになります。

　テキストを入れるボックスの背景には、同じ長方形を影を含めて横246px、高さ12pxでスライスして書き出した画像です。背景画像としてＹ軸（縦）方向にリピートして用いています。

ＨＴＭＬソースコードサンプル

　このサンプルでは、３つのDIV要素を用いてそれぞれ別途スタイルを定義したクラスを適用しています。

ＣＳＳソースコードサンプル

　上下の画像を背景に指定するDIV要素では、必ず画像と同じ高さを指定します。テキストを入れるDIV要素には、背景画像の影の部分にテキストが重ならないようにうまくパディングを調整します。