リンクWeb素材配布サイトなどでよく配布されているテーブル素材をDIVの枠に使ってしまおうというのがここでの目的です。テーブル用素材なので、大抵の素材が9つのパーツに分かれていると思いますが、それをくっつけて上中下の3パーツにします。ここでは、Egg*Station様で配布されている素材を使わせて頂きます。上パーツ中パーツ下パーツ中パーツは厚さが1pxなのでちょっと見にくいかもしれません。繰り返し指定するので1px以上あればOKです。HTMLとCSSは以下のように記述します。class="text">ここに文章が入ります。15px;}まず、widthは背景を指定するパーツで全て同じ値(画像の幅)にします。heightは上下パーツのみに指定します。中パーツは縦幅可変なのでheightの指定は不要です。次に、背景画像の指定です。それぞれ3パーツに対応する画像を背景に指定します。繰り返しと画像の位置については以下のようにします。top;上の画像は繰り返し無しで、下にぴったりくっつける為にbottomを指定します。中の画像は自動で繰り返されます。下の画像は繰り返し無しで、上にぴったりくっつける為にtopを指定します。.textクラスに横方向marginを指定します。これは、背景画像と文字が重ならないようにする為です。画像の幅を見て調節して下さい。IEであれば.frame-middleクラスにpaddingを指定してもwidthとpaddingのバグのおかげで上手くいくのですが、他のブラウザでは上手く表示できません。テキスト表示用のブロック要素を用意して、そちらにmarginを指定しておきます。完成すると以下のように表示されます。ここに文章が入ります。画像は繰り返しになっているので、いくら文章が長くなっても大丈夫です。左右の端の文字が画像と重ならないように、paddingを設定して下さい。このテクニックを使えば、よりデザインの幅が広がるでしょう。1つ注意として、素材を借りてくる時は加工して良いかどうかを確認してから使用して下さい。場合は切り取りやサイズ変更程度であれば許可していると思いますけど。