例えばブログの記事を囲む枠をCSSだけで作ろうとすると、数種類のborderから選ぶことになるわけですが、今のところ”実線(solid)”、”破線(dashed)”、”点線(dotted)”、”二重線(double)…など、8種類がCSS2では用意されています。
＃CSS2仕様書はこちら[http://www.y-adagio.com]
CSS3では、さらにいくつかの種類が用意される模様です。波線とか2つの点と短い線の繰り返しとかのようです。
＃CSS3ワーキングドラフト[http://www.d-toybox.com/]
しかし、わりとメジャーな角丸についてはどうしようもなく、必要な場合は画像を作って実現することになりますが、大きさが画像のサイズに縛られるので、使い勝手が悪いのが問題です。コンテンツを他のページに移植するときなど、出来ればフレキシブルにしたいところです。
そんな悩みの一つの解決策として、456BEREA.Streetに、透過画像とCSSのみによる柔軟性のある角丸ボックスの作り方が載っていました。
ちなみにマークアップを維持したい方は
「JavaScriptだけで角丸Box。Nifty Corners(TM)がバージョンアップ。」をどうぞっ。
具体的な作り方
具体的な作り方としては。
デモページは以下のところにあるので、こちらのソースを見てもらうのが早いと思います。
http://www.456bereastreet.com/lab/flexible_custom_corners_borders/
単純化すると、
ひとまず以下のようにブロック要素を並べていきます。
<div class=”for_leftborder” >
<div class=”for_rightborder”>
<div class=”box_top” >
<div></div>
</div>
<p>ここに文章を入れる</p>
<div class=”box_bottom” >
<div></div>
</div>
</div>
</div>
一番外側（上のコードで言うfor_leftborder）と2番目のボックス（上のコードで言うfor_rightborder）は、入れ子になっていますが、役割的には同列です。
このサイトの場合、外側のボックスで
padding:0 12px 0 0;
background:#fff url(borders.gif) 100% 0 repeat-y;
として、右寄せで縦線画像を配置し、内側のボックス（上のコードで言うfor_rightborder）にて、
padding:0 0 0 12px;
background:#fff url(borders.gif) 0 0 repeat-y;
として、左寄せで縦線の背景を置いています。paddingは、置く画像次第で変わる部分です。
そして、そのボックス（上のコードで言うfor_rightborder）の中に、並列に二つのブロック要素と、内容になるブロック要素を放り込みます。上で言う
<div class=”box_top” >
<div></div>
</div>
<p>ここに文章を入れる</p>
<div class=”box_bottom” >
<div></div>
</div>
の部分です。
最初の”box_top”は、フレキシブルな枠の上部を作っている部分です。
先ほどのサンプルページの”box.gif”と言う画像を、最初のbox_topにて右寄せで配置し、さらにその中のdivで、逆に左寄せで置くことで、横幅が可変になっています。（厳密に言えば、元の画像の幅までが限界ですが…1600pxあるので問題ないかと。）
同様のことを”box_bottom”にて行い、これで可変ボックスが完成です。
概観的にはこんな感じですが、外側のパディングの分を内側のマイナス指定のマージンで取り返したりと調整が行われていますので、ソースを見てもらった方がいいです。CSSもヘッダーに書いてありますし。
Discussion about this post