2007年06月15日

背景画像の表示方法-基本編

今回は、「角が丸い背景(角丸)の実現方法」をご紹介していきます。

サイドメニューや、コンテンツをグループ毎に表示する際など、
角が丸くなっている枠で囲まれているページを見たことがあるかと思います。

この角が丸くなっているボックスのことを通称「角丸」といいますが、
みなさんはこの角丸をどのようにコーディングされていますか?

css3では、角を丸くするスタイルや
1つの要素に複数背景画像を設定することができますが、
まだ策定段階(対応していないブラウザがほとんど)
のため、今回は触れません。

角丸の実現方法はいくつかあると思いますが、
私からは下記の3パターンご紹介します。

 
「分割なしのパターン」
これは、普通に背景に設定するだけのパターンです。
(htmlコーディング例)
<div class="entry1">
テキスト<br />
テキスト<br />
テキスト
</div>
(cssサンプル)
.entry1 {
padding:10px;
background:url(images/back.jpg) no-repeat left top;
}
このパターンは、例えば、見出しの背景など、
枠内の内容が増えたりしない、
ボックスの大きさが完全に決まっているデザインの場合のみ使用できます。
 
「2分割のパターン」
まずは、ソースをごらんください。
(htmlコーディング例)
<div class="entry2">
<div class="body">
テキスト<br />
テキスト<br />
テキスト
</div>
</div>
(cssサンプル)
.entry2 {
background:url(images/bottom2.jpg) no-repeat left bottom;
}
.entry2 .body {
padding:10px;
background:url(images/top.jpg) no-repeat left top;
}

このパターンはボックスの下の画像の高さを余計に高くとり、
上の画像で押さえつけるようなイメージです。(上図参照)

下の画像、bottom2.jpgの高さの分だけ
ボックスがタテに伸びることができます。

bottom2.jpgのポジションをbottomにしないと
下が切れたような表示になってしまいますのでご注意ください。
 
「3分割のパターン」
このパターンは他の2パターンと違い、ボックスがどれだけ長くなっても対応することができます。特にコーディングに制限がなければ、このパターンを使うと無難ですが、コーディングが少し複雑になってしまうのが難点です。
 
(htmlコーディング)
<div class="entry3">
<div class="body">
テキスト<br />
テキスト<br />
テキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
(cssサンプル)
.entry3 {
padding-top:4px;/* ←top.jpgの高さ*/
background:url(images/top.jpg) no-repeat left top;
}
.entry3 .body {
padding:6px 10px 6px 10px;
background:url(images/body.jpg) repeat-y left top;
}
.entry3 .bottom {
height:4px;/* ←bottom.jpgの高さ*/
background:url(images/bottom.jpg) no-repeat left bottom;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:1px;
}
entry3クラスで左右のpaddingを設定したり、
bodyクラスで左右のmarginを設定したりすると、
崩れてしまいますのでご注意ください。

もし、グラデーションやドロップシャドゥの無い、
枠組みだけの角丸の場合は、bodyクラスに背景画像ではなく、
左右のボーダーをつけることでも対応可能です。
 
補足) さらにスタイリッシュにキメるなら
3分割パターンのhtmlのソースをごらんください。

<div class="bottom">&nbsp;</div>

という部分があります。
この行はボックスを閉じるためのものですが、
htmlのソースのみで見た場合、全く意味のないソースです。

もし、このボックス内にタイトル表示部分があれば、
この意味のないソースを取り除くことができます。

以下にコーディング例を表記します。
(htmlコーディング)
<div class="entry4">
<div class="title">タイトル</div>
<div class="body">
テキスト<br />
テキスト<br />
テキスト
</div>
</div>
(cssサンプル)
.entry4 {
background:url(images/body.jpg) repeat-y left top;
}
.entry4 .title {
padding-top:4px;
background:url(images/top4.jpg) no-repeat left top;
}
.entry4 .body {
padding:6px 10px 10px 10px;
background:url(images/bottom.jpg) no-repeat left bottom;
}

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 19:05 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。