角の丸い枠を作る

※この記事は、2001年6月に書かれたものです。
同様のデザインをスタイルシートだけで作成する方法として、記事「画像を使わずにCSSだけで角を丸くする方法」が2009年7月に公開されています。 そちらも併せてご参照下さい。

HTMLやスタイルシートだけでは、なかなか凝ったデザインは作りにくいものです。 今回は、TABLE要素と画像を使って、次のような「角の丸い枠」を作る方法をご紹介致します。

「角の丸い枠」の構成

この「角の丸い枠」は、次の２つの要素から構成されています。

１．枠の四隅の画像 →
２．画像を組み合わせるTABLEタグ

※画像は四隅にしか使用していませんので、枠の大きさは自由自在に変更可能です。（下記のように、中身の文章の長さに応じて、自動的に拡張されます。）

TABLE要素とは

TABLE要素とは、本来は、次のような「表組み」を作る際に使用するものです。

しかし、枠線のサイズを「0」にして見えなくすることで、レイアウトの作成やデザイン目的に応用することも可能です。（本来の用途とは異なりますが。）

※この All About Japan 内の各ページの段組も、TABLEタグを使って実現しています。

冒頭でお見せした「角の丸い枠」を、TABLEの枠線のサイズを「1」にして表示すると、次のようになります。 こうして見ると、どういう構造になっているのかが良く分かるでしょう。

単に、３×３段の表組みを作り、その四隅に画像を置いているだけのことです。 四隅以外のセル（マス目）の背景色を、画像と同じ色（ここでは青）にしています。

それでは、次のページから、実際に作成してみましょう！

それでは次のページへ →