影付き角丸テーブルをスタイルシートで作る その２　～絶対指定と背景画像を駆使する～

影付き角丸テーブルを作る　その２　～絶対指定と背景画像～

　「影付き角丸テーブル　その１」では、絶対指定と背景画像をミックスして実現しましたが、ここでは更に発展させて、影付きのフレーム状の枠の中にテキストが入るタイプの角丸テーブルを作成してみます。

　「影付き角丸テーブル　その１」との違いは、テキストを入れるボックスの左側に影の画像をＹ軸（縦）方向へリピートしている点だけです。

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

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

影付き角丸テーブル影付き角丸テーブル影付き角丸テーブル影付き角丸テーブル影付き角丸テーブル影付き角丸テーブル影付き角丸テーブル

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

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

　最後の小さな部品は、角丸テーブル右端の陰用の横22px、高さ8pxの画像です。背景画像としてＹ軸方向にリピートして用いています。

ソースコードサンプル

　①横322pxのボックス（DIV）の中に、横248pxのテキスト用ボックスを入れ子にします。テキスト用ボックスはパディングを左40px、右12px入れるので、合計300pxに広がります（表示モードは標準準拠モード）。

　②外側のボックスの背景画像として、横22px、高さ8pxの影画像を右端に縦方向（Ｙ軸）に繰り返し表示します。

　③テキストを入れるボックスの背景画像として、横22px、高さ8pxの影画像を左端に縦方向（Ｙ軸）に繰り返し表示します。

　④角丸テーブルの天井画像を絶対指定「position:absolute」で設定します。高さが28pxあるので、その分だけ縦方向（Ｙ軸）へマイナス方向に移動させています。同様に、床画像を絶対指定で縦方向（Ｙ軸）へマイナス方向に移動させます。

　なお、上図では理解し易くするためにタグ内に直接記述しましたが、外部スタイルシートなどでスタイルを設定したクラスやＩＤを適用した方が実際的です。