このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性の誰よりも早く最新のHTMLを使ってみたい問題だ。そこでこのコーナーでは、TIPSご

藤井幸孝 白畑 真とにブラウザーの対応状況をアイコンで表している（4月10日現在）。これを参考に使用するWWWブラウザーを選んでほしい。

ここ何回か、インターネットエクスプローラとネットスケープナビゲーター、両最新ブラウザー4.0の機能を使ったTIPSをお届けしてきた。ActiveXやダイナミックHTML、3.0

スタイルシートやレイヤーを利用したアニメショーンや特殊効果を紹介してきたわけ
4.0

だ。今月はそうした最新機能のほかに、バージョン3でも使えるTIPSや、スクリプトを使ってブラウザーとバージョンの違いを解決するTIPS & TRICKSをお届けする。

3.0

4.0

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

5月号「HTMLパズルに挑戦しよう」の解答
残念ながら、今回の正解者はたった1人だった。レイヤーの機能がまだまだ知られていないのだろうか。それとも「反転表示」という言葉にとまどったのだろうか。実は色を反転させるような命令を出しているのではなく、表示領域を変更しているだけなのだ。それでは解答を発表しよう。

A N S W E R

1 文章をダイナミックに反転表示させろ!

レイヤーを2つ作り、背景色と文字色を互いに逆にする。<LAYER>タグの中でclip属性を指定し、背景レイヤーは「clip="0,0,400,100"」、前面のレイヤーは「clip="0,0,0,100"」とする。スクリプトでは、前面のレイヤーのclip.widthを徐々に大きくする。
<BODY onLoad="setTimeout('slider()', 100)"><LAYER id="base" clip="0,0,400,100" bgcolor="silver"><FONT color="navy">iNTERNET MAGAZINE<BR>HTML TIPS & TRICKS</FONT></LAYER><LAYER id="slide" clip="0,0,0,100" bgcolor="navy"><FONT color="silver">iNTERNET MAGAZINE<BR>HTML TIPS & TRICKS</FONT></LAYER><SCRIPT language="JavaScript">function slider() {document.layers["slide"].clip.width += 2
if(document.layers["slide"].clip.width < 400)
setTimeout("slider()", 10)}</SCRIPT>A N S W E R

正解者：岩崎 典生さん

2 反転表示部分をウィンドウの右下に表示させろ!

ブラウザーの表示領域の高さと幅は、それぞれ「innerHeight」、「innerWidth」でわかる。ブラウザーの表示領域からレイヤーの幅、高さを引いて、レイヤーの位置にすれば、右下に配置できる．
document.layers["base"].top = innerHeight - 100
document.layers["slide"].top = innerHeight - 100
document.layers["base"].left = innerWidth - 400
document.layers["slide"].left = innerWidth - 400

276 INTERNET magazine 1998/6

正解者：岩崎 典生さん

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

T IPS & T R ICKS

1
プルダウンメニューでクイックナビゲーション
3.0

4.0

3.0

4.0

久しぶりに少しシンプルなTIPSを紹介しよう。プルダウンメニューを使って多数のリンクを小さくまとめるテクニックだ。窓の杜やNetscape社のサイトでジャンル選択や言語選択に使われているので、もうおなじみだと思う。マウスを押したときだけメニューが現われて、選択すると別のページにジャンプするというものだ。<A>
タグでリンクを並べる書き方に比べて、プルダウンメニューが占める部分は小さくてすむので、すっきりとしたデザインのページを構成することができる。フォームを利用しているが、CGIではなく短いJavaScriptだけで実現できるので、ぜひ挑戦してみてもらいたい。

d<FORM><SELECT onChange="location=this.options[this.selectedIndex].value"><OPTION SELECTED>TIPS&TRICKS International<OPTION VALUE="/au/index.html">Australia<OPTION VALUE="/pt/index.html">Brazil:</SELECT></FORM>

プルダウンメニューを使ったページ選択の方選択されたときに表示するページのURL だ（絶も同じだ。

法は2つある。1つはメニューを選んだ後にボタン対 U R L でも相 対 U R L でもどちらでもよい）。

「this.options[this.selectedIndex].value」が選を押して次のページへ移るもの。2つめは最近よ<OPTION> タグは好きなだけ増やしてかまわな

択されたアイテムのURLになる。
「this.options」

く見かける、メニューを選択するだけで次のペーい。

は<SELECT>タグ内の<OPTION>タグの配列をジが表示されるもの。今回は2つめの方法を紹介

さて、メニューアイテムが選択されたら、新しい表す。
「this.selectedIndex」で選択されたアイする。

ページを表示させるようにしたい。<SELECT>

テム（<OPTION>タグ）の番号が得られるので、上の例はNetscape社のトップページをもとにしタグの中にonChangeを付けて、JavaScript のあとは「v a l u e 」からV A L U E 属 性 で指 定 したて、シンプルに書き換えたものだ。機能的に変わ命令を書くことにする。こうしておくと、メニューURLが取り出せる。

りはない。のアイテムが選択された瞬間に、このJavaScript以上で、表示するページを、この<SELECT>タ

まずFORM を1つ作成し、<FORM>〜</FORM>が実行されるのだ。

グの、選択された<OPTION>タグのVALUEで指の中に<SELECT>タグを作る。次に、このプルダJavaScriptは1文。

定したURLに変更せよ、という意味になる。さあ、試してみよう。

ウンメニューで表示するアイテムを、<SELECT>〜</SELECT>の中に「<OPTION>表示されるlocation=this.options

アイテム」という形で追加していく。<OPTION[this.selectedIndex].value

SELECTED>は最初から選択される項目だ。2つめ以降の<SELECT>タグの中には、VALUE属性「location」には、ブラウザーに読み込ませるペを付けておく。VALUE属性の値は、アイテムがージのURLを指定する。
「location.href」としてインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/6277

T IPS & T R ICKS

2
WWWブラウザーを自動判別する
3.0

4.0

3.0

4.0このコーナーでは、最新のWWWブラウザーで利用できるTIPSを紹介しているが、古いWWWブラウザーを利用しているユーザーのことを考えて、使ってみたいけれども使えないという読者も多いだろう。
このTIPSを使えば、ユーザーが使っているブラウザーを自動判別して、その種類やバージョンごとに異なったページにジャンプさせることができる。ジャンプ先のページには、それぞれのブラウザーやバージョンに対応した内容を作っておけばいいだろう。これで安心してダイナミックHTMLなど、新しいブラウザーでしか利用できないテクニックも思う存分使えるようになるぞ。

d<SCRIPT LANGUAGE="JavaScript"><!-sver = navigator.appVersion.charAt(0)if (navigator.appName == "Netscape") {if (sver == 2) location.href = "n2.html"
if (sver == 3) location.href = "n3.html"
if (sver >= 4) location.href = "n4.html"}
else if (navigator.appName == "Microsoft Internet Explorer") {if (sver <= 3) location.href = "e3.html"
if (sver >= 4) location.href = "e4.html"}
else
location.href = "others.html"//--></SCRIPT>

ブラウザーの名前を調べるにはJavaScriptのブラウザーがネットスケープナビゲーターだった

この部分では、インターネットエクスプローラとネ「navigator.appName」を使い、ブラウザーのら、「location.href」を使ってそれぞれのバージョットスケープナビゲーター以外でJavaScriptに対バージョンを調 べるには「 n a v i g a t o r . a p pンに対応したページへジャンプするようにする。

応しているブラウザー用のページを指定する。

Version」を使う。
else if (navigator.appName ==sver = navigator.appVersion.charAt (0);まず、「navigator.appVersion」の最初の1文字を変数「sver」に入れておく。sverは、「2」、「3」、最後に、<NOSCRIPT>タグも覚えておこう。こ"Microsoft Internet Explorer") {のタグの内容は、<SCRIPT>タグに対応していな

if (sver <= 3) location.href = "e3.html"

いブラウザーだけに表示される。古いバージョンif (sver >= 4) location.href = "e4.html"のネットスケープナビゲーターやインターネットエクスプローラ、またはLynxのようなブラウザーで}アクセスしてきたユーザーがいても安心だ。以下「4」などとなる。
インターネットエクスプローラの場合は注意が必のような一文を添えておくと、より親切なページ

if (navigator.appName == "Netscape") {要だ。
「navigator.appVersion」の最初 の文字になるだろう。

if (sver == 2) location.href = "n2.html"

は、バージョンが3の場合には「2」（Macintosh版if (sver == 3) location.href = "n3.html"

は「3」）、バージョンが4の場合には「4」となる。

if (sver >= 4) location.href = "n4.html"}

else<NOSCRIPT>JavaScript未対応のブラウザーをお使いの方は<A HREF="simple.html">
こちらのページ</A>へ</NOSCRIPT>

location.href = "others.html"

278 INTERNET magazine 1998/6

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

T IPS & T R ICKS3
タイトルバーをアニメーション表示させる4.0
このコーナーでは、ステータスバーのTIPSを何度か紹介してきた。
文字が流れるアニメーション効果から、文字にマウスを乗せたときにコメントを表示させるTIPSまで、ステータスバーの使い道は広かった。では、あの効果がタイトルバーでもできると言ったらどうだろうか？ IE4.0では驚くべきことに、タイトルバーの文字を自由に操れるようになっている。ブラウザーを最小化したときのタスクバーのボタンの 文 字 まで 動 かせるぞ。
Java Scriptを利用するが、 難し
い知 識 は必 要 ない。 今 までのTIPS& TRICKSを理解している読者ならできるはずだ。ぜひ試してみてほしい。

d<SCRIPT LANGUAGE="JavaScript"><!-msg = "Hello! We love TIPS & TRICKS
msg += msg

by iNTERNET MAGAZINE"

function titleanim() {msg = msg.substring(2, msg.length) + msg.substring(0, 2)
document.title = msg}
setInterval("titleanim()", 150)//--></SCRIPT>

サンプルスクリプトを見てもらえばわかるが、title = msg」とすることになる。「document.

「if (isIE4)」で「setInterval」を呼び出すかどう

かつて流行したステータスバーアニメーションのtitle」は、HTMLファイルの<TITLE>タグの内容かを決めるのだ。

スクリプトとほとんど同じだ。

を表わす。これをダイナミックに変更することで、まず、メッセージを作成し、重ね合わせて長い文タイトルバーの文字がアニメーションしているよう字列を作成する。JavaScriptはよくわからないに見せかけているのだ。

"Microsoft Internet Explorer" &&という読者は、最初の「msg = "〜"」の「〜」あとは「setInterval ("titleanim ()", 150)」としnavigator.appVersion.charAt (0) >= 4)部分を好きな文字に書き換えて、<SCRIPT>〜て、150ミリ秒ごとに関数「titleanim」を呼び</SCRIPT>を自分のHTMLファイルに書き込む出すようにしておけば、タイトルバーアニメーショだけでよい。

ンの完成だ。これだけで、タイトルバーの文字が次に、一定の間隔で実行される関数「titleanim」流れていくようになる。意外と簡単なので驚いたを作成する。
「titleanim」内でメッセージの文字のではないだろうか？

ーションするようになるぞ。メッセージの文字や、列を操作して、アニメーションしているかのようところで、今回のサンプルはIE4.0 限定なので、「150」という間隔をいろいろ変えて試してみよう。に見せる。おなじみの方法だ。

ブラウザーをチェックする必要があるだろう。さステータスバーの場合と違うのは、このメッセージもないとページを開いたとたんにエラーが発生すを表示する場所だ。ステータスバーに表示させるる。ここでは、前ページのJavaScriptを短くしときには、「window.status = msg」としていた。

たようなチェックスクリプトを紹介しておく。変タイトルバーに表示する場合には、「document.

数isIE4に「IE4.0かどうか」の値を入れておき、isIE4 = (navigator.appName ==if (isIE4) setInterval ("titleanim ()", 150)
これで、IE4.0のときだけ、タイトルバーがアニメ

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

INTERNET magazine 1998/6279

T IPS & T R ICKS

4
電子メールのメッセージを自動入力する
3.0

4.0

3.0

4.0

以前このコーナーでは、メールアドレスのリンクをクリックすると、メールソフトにSubjectを自動的に入力させるTIPSを紹介した（1997年7月号）。<A>タグ内のメールアドレスに「?subject=」を追加するのだった。しかし、自動的に記入することができるのはSubject だけではなかったのだ。
今回は、 メールの本文を自動的に入力させる方法を紹介しよう。
Subjectと本文を自動的に入力させることができれば、メーリングリストへの加入メールなどの管理が楽になる。ブラウザーでクリックするだけで必要事項を送ることができるので、ユーザーも安心だ。
さっそく試してみよう。

d<A HREF="mailto:ip-cdrom@impress.co.jp?body=subscribe%20html-tips%0D%0Aend">
メーリングリストへ加入</A>「subject=」と同じく、<A>タグ内のメール「subject=」と「body=」を組み合わせて使うこ

アドレスを少しだけ工夫すれば、電子メールの本ともできる。組み合わせる場合は、以下のように文を自動的に入力させることができる。

「&」で区切って並べる。
「?」はメールアドレスのまず、「<A HREF="ip-cdrom@impress.co.jp">後ろに1つだけ付ける。

」のように通常のリンクを作る。このアドレスあてに以下の本文を書いたメールを送ると、メーリ<A HREF="mailto:ip-cdrom@impress.

ングリストに加入できることとする。

co.jp?subject=HTML%20TIPS%26特殊文字の指定方法
subjectやbody、ccを指定するときに注意してほしいのは、特別な文字を使う場合には、以下のように必ずエスケープシーケンス（「%」+16進数の文字コード）を利用することだ。

TRICKS&body=こんにちは。">
subscribe html-tips
ただ残念ながら、「body=」には対応していない

end

メールソフトもある。現在、Microsoft Outlook

改行%0D%0A

半角空白%20

カンマ%2C

この内容をメールソフトに書き込むには、メールExpress、Netscape Messagerなどのメールソアドレスの後に「?body=本文の内容」を追加しフトが対応しているが、対応していないメールソ%%25て、以下のようなリンクを作る。

フトのユーザー向けの案内も書いておいたほうが&%26いいだろう。

=%3D

?

%3F

<A HREF="mailto:ip-cdrom@impress.

なお、「cc= 送信したいアドレス」を加えると、

co.jp?body=subscribe%20html-tips

メールソフトにCCを指定することもできる。

%0D%0Aend">

280 INTERNET magazine 1998/6

参考 http://www.imc.org/draft-hoffman-mailto-url

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

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

今月のテーマ

入れ替えを制する
ダイナミックHTMLでページの内容をダイナミックに変更する。でもアニメーションや色、背景の変更ばかりではいずれあきてしまう。もっと実用的な例がほしいという読者も多いだろう。ダイナミックHTMLでできることはアニメーションだけではない。文章の内容そのもの、「コンテンツ」を操作することもできるのだ。
そこで今月は、文章の内容とスタイルをダイナミックに入れ替えるパズルに挑戦していただく。トリックがわかったらすぐに解答を送ってきてほしい。正解者には抽選で1名にオリジナル腕時計をプレゼントさせていただ
く。なお、正解は来月のこのコーナーで発表する。それでは頭をやわら
かくして、今月のテーマ"入れ替えを制する"にチャレンジ！

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

1 文章をダイナミックに入れ替える！

4.0

左のサンプルに書かれているのは何の変哲もないただのテキストだ。しかし、「Clyde, do you love me ?」の文字をクリックしてみると……書かれている内容が一瞬にして別の文章に入れ替わり、「Yes, I love you,Bonnie !」となる。これはIE4.0で使えるテクニックなので、レイヤーを使っているわけでも、表示と非表示を切り替えているわけでもない。この部分のテキストがそっくり入れ替わっているのだ。さあ、わかるだろうか？
スクリプトを少々使っているが、たいした長さのものではない。なお、解答には、左のサンプルのフォントや色をそのまま再現する必要はないので、肝心な部分だけを書いて送ってほしい。
ヒント

Q U E S T I O N

IE4.0で特定箇所のテキストを操作するには……

2 スタイルをダイナミックに入れ替える！

4.0

第1問ではシンプルにテキストを入れ替えた。こんどはさらに、テキス
トのスタイルを変更させてみよう。左のサンプルを見てほしい。第1問と同じく文字をクリックすると、書かれている内容だけではなく、フォントと色が変更され、表示位置も右端から真ん中に移動している。IE4.0のダイナミックHTMLを使うのがポイントだが、わかっている人ならば、あっという間に書けるだろう。ややこしいことをしているわけではない。仕掛けはとても単純で、スタイルシートを書き、第1問のスクリプトに何行か追加するだけだ。なお、第1問、第2問ともにIE4.0の問題なので、JavaScriptとVBScriptのどちらを使ってもかまわない。
ヒント

IE4.0で特定箇所のスタイルをまるごと入れ替えるには……

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

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