CSSだけで、フレキシブルな角丸ボックスを作る方法

例えばブログの記事を囲む枠を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もヘッダーに書いてありますし。

Webコンサルタント中山陽平公式サイト お悩みの方へ。一回のご相談で解決することもあります
ラウンドナップ・コンサルティングへのお問合せ方法 お電話でのご相談もお気軽に。[048-234-3361](10〜16 土日祝日除)全国対応 24時間受付 お問合せメールフォーム

2 Comments

  1. to-risugari 2005年8月10日
  2. gone(管理人) 2005年8月10日