CSSで可変対応した角丸のボックスを作る その2

CSSで可変対応した角丸のボックスのサンプル

前回のCSSで可変対応した角丸のボックスを作る その1は、画像を上部、下部の二つに分けてやっていたのですが、今回は上記画像の用に上部、中部、下部に画像を切り出してやるやり方を解説したいと思います。

Domo Page

…ここからが続き

見出しなしのテキストのみ場合

XHTML

<div class="column">
	<div class="inner">
    <div>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
	</div>
    </div>
</div>

CSS

div.column	{
	width: 570px;
	background: url(image/bottom.jpg) no-repeat bottom;
	padding-bottom: 25px;
	margin-bottom: 40px;
}
div.column .inner	{
	background: url(image/top.jpg) no-repeat;
	padding-top: 25px;
}
div.column .inner div	{
	background: url(image/center.jpg) repeat-y;
	padding: 0 20px;
}
  1. 全体を包むdiv(.column)にボックスの下に来る部分の画像を読ませる。
  2. その中にもう一つdivを用意し、このにボックスの上部に来る画像を読み込ませる。
  3. div(.inner)の中にもう一つdivを用意し、このボックスの中部に来る画像を読み込ませる。

見出しありの場合

<div class="column">
    <div class="body">
    	<h3>見出し</h3>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
    </div>
</div>
div.column	{
	width: 570px;
	background: url(image/bottom.jpg) no-repeat bottom;
	padding-bottom: 25px;
	margin-bottom: 40px;
}
div.column h3	{
	background: url(image/top.jpg) no-repeat;
	padding: 25px 25px 0;
	margin: 0 -20px 10px;
}
div.column .body	{
	background: url(image/center.jpg) repeat-y;
	padding: 0 20px;
}
  1. 全体を包むdiv(.column)にボックスの下に来る部分の画像を読ませる。
  2. div(.column)に中にもう一つdiv(.body)を用意し、このボックスの中部に来る画像を読み込ませる。
  3. 見出し要素(上記説明の場合h3)に上部に来る画像を読み込ませる。(marginを左右に-20pxする事でpaddingの左右20pxを相殺しています。)

dlで作った場合

<dl class="column">
    <dt>見出し</dt>
    <dd><p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
    </dd>
</dl>
dl.column	{
	background: url(image/center.jpg) repeat-y;
}
dl.column dt	{
	background: url(image/top.jpg) no-repeat;
	padding: 25px 25px 10px;
	font-weight: bold;
}
dl.column dd	{
	background: url(image/bottom.jpg) no-repeat bottom left;
	padding: 0 25px 25px;
}
  1. dl(.column)にボックスの中部分の画像を読ませる。
  2. dtに上部に来る画像を読み込ませる。(上、左右のpadding調整)
  3. ddに下部に来る画像を読み込ませる。(下、左右のpadding調整)

CSSで可変対応した角丸のボックスのまとめ

前回と今回説明した用に、CSSで可変対応した角丸のボックスと言っても作り方はいろいろあります。

自分は大体CSSで可変対応した角丸のボックスを作る その1で解説したように画像を上部、左右下部の二つに分けて作るやり方を使っています。
理由は無駄divを増やす事なくソースがシンプルになる。後は楽だからですw

でも背景透過のpng画像を使う場合や、やたらと縦長になっている場合は今回の用に上部、中部、下部3つの画像を使ってのやり方を使いますね。

Download

Domo Page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article