 |
| こういうのです |
|
画像を利用して枠を自由に作るテクニックです。
タネは簡単、テーブルの背景に画像を表示しているだけです。
テーブルの線は非表示にしてありますが、それを表示してみましょう。
|
| 三段に分かれたテーブルがベースになっています。 |
|
使用している画像は３つです。
・上段用（300x15pixel）
・中段用（300x10pixel）
・下段用（300x20pixel）
画像の横幅が300pixelなので、テーブルの横幅は300に。高さを100に。
上段のセルは高さを15に。
中段は未入力、もしくはサイズが決まっているならそのサイズ。
下段の高さを20に。
*テーブルの高さ設定が未入力でも表示が大きく崩れることは今のところありませんが、ブラウザによっては表示が崩れることがあります。なるべく入力しておいた方が良いようです。
小さい数字を入れておけば、中に入る画像や文字によって表が伸びてくれます。
表ができたら、上中下の各セルの背景に画像を指定します。セルの中に画像を直接配置しないのは、画像を入れてしまうと文字や他の画像が入れられないためです。背景に画像を表示させれば、その画像の上に文字を入力できます。
中段のみ、画像をくり返し表示させます。ビルダーでの背景画像表示は縦と横にくりかえされますが、テーブルの横サイズと画像の横サイズがきちんと合っていれば縦にのみくり返されているように見えるので問題ありません。
■応用
|
■上下のセルの背景に画像を使っているだけなので、枠から他の画像がはみ出た枠なども作ることができます。
■この例でわかるように、複雑に見えるデザインもテーブルと画像の応用でできていることがほとんどです。
■上段のセルには、タイトルがすでに書かれている画像を使っていますが、タイトルの入っていない画像を使えば、別のタイトルを入れて枠を使いまわすことができます。
|
|
|
