角丸テーブルをスタイルシートで作る　その２　～絶対指定を活用しよう～

角丸テーブルその２　～絶対指定を活用しよう～

　角丸テーブルその１では、背景画像を四隅に設定することで角丸テーブルを作りましたが、今回は画像を絶対指定で角に配置することで角丸テーブルを作ってみたいと思います。

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

　塗りが白、背景が水色の円を四分割した画像を、スタイルシートの絶対指定で四隅に配置します。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

ソースコードサンプル

　外側の<DIV>を相対指定「position:relative」で設定し、内側の画像を絶対指定「position:absolute」で設定します。絶対指定された画像は、外側の要素（親要素）からの位置をピクセルなどの単位で細かく指定できます。

　なお、角丸の画像の半径が12pxなので、テキスト領域のパディング（余白）も同じく12pxに設定してあります。

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