: サイト構築 -CSS

[CSS]一枚の画像で、四隅が角丸のパネルを実装するスタイルシート

Usability Postから、一枚の画像で、四隅が角丸のパネルを実装するスタイルシートを紹介します。

Scalable Content Box Using Only One Background Image
demo

仕組みは、全体を囲む「div」と見出し「h2」に同じ背景画像を指定し、それぞれポジションを「bottom」と「top」にして配置するものです。

仕組みのイメージ

本文のテキストは、背景画像の長さ分（デモでは1000px）までテキスト量が増えても正常に表示されます。
見出しは、同じく見出しの長さ分（40px）までとなります。

追記：: 下にある「Update」に、本文量がどれだけ増えても大丈夫なバージョンがあります。
demo 2

Post on:2008年12月1日

piyo: on 2008年12月1日

いつも有用な情報をありがとうございます。
デモをダウンロードして中身を見てみました。見出しの高さは決まっているようですが、本文テキストの高さに特に制限は無いような気がします。（1000px以上でも問題なく表示されてました）

コリス: on 2008年12月1日

> piyo さん

背景画像の長さ以上になると、下記のキャプチャのように繰り返されてしまうので、おかしな表示になると思います。

1000px以上にしたキャプチャ

piyo: on 2008年12月2日

はわわ。わざわざキャプチャして頂き、ありがとうございます。
何故か同現象を確認できなかったので最初はブラウザの問題かと思ったのですが、元サイトをもう一度確認してみたところ、11/28付けで新しいバージョンが出ていたようです。（記事最後のlive demo + background image の部分です）こちらは1000px以上でも問題なく背景画像が表示されます。古いIEのバージョンでは微妙な表示ですが…！