| Making | T | a | b | l | e | s | with fun. |
| 明るく楽しい | T | A | B | L | E | タグ | 講座 |
| Only for IE3.0 or NN3.0 | |||||||
| Mascot Penguin | __ |
左には、IE3.0だと、マスコット・ペンギンが四つ並び、その上に赤い文字でMascot Penguinと表示しているはずです。NN3.0ですと、セルのバックグラウンド指定ができませんので、単に緑色の部分に文字が浮いているだけです。
ああ、IE3.0でよかったねえ。こうやって、イメージの上にキャプションを乗っけられるものねえ。……なんですが、ことはそう単純じゃないのでした。
IE3.0テーブルのTDで、どうもVALIGNの指定が効かないのですよ(正確には、効いたり効かなかったりする)。要するに、ここは、Mascot Penguinという文字を真ん中に表示させたかったのですが、上にくっついてますよね、IE3.0だと(あるいは、そーじゃない表示になることもあるんだな、これが)。
NN3.0だと、文字はちゃんと、ど真ん中に表示されているのですが、バックグラウンド・イメージの指定ができないのですから、なんのことやらわかりません。
| Mascot Penguin | __ |
問題は、まだあるぞお。
上の例は、基本図形が100×90のサイズを4つ、つまりは200×180で表示しているのですが、これを100×90にして1コだけ表示させようとしても、文字によって表示幅が変わってしまうのでありますことよ。
Mascot Penguinという文字のフォントサイズを+4にして、TD指定は100×90にしたのが、次の例です。IEだと、しっかり、バックグラウンドが、でっかくなってしまってますね。もちろんこれは、セル内の文字は、ちゃんと全部表示させるという機能のためには、必要な条件ですから、納得もできます。NNだと、なんてったって、文字がセルからはみ出ちゃうんだもん。あ、そー言えば、IEでも、そうなることがある。総じて、他のテーブルセルの表示幅との整合性の問題です。
![]() |
__ |
文字がだめなら絵ならどうだ。
透過GIFを置いてみました。やっぱ、IEでVALIGNが効いてくれないのが、きっついなあ。真ん中に持ってきたいところだなあ(とか言って、真ん中に表示されることもあります)。
傾向としては、ローカルだとうまくいかなくて、ネットからだと、まともに表示されることがあるようです(……ということは……)。
論理的には、IEの方が好きなんだけど、「VALIGNとかのバグはとってね」というところでしょうか(それとも、ワタシがなんか変なことやってるのだろうか……なんか、どうもそれっぽいなあ)。
でも、ま、左のようにやれば、「擬似レイヤ機能」は実現できたわけです。レイヤって言ったって、たった2枚ですけど。
![]() Penguin |
__ |
最終的に、文字と絵を組み合わせてみました。せっかくだから(何が?)、Animated GIFを使ってみました。
これだと、ちゃんと、真ん中に来ているように見えるってのは、どういうワケかいのォ。やっぱり、どうも、納得いかないなあ。ソース見て、おかしいところがあったら、教えてください。でも、ブラウザのせいにしておこう。
とりあえず、左のみたく、かわいくできたから、よしとしておきましょう。
ソースは、以下のごとくです。
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="200" HEIGHT="180" 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="Arial, Helvetica">
<B>Penguin</B></FONT>
</TD>
</TR>
</TABLE>
|
今回は、ブラウザに引きずり回されて、少々難儀しました。でも、こんなことやるやつが悪いんですから、仕方ないですね。
レイアウト・コントロールでは、標準でレイヤをサポートしています。もしも、今回と似たようなことをやりたいのなら、TABLEなんて利用しないで、そっちを使った方がいいでしょう。なんとなく、最近、意固地になってTABLEタグ書いてるような気もしますが、ページレイアウトに関する新しいタグをネットスケープが発表したことからしても、次のNNで、レイアウト・コントロールに、ネットスケープがまともに対応するかどうか、疑問です。
今回のものでも、すでにNNよりもIEの方が先を走ってしまっていますし、フレームのボーダー等に関しても、ネットスケープはどうなるかわかりません。って言うより機能的には、IEは、NNなんてぜんぜん問題にならないところまできてると思うんですがねえ。もちろん、バグは、まだがんすか残ってますがね。でもそれ言やあ、NNだってそーだもんな。
それでは、ご質問、ご要望、ご指摘をよろしく。