« グラデーション角丸＋リキッドレイアウトをCSSでコーディングする時の考え方 | Back To Blog Top | jQueryとCSSでグラデーション角丸＋リキッドレイアウトをコーディングしてみる »
グラデーション角丸＋リキッドレイアウトをCSSで無理やりコーディングしてみる
ご注意
この記事は、実用度は余り高くないような気がします。 わりとネタ的？
4つの要素でグラデーション角丸＋リキッドレイアウト
前回の記事では、6つの画像と要素を使って、グラデ角丸＋可変幅を存在する要素を駆使して実現する、という考え方を書いてみました。
今回はそこから更に踏み込んで、1枚の画像と4つの要素で同じデザインを実現してみたいと思います。
今回もサンプルを用意しました。 対応ブラウザはIE5.5以上・Firefox・Opera・Safariで、MacIEはdl付近がちょっと怪しいかもしれないので、週明けに会社で確認します（自宅にMac無いんす）。 あとIEで幅を極端に狭めると、文字の折り返しが若干おかしいです。
HTMLは前回とほぼ同じ物ですが、余計なdivが1つ減っています。
コンテキストメニューなどから背景画像表示すると分かるんですが、一枚の大きな画像を用意しています。 これを4つの要素で四隅に指定しています。
やはり、ただ指定しただけではちゃんと表示されないので、あれこれ工夫する必要があります。 コツはWrapしている要素に下部の画像を指定する事でしょうか。
メリットとデメリット
無駄な要素を減らせるのは利点なのですが、縦方向の幅に限界があるので、例えばBlogの外枠に採用するのは難しいかもしれません（画像のサイズとか気にしなければまた別ですけど）。
小さめなコラムとかに使ってみるといいかもしれないです。
サンプルDL
やっぱりDLしてさわれた方が解りやすいと思ったので、サンプルをzipにした物を用意しました。
なお、前回の記事にも追加しましたので、そちらもどうぞ。
次回予告
次回は、まだ勉強中の分野ではありますが、jQueryを使ってグラデーション角丸＋リキッドレイアウトを作ってみます。