456bereastreet発-フレキシブルな角丸ボックス表示について

角丸ボックス表示

角丸ボックスといえば、表示方法にもいろいろとあります。私は最近ではNiftyConer（javascript制御）を使うようにしています。その前までは、Rico（javascript制御）を使っていました。

border-radius /-moz-border-radiusの方法もあります。 詳しくは、こちらのエントリーを読んでみてください。

border-radius + -moz-border-radius + (Nifty Corners * IE behavior) - 徒書:

http://www.akatsukinishisu.net/itazuragaki/css/nifty_corners_behavior.html

影付き角丸ボックス表示

今回456bereastreetで紹介されている影付き角丸ボックスは、二つの画像を使ってのシンプルなソースで角丸を表示する方法です。以前のエントリーから読んでいかないとイマイチ画像作成・配置の設定などわからないので理解するのに時間がかかっています。

時間があるときに少しずつ理解を進めているのですが、いろいろと関連したエントリーがあり、ごちゃごちゃになってしまうといった感じでどれくらい理解できているのか自分でもわからないといったところです。

そんなわけで、少しずつ紹介されているソースを解析しながらエントリーにして行き、理解を深めて行きます。

フレキシブルな角丸ボックス表示

二つの画像を使っての最大幅は自分の作成する画像の大きさまで対応できるCSS＋XHTMLソースです。

Flexible box with custom corners and borders

http://www.456bereastreet.com/archive/200406/flexible_box_with_custom_corners_and_borders/

以下がHTMLコードです。

<div class="box">
	<div class="bi">
		<div class="bt"><div></div></div>
		<p>コンテンツ</p>
		<div class="bb"><div></div></div>
	</div>
</div>

以下がCSSコードです。コンテンツ部分の指定無いので、自分で背景を指定するひつようがあります。

	/* CSS for the box starts here */
	.box {
		padding:0 12px 0 0;
		background:#fff url(borders.gif) 100% 0 repeat-y;
	}
	.bi {
		padding:0 0 0 12px;
		background:#fff url(borders.gif) 0 0 repeat-y;
	}
	.bt {
		height:17px;
		margin:0 -12px;
		background:url(box.gif) 100% 0 no-repeat;
	}
	.bt div {
		width:18px;
		height:17px;
		background:url(box.gif) 0 0 no-repeat;
	}
	.bb {
		height:17px;
		margin:0 -12px;
		background:url(box.gif) 100% 100% no-repeat;
	}
	.bb div {
		width:18px;
		height:17px;
		background:url(box.gif) 0 100% no-repeat;
	}

実際にのセレクタを画像で区別すると以下のようになります。

boxセレクタ

ソース上部に戻る

biセレクタ

ソース上部に戻る

btセレクタ

ソース上部に戻る

btセレクタでの divの入れ子

btセレクタでの divの入れ子は、上部の画像左側の角丸だけを表示するように指定されています。縦17ピクセル横幅18ピクセルのボックスです。当然右上部コーナー指定のbtセレクタとの高さ指定をわせる必要があります。

また、大きなRを使用する場合は、横幅も変わってきますので縦幅指定と同じくしてR画像に合わせて調整する必要があります。

要素の中身はからとなります。

ソース上部に戻る

bb セレクタ

ソース上部に戻る

bb セレクタでの divの入れ子

bb セレクタでの divの入れ子は、下部の画像左側の角丸だけを表示するように指定されています。縦17ピクセル横幅18ピクセルのボックスです。当然右下部コーナー指定のbtセレクタとの高さ指定をわせる必要があります。

また、大きなRを使用する場合は、横幅も変わってきますので縦幅指定と同じくしてR画像に合わせて調整する必要があります。

要素の中身はからとなります。

ソース上部に戻る