第 39 回

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

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

先月までにインターネットエクスプローラ（IE）5.5 Platform Previewで4導入された新しいスタイルシートを2点紹介してきたが、今月の新機能はさらにすごい。正式版が登場すれば流行するに違いないかっこいい効果なので、い5ち早く試してみよう。なお、IE 5.5のダウンロードは以下のページから。

5.5

msdn.microsoft.com/downloads/webtechnology/ie/iepreview.asp
3CD-ROM収録先 A Magnavi→Ip0005→Htmltips+CD-ROM 今月号はTIPS1と2、パズルの解答のみを収録しています。

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

4月号「HTMLパズルに挑戦しよう」の解答出題したときにはJavaScriptを使った答えを想定しており、応募者にも全員JavaScriptで正解を送っていただ
いたのだが、スタイルシートだけで同じことを簡単に実現する方法が見付かったのでそれをお伝えしよう。
JavaScriptを使った解答は付録CD-ROMを参照してほしい。

A N S W E R

1 オンマウスで画像を浮上させろ！

「DIV SPAN { color: red }」というスタイルシートで、<SPAN>タグが<DIV>〜</DIV>の中にある場合のスタイルを指定できる。同じことを疑似クラス「A:link」、「A:hover」と<A>〜</A>の中にある<IMG>タグに対して適用すればいい。
<STYLE TYPE="text/css">
A:link IMG { filter: alpha(opacity=30); }A:hover IMG { filter: alpha(opacity=100); }</STYLE><A HREF="index.htm"><IMG SRC="p1.jpg" BORDER="0"></A>
正解者：Masahiko Murataさん、Libretto30さん、山口雅仁さん、うおまさ@homeさん、布施智也さん

A N S W E R

2 オンマウスで文字を浮上させろ！

第1問と解き方は同じ。ただし、画像と浮上させる文字をそれぞれ座標指定で同じ位置に配置し、完全に重なり合うようにする。
<STYLE>
A:link IMG { filter: alpha(opacity=100); }A:hover IMG { filter: alpha(opacity=50); }</STYLE><DIV STYLE="position: absolute; left: 32; top: 120; width:240; height: 64;">
Go to main page!</DIV><DIV STYLE="position: absolute; left: 32; top: 120; width:240; height: 64;"><A HREF="index.htm"><IMG SRC="p1.jpg" BORDER="0"></A></DIV>

344 INTERNET magazine 2000/5

正解者：Masahiko Murataさん、Libretto30さん、山口雅仁さん、うおまさ@homeさん、布施智也さん

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

疑似クラス：スタイルシートで、リンクの状態によって別々のスタイルを指定できる仕組み。
「A:hover { color: orange; }」とすれば、リンクの上にマウスを載せたときに色を自動的に赤くできる。
©1994-2007 Impress R&D

T IPS & T R ICKS

1
DirectXフィルターを使う その１
5.5
この連 載で続々と登 場 するI E
5.5の新しいテクニックにキミはついてきているだろうか。まだIE 5.5をインストールしていない人は、TIPS & TRICKSを楽しく読むためにもすぐにインストールしてみよう。
それでは左のサンプルを見てほしい。これは画像に対してスタイルシートのフィルターを使用したサンプル画面だ。フィルターはIE 4の頃から使えたのだが、IE 5.5ではDirectXフィルターという新しい機能が追加された。ソースは非常に簡単で、このサンプルのように画像を1つ用意するだけでフォトレタッチソフトを使ったかのような、なかなか面白い効果を表現できる。気になる人はさっそく使ってみよう。

d<IMG SRC="tips1.jpg
STYLE="filter: progid:DXImageTransform.Microsoft.CrEmboss"><IMG SRC="tips1.jpg"
STYLE="filter: progid:DXImageTransform.Microsoft.Pixelate ( MaxSquare=5 )">説明する必要はないだろう。

ルターのように、フィルター名の後ろにかっこが付れたフィルターは、今までIE 4や5で使ってきたフィ

これらのフィルターの使い方は、STYLE要素を使いているものをいう。フィルター名だけで使うもの

ルターと使い方自体にあまり変わりはない。ただって次の形になる。

は、上記の形でしか指定できないのだが、オプシソースを見ればわかるように、IE 5.5で追加さョン付きのフィルターはかっこの中を書き換えてし、IE 5.5では「DXImageTransform」というブラウザー自体の内部にあるプログラムを通して、新しいフィルターを表現できるようになったのだ。それ

filter:progid:DXImageTransform.
Microsoft.フィルター名

効果を変化させられる。たとえば、サンプルで示したピクセレートフィルターなら｢MaxSquare =5｣の数字がモザイク1個当たりの大きさになるので、

では、この新しいフィルターの使い方を説明しよう。
フィルター名 の指 定 だけで使 えるものは「 C r

この値を変えればモザイクのサイズを変えることがソースの1行目は「エンボス」というフィルターの指Emboss」と「CrEngrave」で、 オプション付きできる。ピクセレート以外のオプション付きフィル定だ。フォトレタッチソフトのフォトショップを使っで使えるものは「B a s i c I m a g e 」、
「C r B l u r 」、ターは下記のような形になるので、値をいろいろている人にとっては、今さら説明する必要などな「Chroma」、「DropShadow」、「Pixelate」だ。オと変えてテストしてみるといいだろう。

いほど、おなじみになっているフィルターだ。聞きプション付きとは、上記2行目のピクセレートフィ

慣れない人のために少し説明しておこう。エンボスとは画像の色要素を排除して（グレースケールにして）、元の画像の色が明確に違う境界に陰を付けて立体的に表現する効果だ。
2 行目は「ピクセレート」というフィルターを使ってBasicImage ( Rotation=0, Mirror=0, Invert=0, XRay=0, Grayscale=0, Opacity=1.00, Mask=0 )CrBlur ( PixelRadius=5, MakeShadow=false, ShadowOpacity=1.00 )Chroma ( Color=000000 )DropShadow ( Color=DDDDDD, offX=1, offY=1, positive=true )いる。これは誰もが知っている「モザイク」なのでインターネットマガジン／株式会社インプレスR&D

DirectX（ダイレクトエックス）：マイクロソフトがゲーム用に開発したウィンドウズのシステムモジュール。プログラムから直接グラフィックやサウンドなどのハードウェアにアクセスすることにより、高速な描画や音声の再生ができる。
©1994-2007 Impress R&DINTERNET magazine 2000/5345

T IPS & T R ICKS

2
DirectXフィルターを使う その2
5.5
前のページでは、IE 5.5から追加された新しいDirectXフィルターを紹介したが、動きのない静的なものだった。今度はフィルターのプロパティーをJavaScriptで操作して動的な演出を行うサンプルを紹介しよう。左の画面では2 枚の画像をJavaScriptを使って入れ替えているのだが、入れ替える間に風車のように2枚の画像がくるりと回転して入れ替わる効果が加わっている。2枚の画像とHTMLを用意するだけで、これだけのことができるのだ。サンプル画面からは動作イメージが伝わりにくいかもしないが、とても面白い効果を演出できるので、IE 5.5をインストールしている人は、さっそく使ってみよう。

d1
var startImage ="tips1.jpg";
var endImage="tips2.jpg";
function doTrans ( ) {imgObj.filters [ 0 ].apply ( ) ;if ( imgObj.src.indexOf (startImage) != -1)
imgObj.src = endImage;else
imgObj.src = startImage;
imgObj.filters [ 0 ].play ( ) ;}2
<IMG ID="imgObj" SRC="tips1.jpg"
STYLE="filter: progid:DXImageTransform.Microsoft.CrWheel (spokes=4 )"><BUTTON onClick="doTrans ( )">Play Wheel Transition</BUTTON>前のページに引き続き、ここでもIE 5.5で追加る。必ずこの2つのメソッドをペアで使うことを覚オプションの設定方法は使用するフィルターによっされたDirectXフィルターを紹介する。前のペー

えておこう。ちなみにplayメソッドでは実行時間て異なるが、参考までにここで使用したCrWheel

ジで紹介した動きのない静的なフィルターとは異を設定することもでき、初期値は1秒になっていフィルターを例に説明すると、「spokes=4」の数字なり、動的な効果を演出するものなので、実行さる。トランジションの実行時間を変えたい場合は、の部分がトランジションを実行した際に画像が4せてみるととても面白い動きをするぞ。それではさplayメソッドのかっこの中に好きな数値を入れるつに分割されることを表す。

っそくこの楽しいTIPSのソースを説明しよう。といいだろう。

ソース2の<BUTTON>タグは、マウスが押された

ソース1は動的な演出をするためのJavaScript

ソース2の<IMG>タグは、画像ファイルの指定の部分だ。変数「startImage」と「endImage」とその画像に動的な効果を与えるフィルターの設ときに関数doTransを呼 び出し、トランジションを実行させるためのボタンを設定している。

はそれぞれ最初に表示される画像と次に表示さ定だ。サンプルで設定しているのは「CrWheel」

IE 5.5をインストールしている人は、たいへん面白れる画像のファイル名を指定する。というフィルターだ。このページで紹介するフィル

い効果を演出できるこのテクニックをぜひとも試

次の関数「doTrans」では、画像に動的な効果をターの設定フォーマットは、前のページで紹介ししてみてほしい。IE 5.5 のトランジションで使える与えるために「トランジション」というテクニックをた形と同じく次のようになる。

フィルターは16種類用意されているのだが、紙面使って、指定した2枚の画像を入れ替える処理をしている。トランジションとは一定時間に及ぶ視覚効果のことで、「apply」メソッドでフィルターのの都合上すべては紹介できないため、付録 CD-

filter:progid: DXImageTransform.
Microsoft.フィルター名 ( オプション)

ROMに動作サンプルのみ収録した。興味がある人はそちらを参照してほしい。

種類を設定し、「play」メソッドで処理が実行され346 INTERNET magazine 2000/5

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

メソッド：プログラミング言語において、あるオブジェクトが持っている関数や手続き。自分でプログラムを書かなくても、あらかじめ備わったメソッドを呼び出すだけでそのオブジェクトを簡単に制御できる。
©1994-2007 Impress R&D

T IPS & T R ICKS

3
背景画像で広告を演出する
3

4

4

5

5.5

ウェブサイトの広告スペースとして一番メジャーなのは、ページの上下に表示されるバナー広告だ。最近では背景画像をうまく使って、ページが表示されるまでの間に印象に残る広告を見せるサイトも登場している。例えばポータルサイトのエキサイトジャパン Jump 01 などがそれだ。今回はこのテクニックを紹介しよう。HTMLとしてはごく単純なものだが、画像に工夫をこらすことで今までにない効果を生み出すことができる。ウェブを見て回っている間に「これは」と思われるページが見つかれば、どうやって実現しているのかを調べてみよう。あっと驚く技が見つかるだろう。
Jump 01

www.excite.co.jpd<BODY BGCOLOR="#FFFFFF" BACKGROUND="bg_animation.gif">

最初に表示効果を説明しよう。このテクニッの最初のコマであり、あとに続くコマとして無地のいこと、1コマ目から2コマ目に移る間隔は200 /クを使ったページを開くと、まずウィンドウ一面に画像を挿入している。ページがきちんと表示され1000秒くらいにしておくこと、ウィンドウ全体にわ大きな画像が見える。その後ただちに画面はペーたあとには、背景を無地にしておくほうが見やすたる大きな画像にすること（1000×500程度）
くらジの本来の内容に切り替わる。別のページに自動いページになる。ウィンドウの上下左右の30ピクいが注意点だろうか。適用するページのテーブルジャンプしているわけではない。ページを見ている

セル程度なら、無地画像の隅に絵を入れてもいいの複雑さによって若干違ってくるので、この数値

人にとっては、ページが表示されるまでの一瞬の待だろう。

は自分でいろいろと試してみてほしい。

ち時間に広告なりロゴイメージなり、インパクトのある画像を見せられることになる。画面上でじゃま

例に挙 げたエキサイトジャパンのページでもわかアニメーションGIFの作成には、ウィンドウズ用ではになることもないし、余計なウィンドウが立ち上がるが、この効果をうまく使うためには、ページ全体シェアウェアの「GIF Construction Set」 Jump 02

ることもない。それでは実現方法をしよう。

にわたってテーブルを使用したレイアウトを採用しなどが便利だ。ライセンス問題で風当たりの強い拍子抜けしてしまうかもしれないが、このテクニッていることが望ましい。一般にテーブル、特にサGIFだが、まだまだこんな便利な使い方があるぞ。

クは驚くほど単純だ。最新のHTMLでもなく、複イズが大きく複雑なテーブルは、表示までに時間雑なスクリプトでもなく、ずっと古くから使われてがかかる。一方、背景のGIF画像はサイズが小さきた背景画像の表示方法を利用している。ただ1ければテーブルよりも先に読み込まれ、ただちにつ工夫しているのは、背景にする画像がアニメー表示されるはずだ。この待ち時間を利用して、画つまりションGIFになっているということだ。そう、像を見せているわけだ。

最初に一瞬だけ見える画像が、アニメーションGIF

アニメーションGIF の設定としては、ループさせな

GIF Construction Set
Jump 02 www.mindworkshop.com/alchemy/
gifcon.html
CD-ROM収録先 Å Win→Gifconst

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

アニメーションGIF（アニメーションジフ）：GIF（Graphics Interchange Format）は、画像ファイル形式の1つ。GIFにはいくつかの規格があり、その中の1つ「GIF89a」は、ファイルの中に複数の画像を納められる。これを利用して、複数の画像を切り替えながら表示するタイプのものをアニメーションGIFという。
©1994-2007 Impress R&D

INTERNET magazine 2000/5347

T IPS & T R ICKS

4
マウスの動きでスクロールする
455.5

ホイール付きのマウスを使ってIEを操作すれば、ホイールを回転させることで画面をスクロールさせたり、ホイールを1回押してからマウスを動かすだけで画面がスクロールできたりして便利だ。こうした操作をダイナミックHTMLでやってしまおうというのが左のサンプルだ。
ページの上でマウスを動かすだけで、マウスのボタンでスクロールバーを押さなくても自動的に画面が上下にスクロールする。これがわかれば、上下に長くても楽に読めるページができる。今まで見たこともない技だが、ソースはごく短いもので済んでいるので、自分が書いたページのソースに貼り付けて、その効果を試してみよう。

d1<SCRIPT LANGUAGE="JavaScript">function mmove ( ) {var obj = document.body;scrollTo ( 0, ( obj.scrollHeight - obj.clientHeight) * event.y / obj.clientHeight );}</SCRIPT>

2<BODY onmousemove="mmove ( ) ;">ument.body.scrollHeight）
から現在のブラウザ

ホイール付きのマウスを使った操作では、ホイTo」が実際に画面をスクロールさせるメソッド。こールやマウスをどのくらい動かしたかによってスクの連載でも今までに何回か登場している。1番目

ー内部のサイズ（document.body.clientHeight）

ロールする長さが変わるが、このサンプルでは単純の引数に左右方向のスクロール位置を、2番目のを引けばいい。ページ全体の長さとは、縦にものに「ページ上のどの位置にマウスカーソルがあるか引数に上下方向のスクロール位置をセットすれば、すごく長いディスプレイがあると考えて、スクロールでスクロールの位置を決める」ということにする。

スクリプトで自動的にページをスクロールさせる技

せずにページがちょうど収まるようにしたブラウザ

つまり、マウスが動くたびにその位置を割り出しができる。このサンプルでは左右方向には動かさー内部のサイズだ。て、位置がページの上半分にあれば上にスクローないので1番目の引数は「0」にして、2番目の引数

ブラウザー内部の高さに対するマウスの上下位置ルし、下半分にあれば下にスクロールする。にだけスクロール位置を指定する。の割合は、単純に割り算して「event.y /document.body.clientHeight」とすればいい。
「event. y」

まずソース2のように<BODY>タグにイベント属さて、マウスの位置からスクロール位置を決める方はイベント（ここではonmousemove）が発生した性「onmousemove」を設定し、マウスを動かした

法だが、次の式を使えばスクロール位置が計算でときのマウスのY座標だ。

ときに「mmove」という関数が呼び出されるようきる。
このサンプルでは上下の方向にだけスクロールさにする。
ソース1のJavaScriptを見てみよう。関数mmove
ではまず、「obj」という変数で「document.body」

スクロールの最大位置×ブラウザー内部のサイズに対するマウス位置の割合

348 INTERNET magazine 2000/5

ロールさせたい場合はどうすればいいかはもうおわかりだろう。自分でサンプルを改造してみてほしい。

を参照している。これは単にdocument.bodyを短い名前に置き換えているだけだ。次の「scroll

せているが、マウスを左右に動かしたときにもスクスクロールの最大位置は、ページ全体の長さ（doc

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

イベント：ウェブページ上でマウスを動かしたときやクリックしたときのように、「何々した場合」を表す。JavaScriptはイベントに合わせて動き出すように記述できる。

©1994-2007 Impress R&D

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

今月のテーママウスの動きを制する

大好評発売中！

マウスカーソルをリンクの上に載せたときに文字の色や画像を変化させるテクニックはもうおなじみだろう。さらに今月の4番目のTIPSを応用してマウスカーソルの位置を調べれば、カーソルがリンクの上に載る前に、カーソルが近づいただけで色「HTMLパズルに挑戦しよう」
宛 先や画像を変化させるようなスクリプトを書くことも可能だ。そこで今月はD今までにないインタラクティブな仕掛けを考えるパズルに挑戦していただ

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

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

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

Q U E S T I O N

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

4

5

5.5

左のサンプルは、ウェブサイトの各コンテンツへのリンクが上部に並んだページだ。訪れた人がマウスカーソルをページの下に置いておくとリンクは目立たなくなり、ページを読むのに集中できる。別のページへジャンプしたいときには、カーソルをページの上に持っていけば、リンクの文字がだんだんはっきりとする。そういう仕掛けを作りたい。つまりカーソルの上下位置に合わせてリンクの背景色を濃くしたり薄くしたりしたいわけだ。
さてどうすればいいだろう。前ページのテクニックと、今まで何度もやってきたダイナミックHTMLの技を組み合わせれば簡単だ。なお、背景色は必ずしも滑らかに変化しなくてもよいものとする。

ヒント

Q U E S T I O N

マウスの上下位置の割合から、決まった色を選ぶ……

2 マウスを近づけて色を変えろ！

45

5.5

前ページのTIPSもパズルの第1問も、マウスの上下位置（event.y）だけを扱うものだった。そこで第2問では、左右の位置（event.x）も調べて利用するスクリプトを書いてみよう。左のサンプルでは、右上のほうにマウスを動かすと、赤い四角が現れ、マウスを近づけるごとに赤い色が濃くなる。マウスを遠ざけると、薄くなって見えなくなる。さてどうやって作ればいいだろう。これが第2問だ。ちょっとした計算は必要だが、ブラウザーの大きさや2つの点の間の距離を厳密に計算するようなことは要求しない。マウスを近づけるとダイナミックに色が変わるように見えればいい。かっこいいページを作って解答としてほしい。
ヒン
ト

座標を指定して四角を配置し、マウスの位置との差を調べる……

インターネットマガジン／株式会社インプレスR&DダイナミックHTML（ダイナミック・エイチ・ティー・エム・エル）：HTMLやスタイルシートとJavaScriptなどのスクリプト言語を組み合わせて、動きのあるページを構成する仕組み。
インターネットエクスプローラ4とネットスケープナビゲーター4で導入されたが、2つのブラウザーのダイナミックHTMLには互換性がない。
©1994-2007 Impress R&D

INTERNET magazine 2000/5349

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