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

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

1997年2月号から始まったこのコーナーも、ついに20回目を迎えることになった。第1回の「文字にマーカーを付ける」以来、これまで80個のTIPSや3.0

TRICKS、40個のパズルを紹介してきたわけだ。それでもまだテクニックは尽4.0

きないし、WWWブラウザーはますます進化していくだろう。今月もちょっとしたTIPSから複雑なTRICKSまで幅広くお届けしよう。

3.0

4.0

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

9月号「HTMLパズルに挑戦しよう」の解答
3回連続でスタイルシートからの出題となった。あまり使われていない機能のためか挑戦者は少なかったが、送っていただいた解答は全員が正解だった。スタイルシートを知りつくしたウェブマスターたちにとっては簡単な問題だったのかもしれない。それでは解答を発表しよう。

A N S W E R

1 右上に囲みを表示させろ！

スタイルシートの「float」を使い、値には「right」を指定する。このスタイルを<DIV>
タグに付ければ、<IMG>タグで「ALIGN="RIGHT"」を指定したときのように、続く文章が回り込むようになる。値には「left」も指定できる。
<style>.box { float: right; width: 180px; height: 146px; padding: 8px;
background: navy; color: white; font-size: 9pt;
border: solid white 4px; }</style>：<div class="box">「HTMLパズルに挑戦しよう」<br> 宛先……
</div>
今月のテーマ……

A N S W E R

正解者：長沢圭介、大内勇、高田尚樹、古野潔美、良知敬介（敬称略）

2 囲みに背景画像を指定しろ！

第1問と同じだが、スタイルシートで「background: url（背景画像）」を指定する。右の画面は長沢圭介さんの解答だ。
.box { float: right; width: 180px; height: 146px; padding: 8px;
background: url（back.gif）; color: white; font-size: 9pt; }262 INTERNET magazine 1998/10

正解者：長沢圭介、大内勇、高田尚樹、古野潔美、良知敬介（敬称略）

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

T IPS & T R ICKS

1
リンクのスタイルを部分的に変える
4.0

4.0

左の画面は先月リニューアルしたインターネットマガジンのホームページだ。左に緑色の部分があり、各種のリンクが置かれている。一見すると、よくありがちなデザインのページのようだが、リンクの色に特徴があることに気づいただろうか。右の部分に置かれたリンクが通常の色で下線が引かれているのに対し、左の部分のリンクは白い文字で下線がない。<BODY>タグに「LINK」や「VLINK」属性を指定したり、スタイルシートを使ったりすれば、リンクのスタイルを変えることはできるが、ページ全体のリンクが変わってしまう。特 定の場所だけスタイルを変えるにはどうすればよいのだろうか。さっそく紹介しよう。

d1

TD.left { background: green; color: white; font-size: 9pt; }TD.left A { text-decoration: none; font-weight: bold; }TD.left A:link { color: white; }TD.left A:visited { color: lightpink; }2<TD WIDTH=175 VALIGN="top" CLASS="left">

ここでスタイルシートの進んだ使い方をおさらそれでは次のように指定するとどうなるだろうか。

グのスタイルだけ変える」という方法はもうご存「A:link」や、「A:visited」のような特別なクラスで、「訪れていない」「すでに訪れた」といった状態いしてみよう。まず、「あるタグに囲まれたあるタ
DIV.left EM { color: red }によってスタイルを指定できるものだ。ここまでくれ
ば、 もうわかっただろう。 次 のようにすれば、じだろう。スタイルシートで次のように指定すれば、<DIV>〜</DIV>に囲まれた<EM>タグの文字を「class="left"」を指定した<DIV>タグに囲まれた「class= "left"」を指定した<DIV>タグの中では、赤くすることができる。<DIV>タグに囲まれていな<EM>タグだけが赤くなる。
「left」クラスを指定し訪れていないリンクが白に、すでに訪れたリンクがければ<EM>タグには変化はない。

ない<DIV>タグの中では赤くならない。さらに次のピンクになる。

場合は？
DIV.left A:link { color: white }DIV EM { color: red }DIV.left EM.red { color: white }DIV.left A:visited { color: pink }次に、スタイルシートの「クラス」について考えてみよう。次のように指定すれば、「class="left"」「class="left"」を指定した<DIV>に囲まれ、かつインターネットマガジンのホームページでは、1のという属性を指定した<DIV>タグの背景が黄色「class="red"」を指定した<EM>タグが赤くなる。

ようなスタイルシートを作り、2のように<TD>タくなる。

ここまではわかったかな？

グにクラスを指定している。8月号で紹介した「A:ところで、8月号で紹介したように他のタグとは違（マウスを載せたときのスタイル）も使っている。ソって<A>タグには「擬似クラス」というものがある。

ースを見てみよう。

active」（クリックしたときのスタイル）や「A:hover」
DIV.left { background: yellow; }インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/10263

T IPS & T R ICKS

2
アニメーションGIFで効果を付ける
4.0

3.0

4.0

ショックウェーブやダイナミックHTMLなどを使って、ウェブページにアニメーション効果を付けるには、お金や知識が何かと必要なもので、決して簡単ではない。しかし、ちょっとした知恵を使うことでずっと手軽にインタラクティブなアニメーション効果を作ることもできる。
ここではそんな例をあげてみた。簡単なスクリプトを使っているだけなので、「ダイナミックHTML」という言葉もまだなかったバージョン3 時
代のネットスケープナビゲーターでも動く。最新技術に頼るのではな
く、アイデア勝負。まさにTIPS＆TRICKS読者の得意とするテクニックだ。みんなもこれを参考に面白い技を考え出してほしい。

d<A HREF="next.html" onMouseOver="document.s01.src='color.gif'"><IMG NAME="s01" SRC="white.gif" BORDER=0 HSPACE=1 VSPACE=1></A><A HREF="next.html" onMouseOver="document.s02.src='color.gif'"><IMG NAME="s02" SRC="white.gif" BORDER=0 HSPACE=1 VSPACE=1></A>……

まずサンプル画面を見てほしい。画面の下に「name属性」.src='color.gif'」として、<IMG>

価なツールで作れるので、手間だけでなくお金も格子模様 の部分がある。この上でマウスを動かタグの画像をファイル「color.gif」に変更するだかからない。まさにアイデア勝負のウェブアートとすと、マウスの軌跡にある白いブロックに次々とけのものだ。あとは<A>タグで囲まれた<IMG>言える。

色が付いていく。しかもその色はいっせいに変化

タグをひたすら並べ、タイルの横の数に合わせてこの技を応用すれば、マウスの軌跡で花が咲いたしていく。軌跡の残像と色のグラデーション、2つ<BR>タグを入れる。
「color.gif」は色の付いたりしぼんだりする、なんていう面白い絵が書ける。のアニメ効果が合わさって、「レトロフューチャー画像なので、マウスの軌跡に色が付いていくようぜひアニメーションGIFを自作して、ウェブアーチなコンピュータ画面」とでもいったような美しいに見える。

ストを目指そう。

アートを作り出している。
面白いのは、この「color.gif」という画像ファイ

なお、このサンプルは、次のページにあるものをさて、このように一見複雑に見えるこのアニメーシルだ。実はアニメーションGIFになっていて、色が応用したものだ。

ョンだが、上 のソースのように、基 礎 的 なJ a v aグラデーションで次々と変わる画像なのだ。マウScriptが使われているだけである。格子模様の白スの軌跡に沿って色が付いたタイルが次々と色をいタイルが、画像ファイル「white.gif」だ。左上か変えるのは、このアニメーションGIF の機能によるら順に、<IMG>タグにname属性が「s01」、「s02」、のである。スクリプトは単純に済ませて、画像の「s03」……と付いている。マウスが画像の上に来力で派手なアニメーションを実現している。アニ

たときの動きは、<A>タグのonMouseOverイベ

メーションGIFはGIF Construction Set（本誌のントでJavaScriptを指定している。
「document.

CD-ROMにも収録）のようなシェアウェアなど安264 INTERNET magazine 1998/10

http://www.chocodog.com/vdsc/

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

T IPS & T R ICKS

3
背景に溶け込んだテーブルを作る
3.0

4.0

3.0

4.0

もう1つアイデアによるテクニックを紹介しよう。左のサンプルは、画像と文字を市松模様の上に配したものだ。まるで暗闇の中にグラスが浮かんでいるように見える。複雑な位置や色の指定をしているようだが、何ということはない。昔からよくあるテクニックで、だれでも使ったことのあるタグを利用しているだ
けだ。つまり、今さらながらのテーブルを使ったデザインだ。ただしここでは表の色指定をうまく使うことで、テーブルだということをわかりにくくしている。スタイルシートはまだよくわからない、ブラウザーで差が出るのでいやだという人は、「最新のHTML」ではないが、こんな技も使ってみてはどうだろう。

d<TD ALIGN="left" VALIGN="top" WIDTH="108" HEIGHT="108"BGCOLOR="black">……</TD><TD ALIGN="left" VALIGN="top" WIDTH="108" HEIGHT="108"BGCOLOR="white">……</TD>

一見してわかる、非常に単純なHTML だ。正指定できるのは「top」、「middle」、「bottom」で、トを実現するうえでは、まだまだ実用性が高いテ

方形を3×3に9つ並べたテーブルを作成し、そのそれぞれ上、真ん中、下を表す。ALIGN 属性とクニックといえるだろう。

背景を左上から右下に、白、黒、白、黒、と指定

VALIGN属性を組み合わせれば、次のように「左多くの文字情報を含んだページなら、テキストしかしているだけだ。だが、これだけできれいな市松右は右、上下は下」と指定できる。

表示できないブラウザーのことも考えてレイアウトをするべきだが、この例のように、デザイン重視、模様ができあがる。ここでは四隅の黒いセルに、黒地の画像を貼り付けていて、テーブルとその外<TD ALIGN="right"

イメージ重視で初めからテキストブラウザーを対象側との境界がわかりにくくなっているので、テーブ

VALIGN="bottom" ……>としない場合は、ある程度なら許されるだろう。へたにスタイルシートで作成して、ブラウザーによっルであることを感じさせない。枠線を付けず、背景色を変えるだけで、クールなテーブルレイアウト

また、白地のセルの文字は、次のように<FONT>て見え方が違ってくるよりは、ずっと実用的ではに早変わりするというわけだ。

タグで「Impact」フォントを指定している。

ないだろうか。ページを見る人の層に合わせたテクニック選び、それがうまいTIPSというものだ。

白地の部分には文字を配しているが、よく見ると、<FONT FACE="Impact">

それぞれ左上、右上、右下、左下、と文字配置

black russian</FONT>の場所が違う。これは<TD> の中のALIGN属性とVALIGN属性で指定している。ALIGN属性にHTML4.0化の流れの中で、テーブルをデザインに指定できるのは「left」、「middle」、「right」で、利用することはあまり歓迎されていないが、IEとネ

それぞれ左、真ん中、右を表し、VALIGN属性にットスケープナビゲーターで共通に見えるレイアウ

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

T IPS & T R ICKS

4
文字に画像を載せる
4.0
左のサンプルの文字をよく見てほしい。文字の形の上に画像が載っているのがわかるだろう。こうした文字は、グラフィックソフトを使ってロゴ用の画像を作らなければできなかったのだが、ここでは文字の背景に画像を敷きつめるときのように、背景用の画像を用意してHTML内にテキストを書いているだけなのである。いったいどのようにすればよいのだろうか。実は以前に何度か紹介してきたIE 4 のビジュアルフィルターを使っているのだ。フィルターを使えば、文字を反転させたり、影を付けたりすることができるが、このような「透明化効果」を付けることもできるのだ。それではさっそく見てみよう。

d<DIV STYLE="position: absolute; top: 100; left:140; width:280; height: 100;
1
background-image: url（ image1.gif）;"></DIV> ……1<DIV STYLE="position: absolute; top: 100; left: 140; width: 280; height: 100;
font-size: 72pt; font-family:Arial; font-weight: 900;
2
filter: Mask（Color=#FFFFFF）;">HTML</DIV> ……2

一見するとよくわからないサンプルだが、背景まず、<DIV>タグで背景画像だけのオブジェクトを明になる。このオブジェクトを1で作った画像の上色を白以外の色に変えてみると、その種がよくわ作る（ソース中の1）。スタイルシートで「position」に載せれば、画像が文字の形に切り抜かれたようかるだろう。文字に載せるための画像を先に配置を「absolute」とし、指定したとおりの位置にオに表示される。

してから、フィルター効果を指定した文字をその上ブジェクトを配置できるようにする。8月号のTIPS

なお、ここで注意するのは、画像用のオブジェクトに載せているのである。

4でオブジェクトを動かすときにも説明した。
「top」と文字用のオブジェクトをまったく同じ位置、同と「left」
でオブジェクトを配置する座標を、「width」じ大きさにしておくことである。そうしないと、画と「height」でオブジェクトの大きさをそれぞれ指像がはみ出たり、文字に画像が載らなかったりと定する。さらに「background-image」で背景画いったことが起きる。

1

像を指定しておく。これによって画像だけの<DIV>タグができあがる。

位置や大きさの調整を何度もテストする必要があるが、マスクの色を「#000000」などとしてページ

2266 INTERNET magazine 1998/10

次に、文字のオブジェクトを作ろう（ソース中の2）。の背景色と違う色を指定すれば、位置がわかりやここで使うのはビジュアルフィルターの一種であるすくなり、調整しやすくなるだろう。調整が終わっ「Mask」だ。
「Mask」は、色が付いている部分をたら、背景色を同じ色に戻せば画像を載せた文字透明にするフィルターで、もともと透明だった部分が表示されているように見える。画像や文字を変には「Color」で指定した色が塗られる。これによえたりして、いろいろ試してみると面白い。なるべり、<DIV>タグで囲まれた「HTML」という文字にく文字を太くしたほうがはっきりした効果を得られは白い背景色が塗られ、文字の色だった部分は透るだろう。

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

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

今月のテー

ママウスイベントを制する
マウスイベントといってもいろいろあるが、その中でもよく使われるのが「クリック」だろう。HTML4.0
でもonClickなどのマウスイベントがタグの属性で 指定できるようになってきたが、属性を付ける方法ではタグ単位でしか指定できない。ウィンドウ全体でマウスクリックを処理する場合はどうすればよいだろうか？
そこで今月は、マウスイベントに関するパズルに挑戦していただく。トリックがわかったらすぐに解答を送ってきてほしい。正解者には抽選で1名にオリジナル 折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテー
マ マウスイベントを制する にチャレンジ！

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

Q U E S T I O N

1 ダブルクリックでレイヤーを動かせ！

4.0

まず1問目。左のサンプルは、最初に左上にレイヤーで猫の絵が表示されている。ブラウザーのウィンドウ内をダブルクリックすると、ダブルクリックした場所に猫が移動する。しかも、特定の位置をダブルクリックすると移動するのではない。ウィンドウ内のどこをダブルクリックしても同じことが起こるのだ。さて、いったいどのようにしているのだろうか？

もちろんスタイルシートやレイヤーで表示、非表示の属性を付けたタグを並べて切り替えているのではない。また、左クリックを2回カウントしてダブルクリックとして認識するということもしないこと。数行のスクリプトを書くだけでよい。さぁ、やってみよう。
ヒント

Q U E S T I O N

ナビゲーターでイベントからマウスの位置を得るには……

2 ダブルクリックの位置を調べろ！

4.0

2 問目も同じレイヤーを動かすイベントだ。今度は左上に2つのレイヤーで2匹の猫が用意されている。ブラウザーのウィンドウの左半分でダブルクリックすると上の猫が、ウィンドウの右半分でダブルクリックすると下の猫がそれぞれマウスの位置に移動する。1問目と同じくウィンドウ内のどこをダブルクリックしても同じことが起こるようにしたい。また、ウィンドウの大きさをどのように変えても左半分と右半分でそれぞれの猫が移動するようにしたい。さて、いったいどうすればよいだろうか？

第1問、第2 問ともに、画像には何を使ってもかまわないので、好きな絵をメールに添付して送ってほしい。
ヒントナビゲーターでウィンドウの大きさを表す
プロパティーは……

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

INTERNET magazine 1998/10267

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