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

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

★角の丸い枠を作ろう!★

「角の丸い枠」の構成

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

1.枠の四隅の画像 →
2.画像を組み合わせるTABLEタグ

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

昔々、あるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ芝刈りに…

TABLE要素とは

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

品目 単価 個数 金額
りんご 100 3 ¥300円
バナナ 60 2 ¥120円
みかん 80 8 ¥640円
合計     ¥1060円

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

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

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

★角の丸い枠を作ろう!★

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

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

それでは次のページへ →