CSSによる角丸テクニックはイッパイみかけるけど、ドレも可変なんすよ。

個人的には、可変より固定の方が好きだったり、実業務で可変レイアウトの角丸を作る事ってのは殆ど無かったりします。
ゆえに、実践で必要なのはウィンドウサイズによって可変する角丸より、固定幅で縦だけ伸びれば十分だったりします。

無駄なdivとか減らせますしね。

まぁユーザビリティ関係の本を読んでれば、可変レイアウトの方が良いと書かれておりますが、ソコは今回は気にしない方向で行くとして、取りあえずサンプル。

サンプル：

http://css-happylife.com/template/05/

ダウンロード：

http://css-happylife.com/template/05/05.zip

サンプルを見ていただいたトコロで実際の方法をば。

サンプルのイメージ1今回のサンプルは、角丸＋文字数が少ない場合でも一定の高さの背景は表示させるって方法と併せてご紹介していきます。

まずは固定幅角丸について。

上部分の背景と下部分の背景を用意します。
角丸上部画像
角丸下部画像

角丸上部画像を見て頂ければ分かると思いますが、縦に異様に長いです。
コレはもうおわかりかと思いますが、背景を繰り返し表示している訳じゃなく、単純にテキスト量が増えたら表示されていくって感じです。

この角丸内に入るテキストの最大文字数と、IEの場合だったらフォントサイズを最大にした時に切れないくらいの長さが目安です。
IE以外だったら大抵フォントサイズを無限大に拡大出来ますが、実用的なサイズを超えてる場合に背景が切れてたってOKって考えです。

この方法あんまりにも画像サイズが大きいといけてないですが、大抵大したサイズにはならないので、無駄なdivを減らす為にやってます。

実際のソースは下記のような感じです。

<div class="kadomaru">
<h2>1）高さを指定していない場合。</h2>
<p>字数によっては左の画像がちゃんと表示されない。</p>
<p>てきすとてきすとてきすと・・・（略</p>
</div>
<div class="kadomaru_bottom"><hr /></div>

kadomaruってクラスに上部画像を背景に指定し、kadomaru_bottomってクラスに下部画像を背景に指定しております。
角丸の下部分はhr入れる必要は無いんですが、スペースや全然意味の無い要素を入れるより、一つの区切りとするのが、ベストとは言えませんがベターかな、とボクは思ってます。
hrは表示されちゃうと困るので、display:none;使って見えなくしてます。

CSSはこんな感じになってます。

.kadomaru {
 width:387px;
 padding:10px 10px 10px 140px;
 background:url(./img/kadomaru_top.gif) no-repeat;
}
.kadomaru_bottom {
 width:537px;
 height:6px;
 margin-bottom:30px;
 background:url(./img/kadomaru_bottom.gif) no-repeat;
}

面倒な指定は一切無く、.kadomaruにコンテンツ用のpadding等を指定し、.kadomaru_bottomに角丸下部の画像の高さと横幅を指定してあげるだけです。

でも今回はソレに味をチョット付け足してます。

サンプルのイメージ2例えば右のような背景画像があったとして、これを文字数に関わらず最後まで表示させる場合、高さを指定して上げれば良いのですが、単純に高さを指定しただけだとIEしか意図した動きをしてくれません。

これは、IEは高さを指定していても、内容物にあわせて自動的に高さも伸びるようになっているからです。何気にこの挙動は、他のブラウザにも実装して欲しいと思ったりする時もあるくらい素敵なんですが...

ということで、IE以外にも同じように表示させる為に、ハックなどを使って別で指定してあげます。

サンプルのCSSだと下記のような感じです。

.kadomaru_3 {
　width:387px;
　height:170px;
　padding:10px 10px 10px 140px;
　background:url(./img/kadomaru_top.gif) no-repeat;
}
.kadomaru_bottom_3 {
　width:537px;
　height:6px;
　margin-bottom:30px;
　background:url(./img/kadomaru_bottom.gif) no-repeat;
}
.kadomaru_bottom_2 + .kadomaru_3 {
　min-height:170px;
　height:auto;
}

IE以外にも適用させる為の方法として、今回は隣接セレクタ（+で区切ってるやつ）を使用してます。（隣接セレクタについてはいずれ書くかも）


IEに素敵な挙動がある代わりにIE以外ではmin-heightが使えます。
コレを利用します。

min-heightで、heightと同じ値を指定して、heightはautoで上書きすることによりIEと同様に文字数に応じて伸びるようになります。


コレで「角丸+背景を文字数に関わらず表示させる。」の完成です。

他にも角丸の作成方法は色々有りますが、そんなに見かけない方法（だと思う）って事で機会が有ったら使ってみてください。

んでは、良きCSSLifeを～