| Making | T | a | b | l | e | s | with fun. |
| 明るく楽しい | T | A | B | L | E | タグ | 講座 |
| Only for IE3.0 or NN3.0 | |||||||
文字のレイアウトは、なにかと難しいものですが、通常のHTMLだけでもかなり可読性の高いものを作ることができます。特に、TABLEタグは、ちょっと使っていると、すぐに混乱してぐちゃぐちゃになってしまいがちですが、なれればこれほど自由に文章やレイアウトを配置できる命令はありません。
さらに使い方次第では、思いもかけないような効果や、ワザを発揮できるのも、このTABLEタグの特長です。将来的には(IE3.0正式版がリリースされれば)、HTML Layout Controlを使って、さらに自由にページレイアウトができるようになるでしょうが、それよりももっと簡単に、しかも軽く実現できるのが、TABLEタグの活用によるレイアウトです。
IE3.0もNN3.0もまだまだ、TABLEに関しては、不統一な部分もありますし、なんだかわけのわからない振る舞いをすることもあります。それでも、オススメするのには、もちろん理由があります。なにかというと、すぐにセンタリングに頼ってしまいがちな、日本のウェブページ・レイアウトがあまりにも多いので、ちょっとしたカウンターになればと思ったからです(企業のホームなどは、まず、ほとんどがセンタリングです。しかも、でっかい画像の)。
意識的にTABLEタグを使っているといっても、まだほとんどが表組み程度で、その機能を十分に発揮させていないページが多いようなので(IEもNNもβだから当然の話なのですが)、できるだけ多くの人にTABLEタグ使いになってもらって、軽くて見やすいウェブページが増えることを期待します。
「どんなことをやっているのか、ソースを表示させてみたけどわからない」という質問がありました。たとえば、下のようなものです。
| 展覧会情報 | _ |
8月14日(水)〜8月18日(日)/梅田阪急百貨店 8月21日(水)〜8月26日(水)/新宿小田急百貨店 |
|
| _ | 「FUN! FUN! ピングー〜ようこそピングー工房へ〜」展 |
ペンギン好きで知らないものはいない、あのPINGUの撮影用の人形の展示が行われます。グッズの販売もあるようなので、ピングーや、ピンガーのファンは、必見。 なお現在、ファミレスのデニーズでは、ピングーをイメージ・キャラクターに使用していて、子ども用のメニューは、ピングー一家だらけ。店内にもたくさんポスターが貼ってあります(くれないかなぁ)。 |
|
これは、要するに、下のようなテーブルを作成して、文字を流し込み、部分的にテーブル・セルの色を付けているだけのことです。
できたら、
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="3">
として、ボーダーをとっちゃいます。
単純でしょ? たいしたことをやっているわけではないのです。
| 展覧会情報 | _ |
8月14日(水)〜8月18日(日)/梅田阪急百貨店 8月21日(水)〜8月26日(水)/新宿小田急百貨店 |
|
| _ | 「FUN! FUN! ピングー 〜ようこそピングー工房へ〜」展 |
ペンギン好きで知らないものはいない、あのPINGUの撮影用の人形の展示が行われます。グッズの販売もあるようなので、ピングーや、ピンガーのファンは、必見。 なお現在、ファミレスのデニーズでは、ピングーをイメージ・キャラクターに使用していて、子ども用のメニューは、ピングー一家だらけ。店内にもたくさんポスターが貼ってあります(くれないかなぁ)。 |
|
問題は、赤と緑の部分にアンダースコア( _ )を入力して、そのフォントの色をバックグラウンドカラーと同じものにしてあるだけです。上の例ですと、わかりやすいように白にしてあります。別段、これは、ピリオドでも、全角文字でも構いませんし、全角の空白を入力しておけば、フォント色の指定も必要ありません。
私の場合は、この部分に変更を加える場合にわかりやすいように、アンダースコアを入力してあります。IE3.0であるならば、「 」と入力しておけば、空白を入力したこととなりますが、これがNN3.0だと、丸が表示されてしまうのです。
以下に、ソースを表示しておきますので、参考にしてください。実は、まだ不可思議な部分もあるのですが、それはおいおい解説します。
注:IE3.0だと、FONTタグのところで、FACE="MS P明朝"とか、FACE="Arial, Helvetica"といった指定が可能ですが、これは、NN3.0の人には、意味がありません。
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="3"> <TR> <TD ROWSPAN="2" WIDTH="250" ALIGN="center" VALIGN="middle"> <FONT COLOR="#FF6080">展覧会情報</FONT> </TD> <TD WIDTH="30" ALIGN="center" VALIGN="middle" BGCOLOR="#FF6080"> <FONT COLOR="#FF6080">_</FONT> </TD> <TD COLSPAN="2"> 8月14日(水)〜8月18日(日)/梅田阪急百貨店<BR> 8月21日(水)〜8月26日(水)/新宿小田急百貨店 </TD> </TR> <TR> <TD WIDTH="30" ALIGN="center" VALIGN="middle" BGCOLOR="#60AA80"> <FONT COLOR="#60AA80">_</FONT> </TD> <TD><FONT FACE="MS P明朝" SIZE="+1" COLOR="#000000"> 「FUN! FUN! ピングー〜ようこそピングー工房へ〜」展</FONT> </TD> <TD><FONT SIZE="-1"> ペンギン好きで知らないものはいない、 あのPINGUの撮影用の人形の展示が行われます。 グッズの販売もあるようなので、ピングーや、 ピンガーのファンは、必見。<BR> なお現在、ファミレスのデニーズでは、 ピングーをイメージ・キャラクターに使用していて、 子ども用のメニューは、ピングー一家だらけ。 店内にもたくさんポスターが貼ってあります (くれないかなぁ)。</FONT> </TD> </TR> </TABLE>
実は、WIDTHとかHEIGHTといった、セルのサイズに関する部分の処理が、IE3.0とNN3.0では異なっているようです。物理的なサイズをがちっと決めたいと思うときには、そのセル内に、きっちりサイズを決めたイメージファイルを指定するといいようです。それを応用したのが、インデックスのページでも使っている「クリッカブル・マップもどき」です。これについては、またいずれ解説します(って、ソース見りゃわかる話なんですが)
ご質問、ご要望、ご指摘をよろしく。