CSSで角丸長方形のボックスを描く方法

　Webサイトではよく見かける、角丸長方形やその他の装飾が施されたテキストボックスですが、普通に<div>タグで描いたボックスは長方形にしかなりません。残念ながらXHTML1.0にはそのまま角丸長方形を描くコマンドはありません。ここではCSSを用いて角丸長方形を使ったテキストボックスを描く方法を練習します。

1.Illustratorで角丸長方形のボックスを描く

　まずはIllustratorを起動します。アートボードのサイズは仮に幅400px×高さ400pxとしてみましょう。幅はブラウザで表示するときの寸法、高さは可変なのでいくつでも構いません。アートボード一杯に塗り白（#ffffff）線なしの長方形を描きます。寸法は変形ウィンドウで正確にx=0,y=0,W=400,H=400に合わせこみます。次にこの長方形を選択し、コピー→前面へペーストで複製します。前面の長方形のみを選択し、塗りを水色#aaccff、線を黒#000000に設定し、線の位置は内側に揃えましょう。この長方形に対して、今度は[効果]→[スタイライズ]→[角を丸くする]で、半径20pxで角丸にしましょう。

2.Illustratorでスライスを切る

作った角丸長方形をスライスします。スライスツールを用いて、以下の3パーツに分割しましょう。

　スライスを[Webおよびデバイス用に保存]で、GIF形式でデスクトップ上に保存します。[ファイル]→[別名で保存]で、.aiファイルを保存しておきましょう。切り出したスライスの名前は、後の作業のためにそれぞれ「rounded_top.gif」「rounded_body.gif」「rounded_bottom.gif」に変更して、imagesフォルダを作ってそこに入れておきます。

3.Dreamkweverを起動し、任意のフォルダに新規でHTMLファイルとCSSファイルを作ります。

　ファイル名はそれぞれ「index.html」と「style.css」にします。index.htmlの中に、style.cssへのリンクを張っておきましょう。

4.index.htmlのbodyタグ内に以下のように記述します。

<div class="rounded_body">
	<div class="rounded_top">
		<div class="rounded_bottom">
			<p>テキストの一例</p>
		</div><!-- rounded_bottom -->
	</div><!-- rounded_top -->
</div><!-- rounded_body -->

5.style.cssに以下の記述をしてください。

*{
	padding:0;
	margin:0;
	line-height:1.6em;	
}
.rounded_bottom p{
	padding:16px;	
}
.rounded_body{
	width:400px;
	background-image:url(images/rounded_body.gif);
	background-position:center;
	background-repeat:repeat-y;
	margin:16px;
}
.rounded_top{
	width:400px;
	background-image:url(images/rounded_top.gif);	
	background-position:center top;
	background-repeat:no-repeat;
}
.rounded_bottom{
	width:400px;
	background-image:url(images/rounded_bottom.gif);
	background-position:center bottom;
	background-repeat:no-repeat;
}

6.ブラウザで表示を確認する。

　ブラウザで表示を確認します。下の写真のように表示されていれば成功です。（サンプル）<div class="rounded_body">で胴体部分の画像を背景画像として表示し、y方向にリピートしています。<div class="rounded_top">で、角丸長方形の上だけ切り取った図形を背景画像として表示しています。更に、<div class="rounded_bottom">で角丸長方形の下だけ切り取った図形を背景画像として表示しています。

8.長文を書いてテストする。

　それでは、試しにこのdivボックスに長文を書いてみましょう。Webサイトの更新時などに文章を書き足したい時に、このような方法が便利です。index.htmlの中のテキストを以下のように書き換えます。（サンプル）

　ブラウザでもう一度表示してみましょう。以下のように表示されていれば成功です。

　以上で枠線付き角丸長方形ボックスは完成です。ポイントはIllustratorで描いた角丸長方形を3つのパーツに分解して保存し、html内でdivタグの入れ子構造を作って、各階層にbackground-imageを設定してやることです。

PageTop