ログを見ていると、「CSS 角丸」「CSS 角を丸く」あたりで検索してくる方が多い。ので、CSSを使って角丸をする話を、できる範囲で書く。1って書いたけれど続くかどうかわからない。
今回は、一番簡単で素直な、境界線がなく、かつ、ボックスの横幅が固定のでやる。というか、他のはdivをたくさんかますとか、HTML側でなにかしら邪道な方法が必要と思われる。
なお、:beforeまたは:after擬似要素を使ったり、border-radiusを使ったり、というのは少なくともIE6では効かないのでとりあえず使わない。
まず、角が丸くなっているボックス、というものを想像するぐらいだから、そこにはなんらかの意味的なまとまりがあるはずである。そこで、1つのdiv要素を使い、ボックス用の見出しが1つあるケースと、1つのdl要素を使い、dt要素が1つあるケース、というHTMLを考える。
<div class="section">
<h2>h2</h2>
<p>div要素と見出しを使って角丸にしたいのです！</p>
</div>
<dl class="section">
<dt>dt</dt>
<dd>dl要素を使って角丸にしたいのです！</dd>
</dl>そんなに不自然なHTMLではないはず。
ボックスの横幅が固定ならば、上のふた、中身、下のふた、の3つの成分からなると考えて、上のふたと下のふたを画像として用意し、なんかの背景画像にしてしまえばいい。
上のふたと下のふた (240 by 200 pixels, 2.0KB)
けっきょく、.sectionにボックスの背景色を指定し、.sectionの背景画像として下のふたを、見出しやdt要素の背景画像として上のふたを使うことになる。このため、1ボックスの中で該当する見出しやdtは最初に1回しか使えないことになるが、そんなに不自然でもないはず。
いちおうサンプルも用意した。定番だが、ボックスに対してwidth（480ピクセル）を指定し、ボックスの中の要素でそれぞれpadding-leftやpadding-rightを指定している。上下のふたは.sectionやdtでpaddingをあけておき、そこに背景画像を配置している。.sectionでpadding-bottomが使えるのはheightを指定していないからである。
.section {
padding-bottom: 16px;
width: 480px;
background-color: #ffe0e0;
background-image: url(images/1201shita.gif);
background-position: bottom;
background-repeat: no-repeat;
}
.section h2, .section dt {
padding: 16px 20px;
background-image: url(images/1201ue.gif);
background-repeat: no-repeat;
font-size: 150%;
font-weight: bold;
}トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/423
> そんなに不自然なHTMLではないはず。
以前もまったく同じコメントをしたので躊躇われるのですが、.section は hn と「常に」セットで用いることによる、来る XHTML 2.0 の section h 構造への移行準備を目的としている場合が普通ですので、今回の二つ目の例のような、子に hn 要素を含まない div.section は、限りなく自然な HTML でありながらも限りなく不自然であると言えます。
ご指摘ありがとうございます。今回はボックス1つ分のまとまり＝"section"というぐらいの意味で名前をつけていました。誤解のないよう"segment"や"part"あたりにするか、「来る XHTML 2.0 の section h 構造への移行準備を目的としている場合」とは無関係、というのを書くべきでしたね。
（トラックバックを受けて）最後が8重がけになってしまう、というのはIE6を見捨てないかぎりほぼ決まってますから、これとこれを犠牲にしていいのならこれが使える、という話になりますね。バリエーションはいくつもありますが、どれが実用的か、というので悩んでいます。