■ オタクな話★ホームページ作成編2★

最終更新日01/05/02

オタクな話TOP

HOME


テーブルをレイアウトに活用しよう <part1 壁紙編>

テーブル(表)は、もともとはその名のとおり、「表」を表現するためのタグでしたが、HP作成の世界では、レイアウトの小道具として使われることが多いです。
特に「border="0"」と枠線を「0」にしてしまえば、線が表示されないので、そこにテーブルがあるように見えませんしね。 しかも、テーブルの中にも壁紙を指定することができるので、これをうまく活用すると、小さな画像なのに、大きなイラストにも匹敵するほどの効果を出すことができます。
さらに、スタイルシートは使ってないので、古いブラウザ(IE3以上、ネスケ4以上)でも、だいたい対応してます。
いくつか例を書いてみますね。
もしも、画像の縦横のサイズを調べるのが大変、という人は→ ☆はっとりワールド へ行って、
Image Size for HTML」というソフトをダウンロードしてきましょう。
簡単に画像の縦横のサイズを調べることができるHP作成者の必需品です。(ただし、WINのみです。(^^ゞ)

●テーブルの縦と壁紙画像の縦サイズを合わせた例
tate.gif

左の画像は、小さな画像(2kb 縦180×横50)です。
これをもしも、通常に壁紙に使うと──
  こんな感じになっちゃいますよね。→☆サンプル1☆

↓でも、これだったら? ☆サンプル2☆

あら? これは。(^^ゞ
あらま〜。(笑)

なぜ、縦の繰り返しが、ないの?(^^ゞ

【説明】
ま、説明するまでもないですが、壁紙、というのは、基本的にスペースがあるだけ、縦横に繰り返します。
でも、テーブルの高さと画像の高さが丁度同じ場合は、縦に繰り返すスペースがないので固定できる、というわけです。
特に画像の輪郭付近の色(この場合は白)と、テーブルの外の背景色を合わせておくと、溶け込んだように見えるので、けっこう効果的です。
↓にソースを書きましたが、この場合は、テーブルの高さ「HEIGHT="180"」と、テーブルの壁紙に指定した「tate.gif」の高さが、同じ180ピクセルだったわけです。

【ソース】
<table width="80%" HEIGHT="180" border="0" cellspacing="0" cellpadding="0" background="images/tate.gif">
<tr><td align="center"><p><font color="#FFFFFF"><b>あら? これは。(^^ゞ<br>あらま〜。(笑)</b></font></td></tr></table>
<p>なぜ、縦の繰り返しが、ないの?(^^ゞ


●テーブルの横と壁紙画像の横サイズを合わせた例

b_usu001.jpg

↑上の画像も、けっこう小さいです。(1.5kb 縦18×横600)
ですが、これをうまく使うと、こういうこともできます。
↓(1周年記念の仮装パーティで実際に、使った方法です)


関係者各位 殿

謹啓 時下ままますご清勝のこととお慶び申し上げます。
このたび、柏枝真郷のホームページ「ACORN」が開設1周年を迎えることとなりました。9月に10万ヒットも記録いたしましたので、その記念イベントと併せまして、仮装パーティを開催いたします。
皆さまご多忙のこととは存じますが、万障お繰り合わせのうえ、ぜひともご出席いただいきたく、ご案内いたします。
なお、仮装に後ろ向きな性格のキャラに対しては、作者より強制的にリクエストさせていただきましたので、あしからずご了承ください。


【説明】
今度は、テーブルの横幅と画像の横幅を、ぴったり同じにしてみました。
下にソースを書きましたが、この場合は、テーブルの横幅「width="600"」と、テーブルの壁紙に指定した「b_usu001.jpg」の横幅が、同じ600ピクセルになってます。
さらに、赤い部分に文字が重ならないように、「cellpadding="40"」で、テーブル内の余白を40ピクセルと指定してます。

【ソース】
<table width="600" border="0" cellspacing="0" cellpadding="40" background="images/b_usu001.jpg">
<tr><td><p><br>関係者各位 殿</p>
<p>謹啓 時下ままますご清勝のこととお慶び申し上げます。<br>
  (中略)
なお、仮装に後ろ向きな性格のキャラに対しては、作者より強制的にリクエストさせていただきましたので、あしからずご了承ください。</p>
</td>
</tr></table>


●テーブルの縦と横幅と、壁紙画像の縦と横幅のサイズを合わせた例
kinoko.jpg

左の画像(7kb 縦160×横250)は、普通のイラストで、壁紙に使うことは、ありませんよね。
でも、壁紙に使うことで、メリットもあるのです。
つまり、「絵の上に字が書ける!」んですね。
素材屋さんの素材の場合、著作権の都合上「加工禁止」になっている物も多いですし、たとえ「加工OK」でも、せっかくの綺麗なイラストに、お絵かきソフトで字を加えるのは、ちょっと躊躇してしまいます。
でも、壁紙で指定しているだけなら、画像は何も加工せずに、文字を上に載せることができるわけです。アニメgif(動画)の上に文字を載せることだってできます。
↓こんな感じで……。


GOOD
NIGHT !


【ソース】
<table WIDTH="250" HEIGHT="160" border="0" cellspacing="0" cellpadding="5" background="images/kinoko.jpg">
<tr><td><p><font color="#FFFFFF"><b>GOOD<br>NIGHT !</b></font><br>
</td></tr></table>


以上、3つの例を挙げましたが、いろいろ応用して工夫してみると、小さな画像で、「え?」と思うような表現が出来て、楽しいかと思います。
ちなみに、タグを手打ちしてないで、html作成ソフトで作っている人でも、「テーブルの設定」とかで、縦、高さ、テーブルの壁紙などを指定するときに工夫してやれば、簡単に出来る方法です。
ただし! 注意点があります。

●テーブルに背景画像を使うときの注意点!

テーブルを、複数の行列(セル)に分割してしまうと、IEとネスケ4.7xでは、背景の表示方法が違います。
たとえば、上の例を、こんなふうに縦2行×横2列のセルに分割してみた場合。

GOOD

NIGHT !

GOOD

NIGHT !


IEでは、テーブルを分割してもテーブル全体に壁紙画像が表示されますが、ネスケではセル単位に壁紙が表示される、んですね。 したがって、こんなふうに見えます。(下の例は、実際にブラウザで表示させた画面を、画像として保存したものです)

【IEの場合】

tableie.jpg

【ネスケ4.7x以下の場合】

tablenc.jpg


ネスケ4.7x以下の場合は、「ありゃりゃ〜」な感じですよね。
ですので、テーブルは、なるべくセルに分割しない で使ったほうがいいです。


Copyright © 2001 MASATO KASHIWAE All Rights Reserved.