2008年5月18日 14:58
最近使っている背景の使い方なんかを紹介してみようと思います。
内容は簡単で、極端に大きい背景を作って、それを固定配置にすることで実質のコンテンツの伸縮に対応する、というものです。
それほど凝った背景じゃなかったり、コンテンツのおおよその最大値が分かるときなんかに使えるテクニックです。
▼解説は以下から
▼EntryMore▼
今回の肝は、使用している画像にあります。
使用してる画像は、縦横に十分に長い画像です。
タイトル部分には、通常のimgタグで画像を挿入しh1などのタイトル要素の背景として、終わりの部分の角丸画像を使用しています。
コンテンツ部分には、まず全体を内包するDIV要素に左側の角丸背景を”左下固定で”適用します。
さらに、コンテンツ部分を囲むDIV要素に右側の角丸背景を”右下固定で”適用します。
こうすることで、下や右にコンテンツが伸びても、背景は下辺に追従して表示され、伸びた部分の背景も、十分に大きな背景を用意しておくことで対応する、というものです。
HTMLソースは、見てもらうと分かりますが、ごく標準的な構造のままです。
トラックバックURL
http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/76