第 4 回

このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性

誰よりも早く最新のHTMLを使ってみたいの問題だ。そこでこのコーナーでは、TIPSごとにブラウザーの対応状況をアイコンで表している（3月10日現在）。これを参考に、使用するWWWブラウザーを選んでほしい。

2月24日にネットスケープナビゲーター4.0 Pre 2が発表された。このバージョ
インターネットエクスプローラ3.0以上

ンで最も注目したいのは、「スタイルシート」への対応だ。これでナビゲーターユーザーも、このコーナーのTIPSを活用する機会がぐんと増えるはずだ。ますますネットスケープナビゲーター3.0以上可能性が広がるHTMLを120パーセント活用するために、今月も必ず役に立つ

3.0

TIPSとTRICKSを満載でお届けする。

ネットスケープナビゲーター4.0（Pre 2）以上
4.0

4月号「HTMLパズルに挑戦しよう」の解答
最近このコーナーでは、「解答が分からなくて夜も眠れない。特別にメールで答えを送ってくれ」という問い合わせが増えている。お待たせしました。今日からぐっすりと休んでほしい。それでは4月号 表を制する の解答を発表しよう。

A N S W E R

1 背景画像付き枠線の謎を解け！

「2行2列」という言葉に罠があった。この表は、実は「5行5列」になっている。つまり、木目の背景画像を使った小さなセルを枠線に見せていたのだ。答えは次のようになる。
<TABLE BORDER="0" CELLSPACING="0"><TR><TD BACKGROUND="back.gif" WIDTH="18" HEIGHT="18"></TD><TD BACKGROUND="back.gif"></TD><TD BACKGROUND="back.gif"></TD><TD BACKGROUND="back.gif"></TD><TD BACKGROUND="back.gif"></TD></TR><TR><TD BACKGROUND="back.gif"></TD><TD WIDTH=270 HEIGHT=100>HTML</TD><TD BACKGROUND="back.gif" WIDTH="18"></TD><TD WIDTH=270>PUZZLE</TD><TD BACKGROUND="back.gif" WIDTH="18"></TD></TR>

正 解 者 の方 々 ： toyomi okanoさん、 奥 寛 浩 さん、
TSUNEO NODAさん、他</TABLE>A N S W E R

2 横線はあり、縦線はなしの謎を解け！

このパズルのポイントは2つだ。まず、「RULES=ROWS」で表の中に横線だけが描かれるように指定する。次に<TABLE>タグの「BGCOLOR」と<TD>タグの2列目と4列目の「BGCOLOR」を同じ色に指定する。これで右図のような表ができるわけだ。答えは次のようになる。
<TABLE BORDER=5 CELLSPACING=0 CELLPADDING=5 RULES=ROWSWIDTH=80% HEIGHT=80% BGCOLOR=#FFFCC BORDERCOLOR=BLACK><TR><TD BGCOLOR="PERU" WIDTH="200">HTML</TD><TD BGCOLOR="#FFFCC" WIDTH="200">TIPS</TD><TD BGCOLOR="PERU" WIDTH="200">AND</TD><TD BGCOLOR="#FFFCC" WIDTH="200">TRICKS</TD></TR>

正解者の方々：茂手木孝昌さん、しらはたしんさん、Yuji Saita、他</TABLE>326 INTERNET magazine 1997/5

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

T IPS & T R ICKS

1
フレームの枠線を消す
3.0

4.0

フレームをうまく使えば、ページのデザインの可能性が大きく広がる。まずは左図を見てほしい。
ここでは枠線のないフレームを使って、2つのフレームを1枚のページのように見せている。文字をスクロールさせると、左の画像は固定されているためにページ全体が立体的に見えるのだ。ところが、エクスプローラではこの枠線が完全に消えていないではないか。実は、困ったことに2つのWWWブラウザーでは、枠線を消すためのHTMLが異なっているのだ。これではせっかくのアイデアも台無しだ。そこで、今月の第一弾として、この問題を完璧に解決できるうれしいTIPSを紹介しよう。
j http://home.netscape.com/comprod/products/navigator/
version_3.0/layout/examples/investment/d<FRAMESET COLS="18%,*" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0><FRAME SRC="window1.htm" NAME="menu" ><FRAME SRC="window2.htm" NAME="contents"></FRAMESET>

こんな風に使ってみよう
このTIPSのポイントは、フレームの枠線を消すためで、エクスプローラの枠線が消える。つまり、これらをのHTMLがそれぞれのWWWブラウザーでどう異なるかをすべて記述しておけば、どちらのWWWブラウザーでも理解することだ。それではHTMLの内容を見てみよう。

完全にフレームの枠線を消せるわけだ。ただし、この設定をする際に1つだけ注意してほしいことがある。エクス<FRAMESET COLS="18%,*" BORDER=0

プローラでは<BODY>

FRAMEBORDER=0 FRAMESPACING=0>

義できる。これに対して、ナビゲーターで<FRAME>タ

枠線のないフレームは、下図のようにページの縁取りとして使うこともできる。
「COLS="50,*,50"」のようにパーセントではなくピクセルでフレームのサイズを指定すれば、ウィンドウの大きさに関わらず縁取りのサイズを一定に保てるぞ。

</BODY>の間にフレームを定グを使う場合は、<BODY>タグは使わないという決まり
まず、「FRAMESET」でフレームを定義する。
「COLS=がある。実際に実験してみれば分かるが、ナビゲーター"18%,*"」は、フレームを縦に18対82の割合で分割するで<BODY>という意味だ。次に、フレームの枠線を消すための記述ウィンドウには何も表示されないという、とても悲惨なをする。

結果になる。そこで、このTIPSを使う場合は<BODY></BODY>の間にフレームの定義をすると、タグを使わずに、</HEAD>タグの直後にフレームの定義
BORDER=0をしよう。これで完璧だ。あとは上図のように、それぞれのフレームに背景画像を使ったりフレームごとに背景とすると、ナビゲーターの枠線が消える。

色を変えたりすれば、デザインの可能性が広がること間違いなしだ。

FRAMEBORDER=0 FRAMESPACING=0◆◆◆

図を参考にしてこんなページを作ってみよう

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/5327

T IPS & T R ICKS

2JavaScriptスタイルシートを使う
4.0
ナビゲーター4.0 Pre2が待望のカスケーディングスタイルシート（W3C承認）に対応した。エクス
プローラとの互換性を調べてみたが、若干の違いはあるものの、ほとんどのタグは問題なく使えるようだ。これだけならナビゲーターがやっとエクスプローラに追いついたという感じだが、ネットスケープ社は転んでもただでは起きないとばかりに、まったく新しいタイプのスタイルシートを発表してきた。その名も「JavaScriptスタイルシート」だ。左図のデモペー
ジには、これら2種類のスタイルシートが使われている。それでは、今月の目玉、この最新のHTMLの正体を紹介しよう。

j http://home.netscape.com/comprod/products/communicator/ss_demo/internet/current/d<STYLE TYPE="text/javascript">tags.BODY.backgroundColor="darkorange";tags.H1.fontSize=60;
tags.H1.color="peachpuff";
tags.H1.textAlign="center";tags.H1.fontFamily="Bookman Old Style";</STYLE><HEAD></HEAD> の間にこれを記述する。まずは、最初の1行を見てみよう。に、文字の配置は中央揃えに、フォントの種類<H1>HTML TIPS & TRICKS</H1>

がBookman Old Styleにそれぞれ設定される。

<H2>HTML TIPS & TRICKS</H2><H3>J</H3>

これを応用すれば、「立体文字」や「絵文字」の作成も簡単にできる。</STYLE>の前に、以下<STYLE TYPE="text/javascript">

これで完成だ。WWWブラウザーで見てみよう。

◆のタグを追加してみよう。

◆◆

ここでこのスタイル定義がJavaScriptスタイルシートであることをWWWブラウザーに伝えていtags.H2.fontSize=60;

る。次に内容だが、始めに「tags.」を記述し、tags.H2.color="white"

このあとに「このタグを使った場合に、この部分tags.H3.textAlign="center";が、こうなる」という順で定義する。

tags.H2.marginTop=-79;
tags.H2.fontFamily="Bookman Old Style";

tags.BODY.backgroundColor="darkorange";tags.H3.fontFamily="Wingdings";
tags.H3.fontSize=150;

上記のタグは、「BODY」を使った場合、「backtags.H3.textAlign="center";groundColor」（背景色）がdarkorangeになる

tags.H3.color="gold";という意味だ。同様に「H1」を使った場合は、フォントサイズが60ピクセルに、色がpeachpuff

328 INTERNET magazine 1997/5<BODY>タグのあとに次のように本文を記述する。

これでナビゲーターでもスタイルシート自由自在だ

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

T IPS & T R ICKS

3
外枠のない表を作る
今月のパズルの解答をはじめとして、このコーナーではエクスプ
ローラの表拡張タグをいろいろと紹介してきた。これらのTIPS を使えば、色、罫線、背景画像など、バリエーション豊富な表を作成できるはずだ。そして今月も、さらに便利な表作成のためのTIPSを
紹 介 する。左 図 は、
「まるばつ」と呼ばれるゲームを描いたものだ。
実際にこのゲームを行う場合は、縦に2 本と横に2 本の線をそれぞれ書く。画像を使わずにHTMLでこれを再現するためには、「外枠のない表 」を使 うしかないのだ。
もうお分かりだろう。奥の深い表
拡張タグのさらに奥を行く、最高にCOOLなTIPSを紹介しよう。

d<TABLE BORDER CELLSPACING=10 FRAME=VOID ></TABLE>

まずは上記のタグを見てみよう。

FRAME=ABOVEFRAME=BELOW

FRAME=HSIDES

FRAME=VSIDES

FRAME=LHS

FRAME=RHS<TABLE BORDER CELLSPACING=10>
ここまでは通常の表の定義だ。「外枠のない表」を作るためには、
FRAME=VOIDを加えるだけでよい。この「FRAME」は、表の外枠を操作するためのタグで、値が「VOID」なら上図のように外枠が消える。「VOID」以外にも6種類の値があり、それぞれ見栄えの異なった表が作れる。これまで、表は四角の線に囲まれたものだと思っていた人は、ぜひこのTIPSを試してみてほしい。これだけのバリエーシ
ョンがあれば、どんな用途にも対応できる洗練された表が作成できるはずだ。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&DINTERNET magazine 1997/5329

T IPS & T R ICKS

4
セルの一部に背景画像を使う
左図は、誰でも知っているボウリングのスコア表だ。この表の特徴は、1フレームの中に1投目と2投目のスコアとこれらの合計を記入する欄があり、2投目は四角の枠線で囲まれているということだ。
「スペア」や「ストライク」の記号は、当然画像を使うことになる。
これらをうまく配置すればいい。
それでは4 フレーム目を見てほしい。なんと、「STRIKE」という文字が記号の上に重なっているではないか。実は、この記号はセルの「背景画像」なのだ。でも、背景画像をセルの右上隅だけに指定できるのだろうか。今月最後のこのTIPSを使えば、ボウリングのスコア表も思いのままだ。

d<TABLE><TR><TD STYLE="background: URL (strike.gif) no-repeat right top">
STRIKE!!<BR>Lucky!!!
</TD></TR></TABLE>

通常の背景画像はタイル状に並ぶが、カスケーディングスタイルシートにはこれを自由にカス

no-repeat left top

no-repeat left middle

no-repeat left bottom

no-repeat cneter top

no-repeat center middle

no-repeat center bottom

タマイズできる機能がある。上図の例では、まず、背景画像を「タイル状にしない」ことを指定し、次に「セルの右上隅に表示する」ように定義している。それでは実際にタグを見てみよう。
STYLE="background: URL（strike.gif）
no-repeat right top"「background: URL（strike.gif）」の部分で、strike.gifをセルの背景画像に指定している。ポイントは「no-repeat」と「right top」の部分だ。前者で「タイル状にしない」ことを、後者で「右上隅に配置」することをそれぞれ指定している。さて、ここまで分かったところで、背景画像の表示を指定できるいくつかのオプションをまとめて紹介しよう。

330 INTERNET magazine 1997/5

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

HTMLパズルに挑戦しよう
隠されたトリックを解き明かせ！

今月のテーマ

フレームを制する「フレーム」を使う際には、機能面に加えて、枠線や背景色などをカスタマイズするといった、デザイン面にも気を使いたいものだ。そこで今月のこのコーナーでは、隠し技の1つである、フレームの「枠線に色をつける」というテーマに挑戦していただく。うれしいことに、先月号のパズルには多くの初挑戦者が解答を送ってくれた。「いつかは私も」と、挑戦のチャンスをうかがっているあなた、今月ははっきり言って簡単だぞ。トリックが分かったらすぐに解答を送ってきてほしい。正解者にはダイレクトプラスを発行させていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマフレームを制する

Q U E S T I O Nにチャレンジ！

「HTMLパズルに挑戦しよう」
宛 先D
正解が分かった人も、分からなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！
mip-cdrom@impress.co.jp

1 ナビゲーターの枠線に色を付けろ！

3.0

4.0

左図では3つのフレームにそれぞれ別の背景色を指定して、カラフルな効果を出してみた。ここでのポイントは、もし何も指定しなければ、この枠線の部分が「グレー」になってしまうということだ。これではせっかくのデザインも台無しだ。そこで、まずはナビゲーターを使ってこの「枠線に色を指定する」というHTMLに挑戦していただく。解答の参考として、ここで使った4つの色名をあげておこう。royalblue、lightcoral、lightseagreen、lemonchiffon。どれがどの色にあたるかは、実際にこれらを指定して調べよう。この1問目は本当に簡単だ。初挑戦のチャンスを狙っていた人は、ぜひこの機会に解答を送ってきてほしい。
ヒン
トQ U E S T I O N

ナビゲーターには、枠線に色を付けるためのHTMLがある。これさえ分かれば……

2 エクスプローラの枠線に色を付けろ！
1問目で「物足りない」と不満の声をあげたTIPS＆TRICKERSには、ぜひこのパズルに挑戦してほしい。QUESTION 1は、この2問目を出題するための布石にすぎないということが分かるはずだ。エクスプローラにはフレームの枠線に色を付けるHTMLは存在しない。いや、左図ではこれができているので、正確には「色を付けるための専用のHTML」は存在しないと言うべきだろう。そしてもう1つのポイントは2つの図の枠線の太さがほとんど同じであることだ。つまり、1問目が解けたら、同じことをエクスプローラで再現することにチャレンジしてほしいのだ。今月も多くの挑戦があることを期待している。健闘を祈る！
ヒント

今月のこのコーナーのどこかにあるヒントが隠されている。これが見つかれば……

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/5331

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.