Home > WEBデザイン > 角丸テーブルをCSSで作ってみる

角丸テーブルをCSSで作ってみる

Posted by: ZARU
2005/05/24
WEBデザイン

よくある角が丸いデザインをCSSで作ってみるテスト。色々なところでやられているけど、自分でもやってみたりして、どれくらい実用度があるのかを確かめる。

通常は<table>タグを使って、セルを9個に分けて作るが、それだとHTMLの構造上かなり問題があるので、HTMLはいじらずにCSSのみで実現するのがルール。

一番最初に思いついたのが、角丸画像を3つに分けて使用する方法。説明するより見た方が分かりやすいかな。

HTML

<dl>
	<dt>タイトル</dt>
	<dd>文章</dd>
</dl>

HTMLはこんな感じ。無理はない構造だと思う :D

CSS

dl{
	background-image:url("./bottom.gif");
	background-repeat:no-repeat;
	width:300px;
	background-position:bottom;
	padding:0 0 25px 0;
	margin:0 0 25px 0;
}
dt{
	background-image:url("./top.gif");
	background-repeat:no-repeat;
	height:40px;
	background-position:center top;
	padding:5px 0 0 40px;
	margin:0;
	color:#ffffff;
	font-weight:bold;
}
dd{
	background-image:url("./middle.gif");
	background-repeat:repeat-y;
	background-position:top center;
	padding:0 30px;
	margin:0;
}

dl / dt / dd に一つずつ背景画像を指定してあげればあら、簡単に出来ました。見本はこっちにあります。角丸テーブルCSS版1

ただ、欠点としては dt のテキスト量が多くなって折り返すと背景画像からはみ出してしまうという点。これは、究極的には空要素の div を一つ入れることで解決するが… :(

あと、横幅にも弱いのが欠点 orz