Sorry, Only for JAP.
Making T a b l e s with fun.
明るく楽しい T A B L E タグ 講座
Only for IE3.0 or NN3.0

第9回 これってバグなの仕様なの?(96/11/10)
 「第一部/基礎とお遊び篇」のラストは、ちょっとばかり反則ワザをお教えしましょう。といっても、たいしたことじゃありません。
 とりあえず、下の例を見てもらいましょう。
日本語 わりーね、わりーね、ワリーネ・ディートリッヒ
英語 Sorry, Sorry, SONNY CHIBA

英語 Sorry, Sorry, SONNY CHIBA
日本語 わりーね、わりーね、ワリーネ・ディートリッヒ
 はー、汚っちゃないですねえ。
 これは、IEでもNNでも、同じように、透明のテーブルを重ねたようになります。バックグラウンドカラーの指定を行うと、少々見えかたに差が出ますが、基本的なこの重ね合わせは、同じようにできます。「できます」っていうか、「こんなになっちゃいました」というバグみたいなものなのですが、基本的には仕様のようです。
 
 こういうテーブルの重ね合わせを発生させるには、条件があります。
 (1) TABLEタグを2つ利用する。
 (2) 最初のTABLEのパラメータに、ALIGN=rightを使う。
 (3) 次のTABLEのパラメータには、ALIGNを使わない。
 
 上の例は、2つのTABLEの間に、<BR>を入れているので、2番目のTABLEが少しずれていますが、NNの場合は、これを入れないと、きちんと左右同じ場所に重なります。しかし、IEだと、<BR>を入れても入れなくても、ずれて表示されます。
 さて、こんなもの何に使えるのかというと……まあ、とにかく、下の例を見てください。
Penguin

Penguin
 ドロップシャドウのように見えますか?
 図版を用いないでも、こういうことがデキルのです。ところが、これには、さまざまな問題があります。
 
 問題1.IEとNNでは、重ね合わせの順序が異なる。
 問題2.見ている人のフォントの設定(サイズ等)で、見えかたが異なる。
 問題3.設定確定までの試行錯誤がうっとうしい。
 
 ユーザによって異なる表示幅の違いは、重ね合わす2つのTABLEを、さらにもうひとつのTABLEの中に入れてしまって、その幅(WIDTH)をピクセルで指定すれば、回避できます。フォントもIEの場合なら、FACEパラーメータで指定すれば、ある程度は、確定できますが、サイズは、ユーザによって基本設定が異なるので、思った通りに見えるとは言えません。
 出自が出自ですから、もともとあまり役に立つとは言えないのも仕方ありません。また、ブラウザのヴァージョンがアップして、この仕様に変更があるかもしれません。
 それでも、文字もこのようにレイヤー的に表示できるのですから、これをどうにかして使ってみようと考えたわけです。

Penguin

Penguin

 できた。
 論理的には、これでバックグラウンドのイメージと、GIFアニメのイメージと、重なっているフォントという3レイヤーを表示していることになります。もちろん、NNの人は、まともに表示されません。
 そこまでしなくても……というご意見は、じゅうじゅう承知いたしております。それでも、TABLEタグだけ使って、ここまで表現できるのだという実験です。お許しを。
 ソースは、以下のようなものです。

<TABLE WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR><TD>

<TABLE WIDTH="200" HEIGHT="180" ALIGN="right" 
       BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
  <TD ALIGN="center" VALIGN="middle"
    BACKGROUND="../image/penpen1.gif" BGCOLOR="#60AA80">
    <IMG SRC="../image/wel_pen.gif" BORDER="0" WIDTH="96" HEIGHT="90"><BR>
    <FONT COLOR="#FFFFFF" SIZE="+3" FACE="Comic Sans MS,Courier New">
    Penguin</FONT></TD>
</TR>
</TABLE>

<BR>

<TABLE WIDTH="300" HEIGHT="190"
       BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
  <TD ALIGN="right" VALIGN="bottom">
  <FONT SIZE=7 FACE="Comic Sans MS" COLOR="#808000">Penguin</FONT></TD>
</TR>
</TABLE>

</TD></TR>
</TABLE>

 WWWには、2つの側面があるように思われます。
 それが、広告と実験だと考えます。
 すべてのコンテンツが広告と実験であるという立場から見ると、インターネット上のものごとは、いっきょにクリアに展開されうると思うのです。
 情報交流とか情報市民とか呼ばれるものには、あまり興味はありません。エレクトロニック・コマースなんかも、論外です。それらに、ほんとうは、あまり価値がないのではないかとも思っているのです。
 そこをちょっと誤解しているものだから、本朝にあまた見られるような、質の低いカタログ以前のものを作って満足している企業ページとか、だらだらと小汚い文を日記として垂れ流して擬似出版行為に浸っているような個人ページとかが、あふれかえっているのだと思うのです(そのほとんどがマッカーだと断言してやるよ)。
 ここの他のページも込みで、あまり他人の事を悪く言えるようなページ内容じゃないとも思えるのですが、それでも、この9回にわたるTABLEタグ講座は、一種の「実験」にはなったと考えます。
 おそらく「応用篇」はないことでしょう。これ以外の例を提出することを考えた場合、スクリプトを利用することが前提となったり、他のWEB関連技術とのコンビネーションという形になると思われるからです。再チャレンジする予定だった「グラフ」も、そういった例です。
 また、実際問題として、自由自在なレイアウトをやりたいんなら、レイアウト・コントロールを利用することを、強くオススメします。気が向いたら、レイアウト・コントロールとActiveXに関する「実験」をやるかもしれませんが、それもNNの対応を待ってからにします。
 一日も早く、今のIE(と次のIE)が広く普及することと、一刻も早く、地上からマッカーが絶滅することを楽しみに待ちながら、準備することにしましょう。
 それでは、最後にまた、「ご質問、ご要望、ご指摘をよろしく」。