CSSで角丸を達成するためのネタその2。
今回は、横幅固定、境界線あり、をやってみる。実際、ちまたでは横幅固定のレイアウトが多いので、利用される頻度が高いのではないかと思う。
横幅固定、境界線なしと違うところは、背景画像を指定する場所が増えることだ。よって、用意する画像は、角を丸くした上のふたと下のふた、境界線を書いた中身（両脇）用の背景画像、になる。
境界線ありのときの上のふたと下のふたと両脇用の背景画像 (240 by 150 pixels, 2.52KB)
<div class="part">
<h2>h2</h2>
<p>div要素と見出しを使って角丸にしたいのです！</p>
</div>
<dl class="part">
<dt>dt</dt>
<dd>dl要素を使って角丸にしたいのです！</dd>
</dl>いちおう、ボックスのclassの名前はpartにしてみた。
まず思いつくのは、前回同様、.partに下のふた、見出しまたはdtに上のふた、中の要素に中身用の背景画像、でやる方法だ。ちなみに、両脇用の背景画像が消えてしまうと困るので、中の要素にはmarginではなく、paddingを指定する。
.part {
padding-bottom: 30px;
width: 480px;
background-color: white;
background-image: url(images/1203shita.gif);
background-position: bottom;
background-repeat: no-repeat;
}
.part * {
padding: 0.5em 20px;
background-image: url(images/1203naka.gif);
background-repeat: repeat-y;
}
.part * * {
padding: 0;
background-image: none;
}
.part h2, .part dt {
padding: 20px 20px 0.5em 20px;
background-image: url(images/1203ue-1.gif);
background-repeat: no-repeat;
font-size: 150%;
font-weight: bold;
}だが、これだと完璧ではない。見出しやdtでは両脇の背景画像が適用されなくなってしまう。
解決法のひとつは、上のふたの背景画像を、両脇の部分を含んだある程度高さを持ったものにして用意することだ。これによって、背景画像がなくなってしまうことを避けることができる。が、見出しやdtの文字数があまりに多い場合や、フォントサイズを大きくしたときにははまる。用意する場合、背景画像は、高さ200ピクセルとか、かなり大きめにしておく必要があるだろう。もちろん、文字数が多くなってしまうことはよくあるので、危険なことには変わりない。
じゃあもっと安全な解決策は、となると、HTML側をいじるしかなくなる。
ひとつめは、もう1回divで囲む方法だ。そうすれば、一番外側のdivで両脇の背景画像、内側のdivかdl要素で下のふた、見出しかdt要素で上のふた、というやり方ができる。div多重がけへの道のはじまりだ。
ふたつめは、dl要素のほうでしかできないが、dt要素、dd要素をその順番で1度ずつしか使わない方法だ。dl要素で両脇の背景画像、dt要素で上のふた、dd要素で下のふた、とやればうまくいく。文章を入れるときには、dd要素の中にp要素などを入れることになる。
で、みっつめ、というか、これが今回のネタ。フッターくんに登場してもらう方法だ。ボックスの一番下になにかしらフッターを書けばいい。いちばんありがちなのは、日付や「▲ページの先頭へ」のリンクになるだろう。こうすれば、.partに両脇の背景画像、見出しかdt要素に上のふた、フッターに下のふた、というやり方ができる。1つのボックスにつき、ひとつの大きな見出し、ひとつのフッター、であれば、これまた不自然そうには見えない。
<div class="part">
<h2>h2</h2>
<p>div要素と見出しとフッターを使って角丸にしたいのです！</p>
<p class="totop"><a href="#top">▲ページの先頭へ</a></p>
</div>
<dl class="part">
<dt>dt</dt>
<dd>dl要素（フッターつき）を使って角丸にしたいのです！</dd>
<dd class="totop"><a href="#top">▲ページの先頭へ</a></dd>
</dl>.part {
width: 480px;
background-image: url(images/1203naka.gif);
background-repeat: repeat-y;
}
.part * {
padding: 0.5em 20px;
}
.part * * {
padding: 0;
}
.part h2, .part dt {
padding: 20px 20px 0.5em 20px;
background-image: url(images/1203ue-2.gif);
background-repeat: no-repeat;
font-size: 150%;
font-weight: bold;
}
.part .totop {
padding: 0.5em 20px 30px 20px;
background-image: url(images/1203shita.gif);
background-position: bottom;
background-repeat: no-repeat;
text-align: right;
}
.part .totop a {
text-decoration: none;
color: #444466;
font-size: 80%;
font-weight: bold;
}できあがりはサンプルのHTMLを参照のこと。
1番目、2番目の例は、前半で説明したやり方、つまり、見出しやdtの文字数が多くならないことを前提にしたやり方である。上のふたの高さはサンプルとしてわかりやすいように64ピクセルにしている。1番目の例は、見出しの文字が"h2"だけなので大丈夫そうに見えるが、IE6で文字サイズを最大にすると、上のふたの画像の高さを超えてしまい、レイアウトがおかしくなってしまう。2番目の例は、dtにたくさん文字を書いているのでしょっぱなから壊れているはずだ。このように、見出しやdtの部分が、上のふた用に用意した画像の高さを超えてしまうとうまくいかなくなる、ということに注意されたい。
上のふた用の画像は、大きいのを用意しても見出しと本文の間があいてしまうことはないので、このやり方をとる場合は大きめ（高め）の画像を用意するべきだ。
3番目、4番目の例は、後半で説明したフッターを入れるやり方だ。これならば、見出しやdtにいろいろ書いてもレイアウトは崩れない。実用的な範囲ならフォントサイズを大きくしても壊れないはず。
見出し部分は画像でいいよ、というなら、見出しの高さが固定になるのでどちらのやり方でも問題なくなる。企業のサイトなんかでやるんなら、そちらのほうがありそうな話ではある。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/425
後半、サンプルの説明を追記しました。今後もちょろちょろと直すかもしれません。
この方法、透過GIFやアルファなPNGだと上手くいかないですね。
つーか、テーブルレイアウトでしか半透明角丸できない気がｗ
んん、なんか思いつきそう。思考の迷宮に入るのでこの辺で失礼します。
あれ？
名前書き忘れたのかな、すいません。Ａ：ＭＡです。
んー、無理っぴです、透過系+角丸。
Ａ：ＭＡさん、ありがとうございます。
これを書いた時点では背景を透過させることは考えていませんでした。このままだとうまくいきませんね。私ももう少し考えてみます。