[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。

すぐに役立つＣＳＳ実践テクニック・ＴＩＰＳ集

角丸テーブルその１　～背景画像を活用しよう～

　角丸テーブルは、一般的にＨＴＭＬのテーブルタグで作ることが多いようですが、スタイルシートでも作ることができます。以下のサンプルでは、半径8pxの円を四分割した画像を背景として四隅に設定しています（参照：背景画像を操れ！その２）。

　なお、背景画像としてではなく、直接画像を絶対指定で角に配置して角丸テーブルを作ることもできます（→角丸テーブル　その２へ）。

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

完成例はこちら
背景を白にすると

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

　上半分用の<DIV>、テキスト領域用の<DIV>、下半分用の<DIV>、そしてこれらをすべて格納するコンテナ<DIV>の４つの<DIV>から構成されています。

　そして、左右に一つずつ背景画像を指定するために、上半分用と下半分用の<DIV>の中には<SPAN>を格納します（レイヤーを重ねるような感覚で）。

<div class="rtable01">
　 <div class="rtop01">
　 　 <span></span>
　 </div>
　 <div class="rtcontent01">
　 　完成例はこちら
　 </div>
　 <div class="rbottom01">
　 　 <span></span>
　 </div>
</div>

スタイルシートサンプル

　インラインレベル要素の<span>タグをブロックレベル要素に変更した上で<div>タグと重ねるのがポイントです。高さは円の半径と同じ設定にします（サンプルでは8px）。

.rtable01 {
width:200px;
height:60px;
background-color:#669900;
color:#FFFFFF;
}
div.rtop01,div.rbottom01,.rtable01 span {
background-repeat:no-repeat;
height:8px;
}
.rtop01 {
background-image:url(★右上画像へのパス★);
background-position:right top;
}
.rtop01 span {
display:block;
background-image:url(★左上画像へのパス★);
background-position:top left;
}

.rtcontent01 {　　　　/*　テキスト領域用DIV　*/
padding:0 8px;
text-align:center;
}

.rbottom01 {
background-image:url(★右下画像へのパス★);
background-position:bottom right;
}
.rbottom01 span {
display:block;
background-image:url(★左下画像へのパス★);
background-position:bottom left;
}

　なお、<SPAN>の代わりに全部<DIV>でもスタイルの設定を変えれば同じことができますが、このサンプルでは関連事項の理解を深めるために<SPAN>を使用しました。

　また、背景画像としてではなく、直接画像を絶対指定で角に配置して角丸テーブルを作ることもできます（→角丸テーブル　その２へ）。

サイトトップページへ戻る