このような感じで角丸のボックスにテキストの内容が囲われているデザインパターンってよく見かけますし、実際に仕事でも使う機会が多いので分からない人やあやふやな人に参考になるようなサンプルを作ってみました。
今回は角丸のボックス内がグラデーションになっている場合のやり方を解説したいと思います。
デモページ・サンプルダウンロード
デモページの解説
XHTML
<div class="column"> <div class="inner"> <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p> <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p> <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p> </div> </div>
CSS
div.column {
width: 570px;
background: url(image/bottom.jpg) no-repeat bottom;
margin-bottom: 40px;
}
全体を包むdiv（.column）にボックスの左右と下に来る部分の画像を読ませる。
div.column .inner {
background: url(image/top.jpg) no-repeat;
padding: 25px 20px;
}
その中にもう一つdivを用意し、このdiv(.inner)にボックスの上部に来る画像を読み込ませる。
CSSで可変対応した角丸のボックスのまとめ
読み込ませる画像を逆にした場合はデモページの下部のサンプルを参考にして下さい。
もしサンプルのように外枠にドロップシャドウがなくただの角丸なら、画像を使わずにCSSのみでも出来きなくはないのですが、個人的に無駄なHTMLは書きたくないので自分は絶対に画像を使ってやってます。
そもそもHTMLは文書構造を示すものですし、画像でやるのが普通だと思いますからね。
次回はもう一つ違うやり方を解説したいと思います。
(2008/08/21 14:15 PM)
コメントが書かれていません。