※スタイルシート、スタイル属性の詳しい解説は、「HTMLの解説」にあります。

■ 角の丸い外枠のみのＢＯＸ（四角枠）の作成

角の丸いＢＯＸ（四角）を作成する方法は、まず表組みで上下左右それぞれ３等分、全部で９つに分かれた表を作成します。

そして外枠の部分にそれぞれの画像を埋め込みます。
その画像は画像ソフトで作成します。

言葉で説明するとわかりにくいので簡単なサンプルを作ってみました。

スタイルシートの方が記述が簡単ですし、解説も楽なので、スタイルシートを使用した作成方法を説明します。

※スタイルシートやスタイル属性の詳しい説明は、「HTMLの解説」竏秩u15.スタイルシート」や「HTMLの解説」竏秩u14.スタイル属性」を参照してください。


	角の丸い外枠のみのＢＯＸ（四角）

【　解　　　　説　】

まず、角を丸くした線画を作成します。
その後、その画像を上下左右に9等分します。

　　　　↓

次に、上下左右に3等分、全部で9つに分かれた表を作成します。

テーブル（表）全体を定義するために次のように「table」タグに「class="tbl1"」を追記します。
<table class="tbl1">
同様に、左上のセルから右方向に順に「class」属性で名前を付けていきます。
<td class="td1"></td> <td class="td2"></td> <td class="td3"></td> <td class="td4"></td> <td class="td5"></td> <td class="td6"></td> <td class="td7"></td> <td class="td8"></td> <td class="td9"></td>
ここまで準備ができましたら後はスタイルシートの作成です。
まず、セル間の隙間を「0」にする設定を記述します。
.tbl1{ border-collapse: collapse; }
次は各セルの設定です。
上の辺と下の辺の高さを一度に指定しましょう。
.td1,.td2,.td3,.td7,.td8,.td9{ height: 10px; }
次に左の辺と右の辺の幅も一度に指定しましょう。
.td1,.td3,.td4,.td6,.td7,.td9{ width: 8px; }
次は上下の真ん中のセルの高さの指定です。
.td4,.td5,.td6{ height: 100px; }
同様に左右方向の真ん中のセルの幅の指定です。
.td2,.td5,.td8{ width: 200px; }
最後に外枠のセルにそれぞれの画像を次のように背景として埋め込みます。。
.td1{ background-image:url('../../images/sample/rbox1_01.jpg'); } .td2{ background-image:url('../../images/sample/rbox1_02.jpg'); } .td3{ background-image:url('../../images/sample/rbox1_03.jpg'); } .td4{ background-image:url('../../images/sample/rbox1_04.jpg'); } .td6{ background-image:url('../../images/sample/rbox1_06.jpg'); } .td7{ background-image:url('../../images/sample/rbox1_07.jpg'); } .td8{ background-image:url('../../images/sample/rbox1_08.jpg'); } .td9{ background-image:url('../../images/sample/rbox1_09.jpg'); }
以上で出来上がりです。

上記のサンプルは次のようなタグで作成されています。
どうです？　かなり簡単でしょう？

【記述サンプル】: <table class="tbl1"> <tr> <td class="td1"></td> <td class="td2"></td> <td class="td3"></td> </tr> <tr> <td class="td4"></td> <td class="td5"></td> <td class="td6"></td> </tr> <tr> <td class="td7"></td> <td class="td8"></td> <td class="td9"></td> </tr> </table>

スタイルシートの記述は次の通りです。

【記述サンプル】: <style type="text/css">  </style>