理論的なHTML構造だけで角丸背景を実装する

2008年5月18日 14:58

最近使っている背景の使い方なんかを紹介してみようと思います。
内容は簡単で、極端に大きい背景を作って、それを固定配置にすることで実質のコンテンツの伸縮に対応する、というものです。
それほど凝った背景じゃなかったり、コンテンツのおおよその最大値が分かるときなんかに使えるテクニックです。

サンプル

理論的なHTML構造だけで角丸背景を実装するサンプル

サンプルダウンロード

「理論的なHTML構造だけで角丸背景を実装するサンプル」のダウンロード

▼解説は以下から

▼EntryMore▼

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

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

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

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

HTMLソース

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