角の丸い枠を作成する Table編

ある一定のまとまった内容を枠で囲んでいるホームページを見かけます。 その中でも 角 が 丸 くなったものを見かけます。どうやって実現しているのでしょう?

ここでは、今となっては邪道といわれるかもしれませんが、 Table 要素を使って実現してみます。 CSSが普及していない時代、よく使われました。今でも使っているホームページは、たくさんあります。

それでは、最も簡単な幅を固定した方法を考えて見ます。 この方法は、箱をヘッダー、本体、フッターの3つに分解して考えます。

イメージ

3つに分けたそれぞれを Table の各行に割り当てます。 最終的には、tableのborderを0にしセル間の間隔をなくします。

ヘッダー
本体
フッター

もう少しこったこともできます。こったというか、ホームページのサイズを小さくする工夫であったり 枠のサイズを可変にできる工夫であったりします。

最初の例では、枠を3つに分解しましたが、ここでは、9個に分解して考えたいと思います。

C1 h C2
l b r
C3 f C4

このようにすることで、いろいろな枠を作成することができます。 また、CSSとの組み合わせでもいろいろなことができます。