最終更新日01/05/02

オタクな話ＴＯＰ

HOME

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

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

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

↓でも、これだったら？　☆サンプル２☆

あら？　これは。(^^ゞ
あらま〜。（笑）

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

【説明】
ま、説明するまでもないですが、壁紙、というのは、基本的にスペースがあるだけ、縦横に繰り返します。
でも、テーブルの高さと画像の高さが丁度同じ場合は、縦に繰り返すスペースがないので固定できる、というわけです。
特に画像の輪郭付近の色（この場合は白）と、テーブルの外の背景色を合わせておくと、溶け込んだように見えるので、けっこう効果的です。
↓にソースを書きましたが、この場合は、テーブルの高さ「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>なぜ、縦の繰り返しが、ないの？(^^ゞ

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

関係者各位　殿

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

【説明】
今度は、テーブルの横幅と画像の横幅を、ぴったり同じにしてみました。
下にソースを書きましたが、この場合は、テーブルの横幅「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>

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

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

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

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

【ＩＥの場合】

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

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