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

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

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

その4隅に角を丸く潰すような画像を埋め込みます。
その画像は画像ソフトで作成します。

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

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

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

【　解　　　　説　】

まず、角を丸く潰すための画像を背景色と同じ色で作成します。
今回の画像は内部が埋まった四角形を描いてその中を円でくり抜いたものです。
その後、その画像を上下左右に4等分したものです。

次に、上下左右に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{ background-color: #ff00ff; border-collapse: collapse; }
次は各セルの設定です。
上の辺と下の辺の高さを一度に指定しましょう。
.td1,.td2,.td3,.td7,.td8,.td9{ height: 15px; }
次に左の辺と右の辺の幅も一度に指定しましょう。
.td1,.td3,.td4,.td6,.td7,.td9{ width: 14px; }
次は上下の真ん中のセルの高さの指定です。
.td4,.td5,.td6{ height: 100px; }
同様に左右方向の真ん中のセルの幅の指定です。
.td2,.td5,.td8{ width: 200px; }
最後に4隅のセルにそれぞれの画像を次のように背景として埋め込みます。。
.td1{ background-image:url('../../images/exp/enwul.gif'); } .td3{ background-image:url('../../images/exp/enwur.gif'); } .td7{ background-image:url('../../images/exp/enwdl.gif'); } .td9{ background-image:url('../../images/exp/enwdr.gif'); }
以上で出来上がりです。

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

【記述サンプル】: <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>