▼EntryMore▼

テクニック詳細

今回の肝は、使用している画像にあります。

使用してる画像は、縦横に十分に長い画像です。
タイトル部分には、通常の img タグで画像を挿入し h1 などのタイトル要素の背景として、終わりの部分の角丸画像を使用しています。n

使用しているタイトル画像

使用しているコンテンツ背景

コンテンツ部分には、まず全体を内包する div 要素に左側の角丸背景を "左下固定で" 適用します。
さらに、コンテンツ部分を囲む div 要素に右側の角丸背景を "右下固定で" 適用します。n

こうすることで、下や右にコンテンツが伸びても、背景は下辺に追従して表示され、伸びた部分の背景も、十分に大きな背景を用意しておくことで対応する、というものです。n

HTML ソース

HTML ソースは、見てもらうと分かりますが、ごく標準的な構造のままです。n<div class="bgSample"> <h2><img src="images/title.gif" alt="タイトル" /></h2> <div class="content"> <p class="txt"> ここに適当なテキストを入れます。<br /> 考えられる最大サイズを想定した背景を用意しておくことで、少ないDIVで角丸などを実現しています。....以下省略 </p> <!-- /.content --></div><!-- /.bgSample --></div>

CSSソース

.bgSample { background: url(images/bg.gif) left bottom no-repeat; width: 600px;} .bgSample .content { background: url(images/bg2.gif) right bottom no-repeat; padding: 10px 15px; } .bgSample h2 { background: url(images/title2.gif) right top no-repeat; margin-bottom: 0; height: 26px; } .bgSample .txt { margin-bottom: 1em; }

使用している画像一覧