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

カテゴリ:CSSテクニック 2008年5月18日 14:58

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

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

サンプルダウンロード

▼解説は以下から

▼EntryMore▼

テクニック詳細

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

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

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

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

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

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

HTML ソース

HTML ソースは、見てもらうと分かりますが、ごく標準的な構造のままです。n

CSSソース

使用している画像一覧

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/76