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

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

IE4.0の登場によって、HTMLの世界もがらりと様相が変わりつつある。ダイナ
ミックHTMLが、これまでの静的なページから動的なページへと今までとは違っ3.0たコンテンツにしていく。しかも、ブラウザー単体でできなかったような、画像4.0処理もできるのだ。そこで今月もIE4.0が搭載する新機能を使った最新のTIPSとTRICKSをお届けする。

3.0

4.0

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

1月号「HTMLパズルに挑戦しよう」の解答
今回はIEの最新ダイナミックHTMLを使ったものとはいえ、そんなに難しくはなかったはずだ。IEのダイナミッ
クHTMLは先月号でも説明したように、スタイルシートを拡張したものである。スタイルシートをマスターすれば、TIPSを自在に操れるぞ。それでは IE4.0のダイナミックHTMLを制する の解答を発表しよう。

A N S W E R

1 マウスカーソルを自在に変えろ！

マウスカーソルの形を変える項目の名前はその名もズバリ「cursor」。指定できる値は、指さし型の「hand」、十字型の「move」、砂時計型の「wait」がある。○○-resizeは、「ne」が右上、「nw」が左上、「sw」が左下、「se」が右下を指す矢印だ。e、w、s、n、がそれぞれ東西南北の頭文字だと覚えておけば、方向を間違えないぞ。
<i style="cursor: hand">hand</i><i style="cursor: move"> move</i><i style="cursor: wait">wait</i><i style="cursor:ne-resize">ne-resize</i><i style="cursor:nw-resize">nw-resize</i><i style="cursor:sw-resize">sw-resize</i><i style="cursor:se-resize">se-resize</i>

A N S W E R

正解者の方々：川田哲さん、渡辺実さん、佐藤義和さん

2 入力した文字を表示させろ！

テキストボックスに入力した文字列を表示させる部分に「Replace」と名前を付ける。
すると表示される値は「Replace.innerHTML」となる。同様に、テキストボックスに「You」と名前を付けると、入力した文字列は「You.value」となる。ボタンを押せば、「Hello! Dear "入力した文字列"」が「Replace」の部分に表示される。
<DIV ID=Replace STYLE="font-family: Comic Sans MS; font-size: 20;"></DIV><BR><INPUT ID=You TYPE=text STYLE="width:310"><INPUT TYPE=button VALUE="Hello!"
onclick="Replace.innerHTML = 'Hello! Dear ' + You.value">
正解者の方々：川田哲さん、渡辺実さん

308 INTERNET magazine 1998/2

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

T IPS & T R ICKS

1
画像にさまざまな表示効果を付ける
4.0
先月号、先々月号とこのコーナー
では、文字にさまざまな表示効果を付けるフィルター機能を使った便利なTIPSを紹介した。だが、表示効果を付けられるのは文字だけではない。画像にもさまざまな表示効果を施すことができるのだ。左の画面を見てほしい。元の画像にフィルターをかけることで、一味違った画像の表示がHTMLだけで実現できる。IEには、このような画像処理機能まで搭載されているのだ。今回は、この画像に表示効果を与えるTIPSを一気に紹介しよう。
手軽に画像編集が楽しめることは間違いない。スクリプトと組み合わせればもうフォトレタッチソフトは必要なくなるぞ。

参考：j http://www.microsoft.com/msdn/sdk/inetsdk/help/dhtml/content/
filters/Visual_Filter.htm#Visual_Filterd<IMG SRC="image.gif" STYLE="Filter: Alpha (Opacity=100,FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)"><IMG SRC="image.gif" STYLE="Filter: Blur (Add=0, Direction=225,Strength=10)"><IMG SRC="image.gif" STYLE="Filter: Chroma (Color = #000000)"><IMG SRC="image.gif" STYLE="Filter: Glow (Color=#0000FF,Strength=20)"><IMG SRC="image.gif" STYLE="Filter: Mask (Color=#FF0000)"><IMG SRC="image.gif" STYLE="Filter: Gray"><IMG SRC="image.gif" STYLE="Filter: Invert"><IMG SRC="image.gif" STYLE="Filter: Xray">

今回は8つのフィルターの使い方を紹介する。

<IMG SRC="image.gif"STYLE="Filter:Blur(Add=0, Direction=225,Strength=10)">「Glow」は輝くような効果を画像の周囲に適用する。
「Color」で輝かせる部分の色を指定する。
「Strength」は輝きの強さを1から255までの範<IMG SRC="image.gif" STYLE="Filter:
Alpha (Opacity=100, FinishOpacity=0,「Blur」は画像に「ぶれ」を生じさせる効果だ。

Style=2, StartX=20, StartY=40,「Add」が0の場合は、効果を与えた画像に元のFinishX=0, FinishY=0)">

画像を重ねず、1の場合は元の画像を重ねる。ま囲で指定するものである。
<IMG SRC="image.gif" STYLE="Filter:Mask (Color=#FF0000)">

た「Direction」でぶれの方向を角度で指定し、「Alpha」は画像の透明度を設定するもので、画像「Strength」でぶれの距離を指定する。の透明度をグラデーション効果を用いて表示する。グラデーションの初期値と最終値は、「Opacity」と「FinishOpacity」で与える。それぞれ1から100「Mask」は指定した色で透明な彩色をほどこすフ<IMG SRC="image.gif" STYLE="Filter:
Chroma (Color = #000000)">の値をとり、100ならば完全な不透明を意味して付けなければならないのは、「Glow」と「Mask」は「Chroma」と組み合わせなければならないことだ。

いる。
「Style」が0ならばグラデーションなし、1な「Chroma」は、画像の特定の色を透明にする。

らば線形、2ならば円形、3ならば四角形にそれ「Color」で透明にしたい色を指定する。

ぞれグラデーションがかかる。あとはグラデーショ
ンの始点と終点を指定するだけだ。

ィルターだ。色は「Color」によって指定する。気をほかに、画像をグレースケールに変換する「Gray」や階調を反転させる「Invert」、グレースケールの階調を反転させる「Xray」がある。

<IMG SRC="image.gif" STYLE="Filter:

これを全部使いこなせれば、もうほかのソフトで画

Glow (Color=#0000FF, Strength=20)">

像を処理する必要がなくなる。

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

INTERNET magazine 1998/2309

T IPS & T R ICKS

2
画像にパワーポイントのような表示効果を付ける
4.0
パワーポイントなどのプレゼンテーションソフトを利用してプレゼンテーション用のスライドを作ったことのある人も多いだろう。こういったソフトには、プレゼンテーションにインパクトを持たせるために、動きのある表示効果をもたらす機能が備わっている。ウェブページもプ
レゼンテーションのスライドも相手に自分の伝えたいことを表現するという点では同 じではないだろうか。今回紹介するTIPSは、テキス
トや画像に動きのある表示効果を与えることができるものだ。IE4.0
はこれによって表現力の点で、ネットスケープコミュニケーターより一歩リードしたと言っても過言ではないだろう。

j http://www.microsoft.com/ie/ie40/demos/transall.htmd<DIV

ID="obj0"
STYLE="WIDTH:300; HEIGHT:120;
FILTER:revealTrans (Duration=3.0, Transition=12)"><IMG SRC="image.gif"></DIV><SCRIPT LANGUAGE="JavaScript">function transitions (){obj0.filters[0].apply ();obj0.style.visibility="visible";
obj0.filters[0].play ();}transitions ();</SCRIPT>

こで「STYLE」を使って高さと幅を指定しておく。

実際に指定した表示効果を実行するには、Java

上記のサンプルコードでは、「revealTrans」といScriptを使う。ここでは「transitions」というプう動きを与えるためのフィルターを<DIV>タグ内ログラムを定義している。
「obj0.filters[0].applyに記述している。
「Duration」は、表示効果が完()」で、「obj0」という<DIV>タグで囲んだ部分

ID="obj0"

了 するまでにかかる時 間 を秒 で指 定 している。にフィルターを適用するようにし、さらに「obj0.

STYLE="WIDTH:300; HEIGHT:120;
FILTER:revealTrans (Duration=3.0,「Transition」は、24種類ある表示効果を0からstyle.visibility="visible"」で表示効果を見える23までの数字で指定するものだ。詳細についてようにし、最後に「obj0.filters[0].play()」で指Transition=12)">は上記の参考URLを参照してほしい。

定した表示効果を実行している。

このTIPSを使えば、簡単にテキストや画像に動きのある表示効果を与えることができる。
<DIV

これでTIPSは完成だ。もうショックウェーブな<IMG SRC="image.gif"><SCRIPT LANGUAGE="JavaScript">function transitions (){</DIV>

どのコンテンツを利用する必要がなくなったのではないだろうか。今までこのコーナーで紹介して<DIV>タグによって表示効果を与えるテキストや画

obj0.filters[0].apply ();きたTIPSにこの表示効果を組み合わせれば効果像を囲む。この<DIV>タグをJavaScriptで呼び

obj0.style.visibility="visible";
obj0.filters[0].play ();100倍。ぜひ試してみてほしい。

出せるように、「ID="obj0"」と名前を付けておこう。ここで忘れないでほしいのは、表示効果を与}える部分に高さと幅を指定するか、絶対位置を指transitions ();定しないと表示効果が与えられないことだ。そ</SCRIPT>

310 INTERNET magazine 1998/2

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

T IPS & T R ICKS

3
ボタンのデザインをダイナミックに変える
4.0
デザインに工夫を凝らして作ったページでも、<FORM>タグで記述される部分はどうしても画一的になってしまう。アンケートページなどを作ってはみたものの、内容はいいのだが、見栄えに納得がいかないといった場面がデザインにうるさい
ウェブページ作成者だったら1度や2度はあるだろう。そこで活躍するのがIEのスタイルシート機能を使ったダイナミックHTMLだ。これを使えば、スタイルシートによってボタンを個性的なデザインに変えられるだけでなく、カーソルの動きに合わせてデザインを変えることもできる。高度なテクニックは必要ない。自分だけのオリジナルボタンを作ってみよう。

d<STYLE>.def {font:14pt "Times New Roman";}.start {color:silver; background:black; font:12pt "Comic Sans MS";}</STYLE>:<SCRIPT LANGUAGE=JavaScript>
function chButton (s){ if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s }</SCRIPT>:<FORM onmouseover="chButton ('start')" onmouseout="chButton('def')"><INPUT TYPE="button" CLASS="def" VALUE="Yes, already !"><INPUT TYPE="button" CLASS="def" VALUE="No, not yet ..."></FORM>

ボタンの上にカーソルを載せると、カーソルを<SCRIPT LANGUAGE=JavaScript>を作ってみた。このコードはスタイルシート、Javafunction chButton(s){ if ("INPUT"==event.srcElement.

Script、HTMLの3つの部分からなっている。

tagName)<STYLE>.def { font:14pt "Times New Roman";}</SCRIPT>

載せたボタンの色や文字の書体が変わるサンプル<FORM onmouseover="chButton('start')" onmouseout="chButton ('def')"><INPUT TYPE="button" CLASS="def"
VALUE="Yes, already !">event.srcElement.className=s }.start {color:silver; background:black;<INPUT TYPE="button" CLASS="def"
VALUE="No, not yet ..."></FORM>「chButton(s)」はボタンのスタイルを変更する

font:12pt "Comic Sans MS";}

ためのプログラムである。「 i f （ " I N P U T " ）「onmouseover="chButton ('start')"」はカーソ</STYLE>==event.srcElement.tagName」は、表示されているページ上 でイベントが起 こった部 分 がルがボタンの上に載ったら「start」というスタイルを使い、「onmouseout="chButton ('def')"」はボタンのスタイルを2つ作っておく。最初に表示さ「INPUT」ボタンだったら、ということを表してカーソルがボタンの上にない場合は「def」というれるボタンのスタイルが「.def{}」で、変化後のスいる。この条件文が成立したら、「e v e n t . s r c

スタイルを使うということを指定している。
「start」

タイルが「.start{}」だ。どちらも「font」によっElement.className=s」によって、ボタンをと「 d e f 」が先 ほどの「 s 」の値となるわけだ。て文字サイズとフォントを変えてある。また「.start{}」「s｣というスタイルに変えるように指定している。

<INPUT>タグの中で、「CLASS="def"」としては、「color」によってフォントとボタンの色も変え

この「s」は、次に説明する<FORM>タグの中ボタンの初期スタイルを指定しておくことを忘れなてある。

で与えられるものだ。

いようにしよう。

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

INTERNET magazine 1998/2311

T IPS & T R ICKS

4
文字列に対してヘルプを出現させる
4.0
ウェブページの画像の上でマウスを止めると画像の説明などの文字が表示される。<IMG>タグのALT
オプションを利用したこの「ツールチップ」と呼ばれるテクニックは、初めIEが採用し、今ではネットスケープナビゲーターも採用した機能で、人気の高いTIPSでもある。ただ今まではこのテクニックは画像にしか使えなかった。文字にも使うことができれば、ウィンドウズのヘルプにあるような、単語の説明を表示するといった使い方ができるのに……。そう思っていたウェブデザイ
ナーに朗報だ。IE4.0を使えばこのツールチップが文字にも使えるのだ。さらに手の込んだページが作れるぞ。

j http://www.microsoft.com/gallery/files/html/visibility.htmd<P title="A tooltip can even be added to very element using thetitle attribute!">Click here to see more data:</P>

最近では珍しく非常に簡単なソースなのが早速視覚的な効果を持たせて採用したもで、驚いた人もいるかもしれない。<P>タのだ。 < P > タグ以 外にも < D I V > タグや内をセンタリングできる。これまでセンタリ

グを使って「title="A tooltip can even be<SPAN>タグなど範囲を指定するタグならングには<CENTER>タグが多用されてきたadded to very element using the title「title」オプションを使うことでどこででもが、HTML4.0では<CENTER>は廃止されattribute!"」と指定するだけだけで済む。

使える。段落、文章の説明なら<P>タグやる方向 に向かっているので、 今 のうちにたったこれだけで、長いこと待望していた<DIV>タグを用い、単語や短文の説明なら<DIV>タグに慣れておこう。

ツールチップメッセージが実現できてしまう

ば<SPAN>タグを用いる、というように使<P>、<DIV>、<SPAN>の3つの範囲指定の だ。 こうすれば、 指 定した文 字 列 が、い分ければよい。

タグ。HTMLの基本的なタグだが、これか<P>〜</P>で囲まれた文字列の上でカーソここで2つほどアドバイスをしておこう。

らもスタイルシートに、HTML4.0にと、さルを止めていると、黄色の枠付きで表示さ長い間「改 行 」の代 わりに使 われていたらに活躍しそうな雰囲気だ。

れる。見かけは<IMG>タグの「ALT」オプ<P>タグだが、ここで使っているように本来ションのテクニックとほとんど同じだ。

は段落範囲を指定するタグだ。正式には範これは、現在策定が進んでいるHTML4.0

囲末に</P>を付ける。これを機に、本来の仕様の1つである「タグにタイトルを付けの使い方をマスターしておくといいだろう。

る」という機能である。この機能を、IE4.0

もう1つ、<DIV>タグだが、<DIV ALIGN=

312 INTERNET magazine 1998/2"center">……</DIV>とすることで、範囲

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

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

今月のテーマ

イメージを制する
最近このコーナーでは、JavaScriptやスタイルシートなど高度なテクニックばかりを取り上げてきた。
だがパズルの問題が難しいのか、解答を送ってくれる人が少なくなってきているように感じる。もう少し誰もが取り組めて、なおかつちょっと知識の必要なTIPSはないものだろうかと考えみた。おさらいを兼ねて、イメージを扱うものはどうだろうか。そこで、今月は、ちょっとしたイメージの効果的活用法に挑戦していただく。トリックが分かったらすぐに解答を送ってきてほしい。正解者には抽選で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
3.0

4.0

ウェブページにファイルサイズの大きなイメージを使うと、ファイルの読み込みに時間がかかってしまう。そこで、<IMAGE>タグに「ALT」オプションを追加して、何のイメージかということが分かるように文字で説明することがある。しかし、文字で表示されるよりもイメージで表示されることに越したことはない。そこで今月の最初のパズルは、通常表示されるはずのイメージが完全に読み込まれるまでの間に、ファイルサイズの小さい別のイメージを表示しておくようなページを作ってほしい。この方法を知っていれば、イメージを読み込んでいる間、ウェブページ読者がイライラしないようなページができるぞ。
ヒント

Q U E S T I O N

低解像度画像表示のオプションさえ分かれば……

2 IE4.0の内部画像を表示させろ!

4.0

ちょっと古くなってしまうが、97年3月号のこのコーナーでは、ネットス
ケープナビゲーター自身が、内部に持っているアイコンを表示させるパズルを出題した。残念なことにIE4.0は内部にアイコンを持っていないので、この方法を使うことができない。だが、内部にアイコンではなくいくつかの画像を持っている。そこで2問目は、右の画面にあるような、IEが内部に持っている画像を表示させてほしい。この画像は、IE自身に組み込まれているので、瞬時に表示される。自分のホームページのデザインと組み合わせると面白いものができるだろう。IEの知識が必要なので難しいかもしれないが、ぜひチャレンジしてほしい。
ヒント

IEのリソースを参照するには「res://」……

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

INTERNET magazine 1998/2313

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