※より良い実現方法を別記事で解説しています。
この記事でご紹介している方法は、HTMLのみを用いて実現する方法です。 スタイルシートを用いてもっと自由自在に実現する方法を、新記事「縞模様で目立つ枠線(囲み)を作る」(2008年2月2日)で公開しています。 そちらもぜひご参照下さい。

普通ではない枠を作りたい

HTMLのtableタグを使って枠を作ると、次のように表示されます。 代表的なブラウザでは、枠が立体的に見えます。

このような枠だけではつまらないと思う方々のために、今回は次のようなちょっと変わった枠の作り方をご紹介いたします。

●縞模様の枠線

●太さ1pixelの枠線

HTMLのtableタグを用いて表を作成すると、(少なくとも代表的なブラウザでは)枠線が立体的に表示されます。 tableタグには枠線の太さなどを指定する属性がありますが、それを最小にしても、立体的に表示されることには変わりありません。
たまには、立体的ではない細い線を使った枠や、もっと複雑な模様の枠を使ってみたいとは思いませんか?

というわけで、今回は、上記のようなちょっと変わった2種類の枠を作ってみましょう。

縞模様の枠線を作る

まずは、実現方法の流れを簡単にご説明致します。詳しい記述内容は次のページで解説しています。

1. 次のような画像を用意します。
縞模様サンプル:青 縞模様サンプル:赤 縞模様サンプル:緑
2. その画像を背景色にして(TABLEタグで)枠を作ります。
3. その枠の内側に、背景色が白色の枠を作ります。
4. 外側と内側のtableタグの属性を調整します。

以上です。簡単ですね。具体的な記述方法は、次のページでご紹介しています。
※スタイルシートを用いてもっと自由自在に実現する方法を、新記事「縞模様で目立つ枠線(囲み)を作る」(2008年2月2日)で公開しています。

太さ1pixelの枠線を作る

太さ1pixelの細い枠線も、実現方法はほとんど同じです。

1. 適当な色を背景にして枠を作ります。
2. その内側に、背景色が白色の枠を作ります。
3. 外側と内側のtableタグの属性を調整します。

以上です。非常に簡単ですね。 具体的な記述方法は、次のページでご紹介しています。

具体的な記述方法(HTMLソース)は次のページで >>