背景画像を使って角丸ボックスを表示させる | 圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~

背景画像を使って角丸ボックスを表示させる

背景画像を使うことで、デザインの幅が広がります。その例として、背景画像を用いたボックスの作り方を紹介します。サイト作りでも役立つテクニックです。

角丸ボックスエリア

■HTMLでの骨格

<div class=”sample-round-top“>
<div class=”sample-round-middle“>
<div class=”sample-round-bottom“>
ここにテキストを書きます。ここにテキストを書きます。<br />
ここにテキストを書きます。ここにテキストを書きます。<br />
ここにテキストを書きます。ここにテキストを書きます。<br />
ここにテキストを書きます。ここにテキストを書きます。<br />
ここにテキストを書きます。ここにテキストを書きます。<br />
ここにテキストを書きます。ここにテキストを書きます。<br />
ここにテキストを書きます。ここにテキストを書きます。<br />
ここにテキストを書きます。ここにテキストを書きます。<br />
ここにテキストを書きます。ここにテキストを書きます。<br />
ここにテキストを書きます。ここにテキストを書きます。
</div><!– /div class=”sample-round-bottom” –>
</div><!– /div class=”sample-round-middle” –>
</div><!– /div class=”sample-round-top” –>

■CSSでの装飾

div.sample-round-top {
width: 600px;
padding: 35px 0 0;
background-image: url(★★★ 「round-top.png」 の画像URL ★★★);
background-position: center top;
background-repeat: no-repeat;
text-align: left;
}

div.sample-round-middle {
padding: 0;
background-image: url(★★★ 「round-middle.png」 の画像URL ★★★);
background-position: center top;
background-repeat: repeat-y;
text-align: left;
}

div.sample-round-bottom {
padding: 0 30px 35px;
background-image: url(★★★ 「round-bottom.png」 の画像URL ★★★);
background-position: center bottom;
background-repeat: no-repeat;
text-align: left;
}

■実際の見栄え

ここにテキストを書きます。ここにテキストを書きます。
ここにテキストを書きます。ここにテキストを書きます。
ここにテキストを書きます。ここにテキストを書きます。
ここにテキストを書きます。ここにテキストを書きます。
ここにテキストを書きます。ここにテキストを書きます。
ここにテキストを書きます。ここにテキストを書きます。
ここにテキストを書きます。ここにテキストを書きます。
ここにテキストを書きます。ここにテキストを書きます。
ここにテキストを書きます。ここにテキストを書きます。
ここにテキストを書きます。ここにテキストを書きます。

■素材画像

上部の背景画像
左右の背景画像
下部の背景画像

一言

一見、一枚の背景画像から出来ているように見えるボックスですが、
実は、3枚の背景画像を、部品部品で組み合わせている…というところがミソです。

1枚の背景画像でボックスを表現しても良いんですが、
例えば、たくさん文章を書いたときに、背景画像が小さいと
その中に文章が入りきらなくなりますよね?

なので、文章をたくさん書いても自由にボックスが大きくなれるように、
わざわざ部品ごとに背景画像を3つ作って、ボックスをレイアウトさせます。

  • Yahoo!ブックマークに登録する
  • はてなブックマークに登録する
  • livedoorクリップに登録する
  • newsingブックマークに登録する
  • del.icio.usブックマークに登録する
  • ニフティクリップに登録する
  • RSSを購読する
  • このページをブックマーク!

次の記事 »
前の記事 »
トップページへ » 圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~

お問い合わせはこちらからどうぞ

圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~ TOP » ブロック要素<div>タグの活用 » 背景画像を使って角丸ボックスを表示させる