第 40 回

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

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

開発の発表から2年以上を経て、ついにネットスケープ6の最初のベータ版、
4

Preview Release 1が登場した。HTML 4.0やCSS、DOMなどの最新の標準規格をサポートしたのが最大の特徴だ。これでIEでしか使えなかったテク5ニックの数々がネットスケープにも応用できるようになったのだ。さっそくネ5.5

ットスケープ6の新機能を使ったテクニックをお届けしよう。
4

今月号のTIPSは次のURLから参照できます。
Jump

internet.impress.co.jp/magnavi/ip0006/htmltips/

6

インターネットエクスプローラ4以上
インターネットエクスプローラ5以上
インターネットエクスプローラ5.5以上ネットスケープナビゲーター4以上
ネットスケープ6以上

5月号「HTMLパズルに挑戦しよう」の解答
比較的手間のかかるスクリプトを書く問題だったにも関わらず、多くの挑戦者があったのはうれしい。また、この解答のように色の値を「てきとう」に指定するのではなく、マウスの位置から厳密に計算した人がほとんどだったのは頼もしい限りだ。それでは解答を発表しよう。

A N S W E R

1 上下の動きに合わせて色を変えろ！

グラデーションの元になる色を配列で作っておく。マウスの上下位置（event.y）から配列の番号を計算して、背景色を割り当てる。
<SCRIPT LANGUAGE="JavaScript">
var acolor = new Array ("#000000", "#222222", "#444444", "#666666", "#888888","#AAAAAA", "#CCCCCC", "#EEEEEE", "#FFFFFF" ) ;function changecolor ( ) {n = Math.floor ( 9 * event.y / document.body.clientHeight ) ;if ( 0 <= n && n < 9 ) menu1.style.background = acolor [n];}</SCRIPT><BODY onmousemove="changecolor ( ) ;"><TABLE ID="menu1" STYLE="background: #FFFFFF; color: #FFFFFF;">A N S W E R

正解者：坂部和久さん、下条健司さん、Masahiko
Murataさん、Libretto30さん、Masahito Yamaguchiさん、 杉 本 知 子 さん、 良 知 敬 介 さん、 うおまさ
@homeさん2 マウスを近づけて色を変えろ！

第1問とほぼ同じ。こちらはマウスの左右の位置（event.x）も使用した。
<SCRIPT LANGUAGE="JavaScript">
var acolor = new Array ("#000000", "#222222", "#444444", "#666666", "#888888","#AAAAAA", "#CCCCCC", "#EEEEEE", "#FFFFFF" ) ;function changecolor ( ) {dx = Math.abs ( event.x - 500 ) ;dy = Math.abs ( event.y - 80 ) ;n = Math.floor ( ( dx + dy) / 40 ) ;if ( 0 <= n && n < 9 ) block1.style.background = acolor [ n] ; }</SCRIPT><BODY onmousemove="changecolor ( ) ;"><DIV ID="block1" STYLE="position: absolute; left: 400; top: 60; width: 200; height: 40;
background: #FFFFFF; color: #FFFFFF">

326 INTERNET magazine 2000/6

正解者：坂部和久さん、下条健司さん、Masahiko
Murataさん、Libretto30さん、Masahito Yamaguchiさん、杉本知子さん、うおまさ@homeさん

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

DOM（ドム／Document Object Model）：プログラムによってHTMLやXMLの内容を検索したり操作したりする方法を共通化したルール。
W3Cが1998年に発表したDOM level 1と2000年現在策定中のDOM2がある。 R&D
©1994-2007 levelImpress

T IPS & T R ICKS

1
DOMでダイナミックHTMLを動かす
5

5.5

6

ついにネットスケープ6が発表された。今までのナビゲーターの弱点だったスタイルシートがIE 5以上に強化されたことが一番うれしい点 だが、 プログラムからHTMLを操作するための標準規格
DOM がサポートされたことに注目してほしい。IE 5もDOMをサポートしている。ということは、どちらのブラウザーでも同じスクリプトでHTMLを操作できる、つまり同じダイナミックHTMLが動作するということになる。そこでさっそく左のようなサンプルを作ってみた。2 つのブラウザーでまったく同じスクリプトが動いている。
もうスクリプトを書き分けるような面倒はしなくてもいいのだ。

d1<SCRIPT LANGUAGE="JavaScript">var c = 255, d = -10;
function myanim ( ) {if ( c > 255) { c = 255; d *= -1; }else if (c < 0 ) { c = 0; d *= -1; }o = document.getElementById ("anim");o.style.color = "rgb (" + 255 + "," + c + "," + c + ")";
c += d;}function start ( ) {if (document.getElementById )setInterval ("myanim ()", 100 );}</SCRIPT>

2<BODY onload="start ( ) ;"><P ID="anim">DOM level 2 ready</P>

このサンプルは、スクリプトでスタイルシー

この関数の中の「document.getElementById」

じメソッドでオブジェクトを取得できるようになトを操作して、文字の色を刻々と変化させる簡については後で述べる。setIntervalメソッドで一ったのだ。関数startではこのメソッド「getEle単なダイナミックHTMLだ。DOMのサポートに定の時間置きに関数「myanim」が動作するよmentById」があるかどうかを判別して、IE 5とよって、ネットスケープ6でもできるようになっうにする。

ナビゲーター6以外ではスクリプトが動かないよ
うにしている。

たことは、次の2つ。1つはすべてのタグをスクリプトで「オブジェクト」として扱えるようになっ

ソース1の関数myanimがスタイルシートの値をタグに割り当てられたスタイルシートを変化させたこと。これまではナビゲーターのダイナミック変化させて文字の色を変えるスクリプトだ。まずるには次のように書けばいい。

HTMLといえばレイヤーの操作が中心だった。も対象となるHTMLのタグをオブジェクトとして取う1つはスタイルシートを操作して、タグの色やり出す。それにはIE 5でもナビゲーター6でも次大きさ、位置を変化させられるようになったこと。のように書けばいい。

オブジェクト.style.プロパティー = 値;

しかもIE 5と同じスクリプトでできる。
変数 = document.getElementById(ID名);

サンプルでは「o.style.color」に色を表す値をそれではソースを見てみよう。ソース2の<P>タ入 れて、文 字 色 を変 化 させている。たとえばグ（I D 属 性 は「a n i m 」）を操 作 するために、「"rgb(255,0,0)"」という値なら文字の色が赤く<BODY>タグのonloadイベントでスクリプトをサンプルではID名が「anim」という<P>タグをなる。背景色を変化させたいときは、「o.style.

呼び出す。これはアニメーションを作成するとき変数「o」で参照している。今までなら、「docubackgroundColor」に色を表す値を入れればいに今まで何度もやってきたパターンだ。

ment.all（ID名）」や「document.layers[ID名]」い。以上でIE 5とナビゲーター6の両方で動くダ

呼び出すスクリプトは、ソース1の関数「start」。のように書き分けなければならなかったのが、同

イナミックHTMLの完成だ。

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

オブジェクト：プログラミング言語において、操作の対象となる何らかの「もの」のこと。オブジェクトは性質を表すプロパティーや機能を呼び出すためのメソッドを備えている。
プロパティーやメソッドを操作すれば、オブジェクトが持っている機能を簡単に利用できる。
©1994-2007 Impress R&D

INTERNET magazine 2000/6327

T IPS & T R ICKS

2
ポップアップコメントを表示させる
5.5
今までこのコーナーでは、TITLE属性を使ったりレイヤーを使ったりして、マウスの動作でツールチップを表示させるテクニックをいくつか紹介してきた。今回はIE 5.5で動作する最新のツールチップを紹介しよう。左はそのサンプルで、特定の文字の上にマウスを載せることで、あらかじめ用意しておいたメッセージをポップアップ表示させている様子を表したものだ。実際はツールチップというよりは1つのウィンドウになるのだが、これに関する説明はポイント欄を読んでもらうとして、IE 5.5をインストールしている人は、まずは下のソースをテキストエディターに打ち込んで、最新のテクニックを試してみよう。

d1<SCRIPT LANGUAGE="JavaScript">
popup = window.createPopup ();popupObj = popup.document.body;
popupObj.style.backgroundColor = "silver";function on ( ) {popupObj.innerHTML ="ペンシルバニア州。<br>ピッツバーグの北約 165マイル。";
popup.show (0,20,220,35,document.all ("tooltip")) ;}function off ( ) {popup.hide ();}</SCRIPT>

2<SPAN ID="tooltip" onMouseover="on ()" onMouseout="off ()">
ブラッドフォード</SPAN>

ここを読む前にサンプルを動作させてみた人

Popup」という命令があることがわかるだろう。こは、今まで紹介してきたツールチップとあまり変れがIE 5.5から新たに追加されたメソッドなのだ。

わりがないとがっかりしたかもしれない。そう感じ

このメソッドの前に「window」オブジェクトがあるた人は、今度はウィンドウサイズを小さくして試しことからもわかるように、このツールチップはウィxobjectからの横方向の相対位置
yobjectからの縦方向の相対位置w
ツールチップを表示する領域の幅h
ツールチップを表示する領域の高さ
object 表示位置の基準となるオブジェクト（ソース2の説明を参照）てほしい。ツールチップがブラウザーからはみ出ンドウとして機能する。サンプルでは「style」オブしても、正常に表示されていることが確認できる

ジェクトを介して背景色を設定してみたが、ほかのだろう。今回紹介するツールチップは、表示位置プロパティーと組み合わせて、ツールチップの周がブラウザーのウィンドウに依存することがなく、りに枠線を描いたり、背景画像を設定 したりす

ソース2はタグに付けるマウスイベントとID名の設デスクトップ上ならどこにでも表示させられるツーることも可能だ。

定だ。
「onMouseover」と「onMouseout」は本

ルチップはあたかも独立したウィンドウのように表関数「on」と関数「off」の中では、実際に表示と示されるのだ。

非表示を切り替える処理をしている。非表示にす省略。ID名には「tooltip」を指定している。ソース
1の「show」
メソッドで「document.all ("tooltip")」

ルチップなのだ。別の言い方をすると、このツーコーナーの読者にとっては、おなじみなので説明はるには「hide」メソッドを用いる。このメソッドにを指定しているので、このタグがポップアップコメそれではソースの説明をしよう。ソース1はポップは特に説明することはないが、表示させるほうのントの表示位置の基準となるオブジェクトになるのアップするコメントの表示と非表示を切り替えるスクリプトだ。最初の3行がポップアップコメント「show」メソッドの使い方が少し面倒なので説明しておこう。
「show (……)」のかっこの中を順にx、メソッドで横方向と縦方向の位置を相対的に指を表示させるための設定 で、この中に「c r e a t ey、w、h、object、と置き換えて説明する。

定すればよい。

328 INTERNET magazine 2000/6だ。このタグの左上座標を基準点として、「show」

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

ツールチップ：マウスポインターをアプリケーションの特定の部分に載せたときに現れる小さな囲み。その部分がどんな機能を持っているのかを説明するために表示される。

©1994-2007 Impress R&D

T IPS & T R ICKS

3ウィンドウを常に前面に表示させる。
45

5.5

46

まずは左のサンプルを見てほしい。サンプル画面の左側に小さなウィンドウが開かれていることに気付いただろう。このウィンドウは、
単純にJavaScriptによってサイズを指定して開いたものだが、実は普通のウィンドウとは少し異なる動作をする。その異なる動作とは、「必ず最前面に表示されるウィンドウ」なのだ。通常、ほかのウィンドウがアクティブ（作業中）になったとき、それまでに開いていたウィンドウは背面に回るのだが、今回紹介するTIPSを使うと、指定したウィンドウを常に最前面に表示できるのだ。それではさっそくこのTIPS のソース（開いたウィンドウのほうのHTMLのソース）を見てみよう。

d<BODY onBlur="focus ()">

ソースを見ると、あまりにも短いソースなのでイコールの後ろにある「focus ( )」はメソッドといわや、常に 表示しておく必要があるメッセージなど

驚 いた方もいるだろうが、今回紹介するTIPSはれる種類のJavaScriptだ。メソッドとは語学的にに使うといいだろう。また、初心者ユーザーの中たったこれだけで実現できるのだ。

言うと動詞のことで、「○○を実行 せよ」という意には、常にウィンドウが最前面に表示されている筆者のもとには「常にウィンドウを最前面に表示味になる。このサンプルの場合、この○○に当たので、不安になる人がいるかもしれない。そのよするにはどのようにすればいいのか？」という質問

るものがfocusだ。focusというメソッドは、実行うなユーザーのためにも簡単な注意書きや使用メールを今まで数多く頂いていた。そこで今回は可能な状態（アクティブ）にすることを意味する。

法の説明などを付け加えておいたほうがよいと思

紙面で細部まで詳しく説明することにした。

つまり全体を通すと、「ウィンドウが非アクティブわれる。

な状態 になったら、アクティブな状態に戻しなさ
それではさっそく、このスクリプトを解 説しよう。

い」ということを表しているのだ。ウィンドウがア今回紹介したTIPSを探していた人は、こんなにも「onBlur」というのは、イベントといわれる種類のクティブになると必ず最前面に移動するので、こ簡単なソースで実現できるテクニックなので、今属性だ。イベント属性はマウスやキーボードなど

れを<BODY>タグに追加することで、右上隅のすぐキミのホームページに反映させてみよう。

入力からの信号を判断するJavaScriptを指定す「×」ボタンでウィンドウを閉じるまで、この小さなるもので、何種類もあるイベントの中で「onBlur」ウィンドウは常に最前面に表示されるようになる

なお、
今回新しく登場したネットスケープ6 Preview

は待機状態のことを意味する。つまり、ここではのだ。以上が今回のTIPSの説明だ。

Releaseで確認したところ、ウィンドウを開くスクリプトは動作したが、ウィンドウの切り替えでハン「ウィンドウが待機状態（非アクティブ）になったらイコールの後の命令を実行せよ」ということを表

ホームページでの用途としては、サンプルのようしているのだ。にサイトのナビゲーションメニューとしての利用法

グアップすることがあったことを付記しておく。

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

ソース：HTMLやJavaScriptなど、アプリケーションに処理させるテキスト、またはそのファイル。

©1994-2007 Impress R&D

INTERNET magazine 2000/6329

T IPS & T R ICKS

4
テーブルのセルを3D表示する
455.5

6

テーブルを装飾する方法として、これまでにも壁紙や背景色、境界線の色などを指定するテクニックを紹介してきた。今回はスタイルシー
トや色指定のコツなど、いくつかのワザを組み合わせて、ウィンドウズの3D ボタンのように見えるテーブ
ルのセルを作ってみよう。ダイナミッ
クHTMLを使って複雑なアプリケーションを作るときにも応用が利くぞ。基本的にはIE 4以降で導入されたテクニックだが、CSS 2で定義されている色の名前を使っているので、ナビゲーター6のPreview
Releaseでもきれいに表示される。
今月の付録CD-ROMからナビゲー
ター6をインストールした人は、さっそく試してみよう。

d1<STYLE TYPE="text /css">
TABLE#tblSolid TD {color: menutext;
background-color: threedface; border-width:1px;
border-style: solid;
border-color: threedhighlight threedshadow threedshadow threedhighlight;}</STYLE>2<TABLE ID="tblSolid"><TR><TD> (1,1) </TD>……

1つ目のポイントはスタイルシートの使い方だ。
あるテーブル全体にスタイルを適用させるには、「TABLE#テーブルID名 { font-family: tahoma;

border- style:solid;
border-color:threedhighlight threedshadow
threedshadow threedhighlight;……} 」のように書く。テーブルのIDは、<TABLE>

端の境界線が陰に、左端と上端がハイライトに（明るく）見えるようにしよう。境界線のタイプ（bordertype）は「solid」にしておく。
これですべてのセル（サンプルの「1,1〜3,2」）がタグの中で、ID属性を使って名付ける。さらにこ

背景色（background-color）と境界線の色（border

立体的に見えるようになった。部分的に見え方をのテーブル内の特定のタグ（<TABLE>、<TR>、-color）に、見慣れないカラー名が使われているの変えたい場合は、「3,3」のセルを参考にしてほしい。

<TD>のいずれか）にだけスタイルを指定したい場に気付いただろうか。
「threed〜」というのがそれ境界線の陰影を逆に、つまりthereedshadowと合は、サンプルのように「TABLE#テーブルID名
TD { font-family:tahoma; ……} 」と書いておくこ

だが、これはウィンドウズのシステムカラー名を指threedhighlight を逆にすることで、3Dボタンを定したものだ。ウィンドウズがアプリケーションの押したように見せることができる。今回のTIPSとともできる。今回はセル 1つ1つに立体的なスタイボタンなどを立体的に見せるために使っている色ダイナミックHTML を組み合わせて、実際にクリッルを適用したいので、後者の方法にした。

なので、簡単に3Dボタンを実現できるというわけ

クで動く3Dボタンを作ってみようというツワモノはだ。デフォルトではグレー系統の色が使われていぜひ試してみてほしい。

次のポイントは、実際に立体的に見えるようなスるが、デスクトップテーマなどでカスタマイズしてタイルだ。次の4つのスタイルを指定する。

いる場合にはその色が使われる。

なおウィンドウズのシステムカラーにはまだまだ種

背景色は「threedface」というシステムカラーにし類がある。次のページを参考にしてほしい。

background- color : threedface;border- width:1px;

330 INTERNET magazine 2000/6ておこう。境界線の色を決めるborder-color 属性

Jump

では、4つの色を指定している。セルの右端と下インターネットマガジン／株式会社インプレスR&D

セル：表計算ソフトやHTMLの<TABLE>タグなどの表において、行と列を構成するマス目のこと。

©1994-2007 Impress R&D

msdn.microsoft.com/workshop/author/
dhtml/reference/colors/colors.asp

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

今月のテーマブラウザーの判別を制する

大好評発売中！

最新の標準規格をサポートしたネットスケープ6が登場したのは大歓迎だが、ブラウザーの種類がまた1つ増えたことで頭の痛いウェブマスターも多いだろう。今後ネットスケープ6を使う人が増えれば、主なターゲットをどのブラウザーにするかが「HTMLパズルに挑戦しよう」
宛 先

悩みの種となるかもしれない。そこで今月はネットスケープ6 Preview

D

Release 1公開を記念したパズルに挑戦していただく。トリックがわか

正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！

ったらすぐに解答を送ってきてほしい。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマブラウザーの判別を制する にチャレンジ！

m im-html@impress.co.jp
なお、締め切りは5月10日とさせていただく。

Q U E S T I O N1 ネットスケープ6を判別せよ！

45

5.5

46

まずは基本中の基本問題。スクリプトによるブラウザーの判別だ。ページを読み込んだときにブラウザーの種類を調べて、ネットスケープ6ならネットスケープ6用のページに、IE 5以上ならIE 5用のページにジャンプするようにしてほしい。それ以外のブラウザーの場合はそのまま同じページにとどまるようにする。こうしたトリックはこの連載で何度も取り上げてきたので方法はすぐに思い付くだろう。難しいのは、「Mozilla/4.0…
…」のような判定の対象となる文字列をあらかじめ調べなければならないことくらいだ。だれにでも書ける簡単なスクリプトなので、初めての人でも気軽にチャレンジしてほしい。

ヒント

Q U E S T I O N

もちろん「navigator」オブジェクトを使って……

2 スタイルシートを使い分けろ！

45

5.5

6

世の中のウェブマスターをさんざん悩ませてきたのは、スタイルシートを中途半端にサポートしたIE 3とナビゲーター4の存在。この2つのブラウザーではスタイルシートを使っただけで、表示がめちゃくちゃになることもある。そのせいでスタイルシートの導入をためらってきた人もいるだろう。そこで、IE 4以上とネットスケープ6の場合だけにスタイルシートが適用されるようなページを作りたい。条件は、スクリプトを一切使わずにスタイルシートだけでこれを実現すること。「そんなことできたっけ？」と思うかもしれないが、スタイルシートに関する突っ込んだ知識がある人なら、「ははーん、あれか」と気付くだろう。
ヒント

IE3とナビゲーター4にはない機能を使う……

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

文字列：英数字や漢字を並べた文字の列。JavaScriptでは、「"abc"」や「'あいうえお'」のようにダブルクォーテーションやシングルクォーテーションで囲って表現し、「2000」や「3.14」のような数値と区別する。
©1994-2007 Impress R&D

INTERNET magazine 2000/6331

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