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

影付き角丸テーブルを作る　～絶対指定と背景画像を駆使して～

　角丸テーブルその１では、背景画像として画像を四隅に設定することで角丸テーブルを作りました。角丸テーブルその２では、画像を絶対指定で角に配置して角丸テーブルを作りました。ここでは、影が付いた角丸テーブルを絶対指定と背景画像をミックスして実現したいと思います。

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

　横幅は224px固定、縦はテキストの量に応じて伸びるタイプの角丸テーブルです。テキスト領域のパディングは左右8px、横幅は200pxで、パディングと横幅を合計して216pxです（表示モードは標準準拠モード）。

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

分かりやすくテキスト用ボックスの背景と文字色を変えてみるとこうなります。結構単純な構造です。

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

　Firework 8 で横216pxの長方形を作成し、角を半径20pxで角丸にした上で、一番上と一番下を高さ20pxで影と一緒にスライスして書き出しました。

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

ソースコードサンプル

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

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

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

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