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

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


よくある角が丸いデザインを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

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://blog.tofu-kun.org/mt-tb.cgi/26
Listed below are links to weblogs that reference
角丸テーブルをCSSで作ってみる from Webプログラマー+WebデザイナーなZARU日記

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

Profile

zaru

Name : zaru

Webプログラマ+Webデザイナで、Webディレクタやってます。Twitterやっているので、ぜひフォローしてやってくださいませ。Twitter - zaru。また、そのほかのプロフィールについては、iddy - zaruを見てください。

Search
Feeds
Others

Return to page top