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

誰よりも早く最新のHTMLを使ってみたいの問題だ。そこでこのコーナーでは、TIPS

古澤祐治 白畑真

ごとにブラウザーの対応状況をアイコンで表している（5月10日現在）。これを参考に、使用するWWWブラウザーを選んでほしい。

待望のインターネットエクスプローラ4.0がついに姿を現した。このコーナーの読者にとって最も気になるのが、新しく実装されたHTMLだろう。そして、期

3.0

待どおり「ダイナミックHTML」という強力なタグが登場した。ホームページ
4.0にインタラクティブな仕掛けを作れるこの最新のHTMLはもちろん、今月も必ず役に立つTIPSとTRICKSを満載でお届けする。

3.0

4.0

インターネットエクスプローラ3.0以上
インターネットエクスプローラ4.0以上
ネットスケープナビゲーター3.0以上
ネットスケープナビゲーター4.0（PR 4）以上

6月号「HTMLパズルに挑戦しよう」の解答
一見、簡単そうに見えた先月号のパズルは、実は誰もが見落としがちなブラックホールだったようだ。チャレンジャーの皆さんにいつもの切れがなかったような気がする。HTMLの奥の深さを改めて感じた。それでは6月号
フレームを制する の解答を発表しよう。

A N S W E R

1 マウスを載せたらON AIR！

ActiveXコントロールを使わずにAVIビデオをインラインで表示させる方法はいくつかあるが、このパズルの条件にあるような動作を指定するためには、<IMG DYNSRC="">を使う必要がある。正解は、<IMG DYNSRC="Puzzle.avi" start=mouseover>となる。ポイントは「start=mouseover」の部分だ。これで「マウスを載せたら動画が再生する」という指定ができるわけだ。

A N S W E R

ANSWER 1 正解者の方々：佐藤義和さん、佐野善和さん、Kunio Yamamotoさん

2 5回だけループさせろ！

インライン表示の方法はANSWER 1とまったく同じだ。今度は繰り返して再生するためのオプションが必要になる。正解は、<IMG DYNSRC="Puzzle.avi" loop=5>
ANSWER 2 正解者の方々：佐藤義和さん、佐野善和さん、Kunio Yamamotoさんとなる。ヒントにあった「loop」がそのまま解答だった。そして、loopの値が繰り返しの回数になるのだ。

A N S W E R

3 5秒おきに3回再生させろ！

ビデオの表示のさせ方も、繰り返し再生の指定もできた。次は、ループの間隔を指定する。正解は、<IMG DYNSRC="Puzzle.avi" loop=5 loopdelay=5000>となる。ループの間隔は「loopdelay」で指定する。そして、ヒントにあったように時間はミリセコンド単位で指定するから「5000」となる。これで完璧だ。

284 INTERNET magazine 1997/7

ANSWER 3 正解者の方々：佐藤義和さん、佐野善和さん、Kunio Yamamotoさん

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

T IPS & T R ICKS

1
サブジェクトを自動入力する
3.0

4.0

3.0

4.0

ホームページを作成したら、これを見た人の反応が気になる。そこで、自分のメールアドレスにリンクを張って、ユーザーがクリックすると電子メールソフトが起動して簡単にメールを送信できるような仕掛けを作るはずだ。ただし、このようにして送られてきたメールの用件の部分は、空白かユーザーごとに異なったものになっているはずだ。これではフィルターを使って感想のメールを振り分けるといったことができない。もし、用件に何を入れるかを設定できれば、メールの管理は画期的に楽になるはずだ。それでは、今月の第一弾、ウェブマスター必見の「サブジェクト自動入力設定法」を紹介しよう。

j http://www.northlink.com/~hauxe/d<A HREF="mailto:ip-cdrom@impress.co.jp ?subject=HTML TIPS & TRICKS">
ip-cdrom@impress.co.jp</A>

この機能が使えないソフトもある
このコーナーを毎月読んでくれている読者の?subject=HTML TIPS & TRICKS"

方々なら、おそらくJavaScriptか何かを使うのだろうと予想したはずだ。ところが、こんな簡単の部分にある。
「?subject=」に続けて用件の欄なHTMLだけで用件が自動的に入力されるのだ。に入力したい文字を書いておく。これで、ユーザそれでは内容を見てみよう。

ーが文字列をクリックしてメールソフトが起動した際に、用件の欄には「?subject=」のあとの文<A HREF="mailto:ip-cdrom@impress.co.jp

字が自動的に入力されるのだ。もちろん、この用件の部分に日本語を指定しても構わない。ただ<A>タグは説明するまでもなく、文字や画像にリし、自分の使っているメールソフトが用件を日本ンクを設 定 するためのH T M L だ。 このあとに語で表示できるかどうかは確認しておこう。世界「mailto:」に続けてメールアドレスを記入する。

中の人々が見る可能性のあるウェブページなら、これで、<A></A>で囲まれた文字をクリック

英語で書いておくほうが無難だろう。あとは、メすると通常使っているメールソフトが起動して、ールソフトのフィルターや振り分けなどの設定を新規メール作成ウィンドウが現れる。ユーザーはすればできあがりだ。今すぐに、自分のホームー本文を書いて、送信ボタンを押すだけで簡単にメページの「mailto:」に「?subject」の1行を追ールの送信ができるわけだ。ポイントは次の加しよう。あとは、たくさんのメールが届くようナビゲータとメッセンジャー（ネットスケープメール）の組み合わせや、エクスプローラとインターネットメールの組み合わせなら問題なく使えるが、残念ながら、一部のメールソフ
トに用件の自動入力に対応していないものがある。用件の欄が空白のメールが送られてくる可能性もあるが、驚かないでほしい。メールのリンクをクリックした場合、特別な設定をしていない限りWWWブラウザーに付属のメールソフトが起動する。上記の組み合わせが、WWWブラウザーのシェアの90パーセントを超えることを考えれば、ほぼ問題なく使えるはずだ。に、ページを演出するだけだ。

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

INTERNET magazine 1997/7285

T IPS & T R ICKS2
ダイナミックHTMLを使う
4.0
エクスプローラ4 . 0 の登 場 で、HTMLの世界はまた新たな世代に突入した。まずは、左の図を見てほしい。「S p o t l i g h t ! 」、「N e w
Items」などの項目があり、リンクが設 定 されているように見 える。通常ならこれをクリックすると、内容にあたるページにジャンプするはずだ。ところが、このページでは図のように、同じページ内に新たな文書が現れるのだ。さらに、マウスカーソルを載せた瞬間に、文字の色と背景色が変化する。これがダイナミックHTMLの正体だ。HTMLだけで、ページを切り替えることなくその内容を動的に変化させる。それでは、今月の目玉、ダイナミックHTMLを紹介しよう。

j http://www.microsoft.com/ie/ie40/browser/arcadia/

d<SPAN onmouseover ='this.style.backgroundColor="#FFFFC6"'
onmouseout ='this.style.backgroundColor="white"'>
文字列</SPAN>

これまで、ページに動的な仕掛けを作るには景の色」を表す。このあとの値は色を表すRGB

JavaアプレットやActiveXコントロールを使う必値だから、「<SPAN>タグで囲まれた文字列にマ要があった。これをHTMLだけで実現しようとい

ウスカーソルを載せたら背景の色がFFFFC6に変うのが、ダイナミックHTMLだ。これは、基本的わる」という仕掛けを定義したことになるわけだ。にカスケーディングスタイルシートを拡張した仕次は、こんなこともできる「this.styel.」のあとのオプションを変えることで、さらに多くの動的な仕掛けができる。
感動すること間違いなしだ。

this.style.color=様と考えてよい。それでは内容を見てみよう。
onmouseout=<SPAN onmouseover="色名"：文字の色'this.style.backgroundColor="white"'>this.style.fontSize=の部分だが、「onmouseout」は「マウスカーソ

this.style.fontFamily="ピクセル"：文字の大きさ'this.style.backgroundColor="#FFFFC6"'
最初の<SPAN>タグは、文章の一部分だけにスルを文字列から離したら」を意味する。ほかのタイルを定義する際に使うが、ここでもまったく部分は前の行とまったく同じだ。この文字列に"フォント名"：フォントの種類

this.style.letterSpacing=同じ役割を果たしている。
「onmouseover」はマウスカーソルを載せると背景色がFFFFC6に変「マウスカーソルを載せたら」という意味だ。次化し、カーソルを離すとwhiteになる。エクスプ"ピクセル"：文字の間隔の「this.style」はセットで覚えよう。
「〜のスタローラ4.0をセットアップしたら、すぐにこのTIPS

this.style.textTransform=イル定義を」という意味だ。そして、「〜」の部を試してみよう。

"uppercase"または"lowercase"：大文字か小文字分にあたるのが「backgroundColor」で、「背286 INTERNET magazine 1997/7

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

T IPS & T R ICKS

3
複数のフレームの内容を一度に切り替える
3.0

4.0

3.0

4.0

デザイン面でも機能面でも、やっぱりフレームは活用したい。でも、フレームには1つの欠点がある。あるリンクをクリックした際に、1つのウィンドウの内容だけしか切り替えられないのだ。それ
では、左の図を見て欲しい。フランス人の作ったクイズページだ。
ここにはちょっとしたいたずらが仕掛けられていて、左上のリンクをクリックすると「NOT FOUND」の表示とともに左のフレームのメニューがすべて消える。つまり、ここでは一度のクリックですべてのウィンドウの内容を切り替えているのだ。なんと、今月の第2弾、この便利なTIPSさえあればこれができてしまうのだ。

j http://www.sdv.fr/arte/quizd/

1d<SCRIPT LANGUAGE="JavaScript">

2<A HREF="JavaScript: WindowChange() ">function WindowChange(){parent.frames[1].location.href="link1.html";
parent.frames[2].location.href="link2.html";
}

文字列
</A>

</SCRIPT>

ィンドウになる。このページに上記のタグを記入おり、[ ]の中の数字はフレームを定義した順にふで、さらに強力な機能を持つようになる。複数する。まず、上のタグ1を<HEAD>えていく。数字は[0]から始まるので、[1]は2番のウィンドウの内容を切り替えるこのTIPSも、簡の間に記述する。内容を見てみよう。

フレームはJavaScript と組み合わせること</HEAD>目に定義された「frame2.html」を表示するフレームにあたる。次 に「l o c a t i o n . h r e f = 」で単なJavaScriptでできてしまうのだ。内容を見ていく前に、メインとなるフレームを作成しておfunction WindowChange()WindowChange()が呼び出された際に、このフこう。

{

レームに表示するファイルのURL を定義していparent.frames[1].location.href="link1.html";
parent.frames[2].location.href="link2.html";

る。ここでは「link1.html」が指定されている。

}

ためのリンクになる。ポイントは「JavaScript:<FRAMESET COLS="25%,75%"><FRAME SRC="frame1.html">

次に上のタグ2だが、これがページを切り替える
WindowChange()」の部分だ。ここで、1で定<FRAMESET ROWS="18%,82%"><FRAME SRC="frame2.html">「function」というキーワードを使って「Window

義したWindowChange()が呼び出される。つま<FRAME SRC="frame3.html">

Change()」というふるまいを定義している。こり、このリンクをクリックすると、2番目に定義</FRAMESET></FRAMESET>

れはHTMLの中でいつでも呼び出して使えるもの

したフレームの内容が、「f r a m e 2 . h t m l 」からで、名 前 も自 由 に付 けてよい。このW i n d o w「link1.html」に、「frame3.html」から「link2.

Change()が呼び出されると何が起こるかが{ }にhtml」にそれぞれ切り替わる。これで完璧だ。

これで、3つのフレームに分割されたページがで書かれている。
「parent.frames[ ]」は、<FRAME>きるはずだ。
「frame1.html」がメニュー用のウタグで定義されたそれぞれのフレームに対応してインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D◆◆◆

INTERNET magazine 1997/7287

T IPS & T R ICKS

4
文字にグラデーションをかける
3.0

4.0

3.0

4.0

ホームページを作成していて最初に気になるのが「バナー」と呼ばれるタイトルの部分だろう。このコーナーでもスタイルシートを使った立体文字などを紹介してきたが、ほかによく見かけるものとして、徐々に色を変える効果「グラデーション」を使ったものがある。その多くは、グラフィックソフトで作成した画像を使用している。ただし、この手のバナーは色数を多く使うために、ファイルサイズの大きな「重い画像」になりがちだ。トップページの表示が遅くなるのはなるべく避けたい。画像をまったく使わずに、きれいなグラデーションを表現する。これが、今月のTIPS第3弾だ。

d<FONT COLOR=" #E6E6E6 ">p</FONT><FONT COLOR="#DBDBDB">r</FONT>:<FONT COLOR="#ADADAD">n</FONT><FONT COLOR="#A2A2A2">t</FONT>

グラデーションの秘密はごく普通の<FONT>の色を表現する。RGBという名前もここからきまで変化させているが、このようにRGBの3つのタグだ。使用する文字を1つ1つ<FONT>タグでているのだ。さて、問題は16進数だ。10進数は値をそろえておいて、さらに3つを同じように増くくって、COLORオプションでそれぞれの色を0から9までの数字を使うが、16進数はこれにA減させると、上図のようなモノトーンのグラデー

徐 々 に変 えていけばよい。 < F O N T > タグやからFまでの文字が加わる。つまり、9の次は10ションができあがる。また、3 つの値のうち、1<BODY> タグで背景や文字の色を指定する場

ではなくて「A」、そして、「F」の次が「10」とつだけを増減させてもきれいな効果が出る。もし、合、2とおりの方法がある。1つは3月号のこのコなる。10進数の「17」が16進数の「10」だと16進数で値を調節するのが難しければ、いったーナーで紹介した「色名」を使うやり方、もう1考えると分かりやすい。RGBのそれぞれの値はん0から255の10進数で増減を決めておいて、後つはRGB値を「16進数」で指定するやり方だ。

16進数の2桁で表されるので、「00」から「FF」から16進数に変換してもよい。最後におまけを1

ここでは後者の16進数を使う。それでは内容を（10進数で表すと0から255）までの間ということつ。ナビゲーター4.0で新しく登場した「POINT

見てみよう。になる。たとえば、「#FFFFFF」はすべての色要-SIZE=""」を使って、素が最大値になっていて、「White」を表す。反
<FONT COLOR="#E6E6E6">

対に「#000000」は最小値で「Black」を表す。

<FONT COLOR="#6B6B6B"

さて、ここまで分かったら、文字にグラデーショ

POINT-SIZE="32">G</FONT>「#」に続く6桁の16進数が色を表している。上2ンを付けるのは簡単だ。R・G・Bそれぞれの値を桁が赤系統の値（Red）を、中2桁が緑系統の値

徐 々 に変 化 させて、 1 文 字 1 文 字 を< F O N Tとすれば文 字 の大 きさも徐 々 に変 えられる。

（Green）を、下2桁が青系統の値（Blue）をそCOLOR="">「SIZE=」と違って、ポイント単位でフォントサれぞれ表し、これら3つの色が混ざり合って1つ

上記のタグでは「#E6E6E6」から「#A2A2A2」

288 INTERNET magazine 1997/7</FONT>でくくればいいのだ。

イズを自由に指定できるのだ。

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

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

今月のテーマ

背景色を制する
ページの背景をどうするか、画像を使うのか色を指定するのか。これは、ページ作成者にとって大きなテーマの1つだ。でも、ありきたりの演出では満足できないという人も多いはずだ。
それなら、通常は静的なページの背景をもっと動的に仕上げてみてはどうだ
ろう。そこで、今月のこのコーナーではJavaScriptを使ってダイナミックな背景色を使うというパズルに挑戦していただく。久しぶりに手応えのある問題を2問用意してみた。JavaScriptならおまかせというあなた、トリックが分かったらすぐに解答を送ってきてほしい。正解者にはダイレクトプラスを発行させていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ 背景色を制する にチャレンジ！

Q U E S T I O N

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

3.0

4.0

3.0

4.0

オンデマンドで背景色を変えろ！
背景の色というのは基本的に作者が決めるものだ。作者が白で作成すれば、ページを見る側は「白なんだな」とあきらめるしかない。なにを当たり前のことを言っているんだと言われそうだが、それでは左の2つの図を見てほしい。なんと、この2つのページはまったく同じHTML、1つのファイルを表示させたものなのだ。このページでは、ユーザーが自分の好きな背景色を選べる。さらに、背景色と同じ色の文字列が書かれているので、色を変えるたびに別の文字が現れるといった仕掛け付きだ。まさに、オンデマンドな背景色なのだ。JavaScriptならおまかせという人もそうでない人も、がんばってこの謎を解き明かしてほしい。
ヒン
トJavaScriptには背景色を表すプロパティがある。
これさえ使えば……

4.0
3.0

Q U E S T I O N

23.0

4.0

バックグラウンドをフェードインさせろ！
2問目は、毎日のように新しいウェブページを探索しているという人なら一度は見たことがあるはずの、背景の「フェードイン」効果に挑戦していただく。アクセスした瞬間は真っ黒だったページがだんだん明るくなって、最後には真っ白な背景とともに文字が現れるといった演出だ。
「これがやりたかったんだ」と思っていた人も多いはずだ。もちろん来月号の解答を見れば、誰にでもフェードインができるようになる。でも、1か月待つのはつらいぞ。このチャンスにパズルに挑戦して、あこがれのフェードインをものにしてみてはどうだろうか。答えは1つじゃない。みなさんのオリジナルスクリプトを楽しみにしている。
ヒント

16進数を思い出して、この値をだんだん大きくしていけば……

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

INTERNET magazine 1997/7289

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この 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.