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

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

ついにマッキントッシュ対応のインターネットエクスプローラ4.0日本語版が出荷された。この製品によってマッキントッシュユーザーもスタイルシートやレイヤー、フ3.0ローティングフレームの恩恵にあずかれるのだ。このコーナーではウィンドウズユー
4.0

ザーだけでなくマッキントッシュユーザーも楽しめるように紙面を充実させていくつもりだ。今月も高度なTIPSから誰にでもすぐできるTRICKSをお届けする。

3.0

4.0

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

4月号「HTMLパズルに挑戦しよう」の解答
問題を難しく考えすぎると簡単なことを見落としてしまうことがある。今回はそんなパズルだったのではないだ
ろうか。特に1問目は解答を見て驚く人がいるかもしれないほど簡単だったはずだ。ウェブページの制作はアイデア次第ということがわかる解答をさっそく発表しよう。

A N S W E R

1 建物、地形の簡易画像を表示させろ！

悩んだ人もいたかもしれないが、実は簡易画像とはフォントのことだ。ここで使われているフォントはIE4.0と同時にインストールされる「webdings」というもので、画像として十分使える。
<FONT COLOR="red" FACE="webdings">B</FONT><FONT COLOR="blue" FACE="webdings">C</FONT><FONT COLOR="brown" FACE="webdings">D</FONT><FONT COLOR="gray" FACE="webdings">F</FONT><FONT COLOR="silver" FACE="webdings">G</FONT><FONT COLOR="yellow" FACE="webdings">H</FONT><FONT COLOR="green" FACE="webdings">S</FONT>
戸田順也さん、北出誠さん、たかすさん、ほか多数

A N S W E R

2 簡易画像を半透明で表示させろ！

ヒントは2月号で紹介したTIPS「画像にさまざまな表示効果を付ける」に隠されていた。透明度を指定するには「Alpha」というフィルターを使えばいい。あとは「Opacity」で透明度を指定するだけだ。
<DIV ALIGN="center" style="filter:Alpha(opacity=40,enabled=1);"><FONT COLOR="red" FACE="webdings">B</FONT><FONT COLOR="blue" FACE="webdings">C</FONT>：
省略：<FONT COLOR="gold" FACE="webdings">S</FONT>

328 INTERNET magazine 1998/5

岸本政信さん、佐藤義和さん、青木正幸さん、高砂直純さん、ほか多数

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

T IPS & T R ICKS

1
ランダムにアニメーション画像を表示させる4.0
紙面では伝えにくいのだが、右の画面の指でさした画像はWWW
ブラウザー上のあちこちにランダムに現れ、しかも上下に動いているというものだ。ダイナミックHTMLを使えば、高価なショックウェーブ作成ソフトなどを使わなくても複雑なアニメーション効果を得られる。しかもアニメーション画像を決められた場所ではなく画面のあちこちに出現させることができるのだ。ちょっと長いスクリプトが必要になるが、あまり難しいことは考えないで、使い方を覚えてしまえばすぐに実現できる。今あるページに追 加 するのも難 しくはない。このTIPSを活かしてさらに面白いページを作ってみよう。

d<body onLoad="moveLayer()">if (child.top > child.clip.height){
updown = false;
moveIt();}if(updown) child.moveBy(0,2);else child.moveBy(0,-2);<layer ID="parent" clip="0,0,100,100"><layer ID="child" top=100 left=0 clip="0,0,100,100"><img src="chara.gif"></layer></layer><script language="JavaScript">
var updown = false;
var parent = document.layers["parent"];
var child = parent.document.layers["child"];
var count = 0;function moveLayer(){if (child.top <= 0){
updown = true;}

このTIPSでは入れ子にしたレイヤーを使っている。ここでは入れ子になっている外側のレイヤーを「親レイヤー」、中側のレイヤーを「子レイtimerID = setTimeout("moveLayer()",10);if(count>5)clearTimeout(timerID);}
function moveIt(){var px = Math.random()*(innerWidth - child.clip.height);
var py = Math.random()*(innerHeight - child.clip.width);parent.top = py;parent.left= px;
count++;}</script>

画面上に表示されない。
<layer ID="parent" clip="0,0,100,100"><layer ID="child" top=100 left=0の位置を変えるプログラム「moveIt()」を呼ぶようになっている。この動作によって次に親レイヤーを表示させる位置を変えている。この表示位置

ヤー」と呼ぶことにする。

clip="0,0,100,100">...</layer>

はWWWブラウザーの表示領域の大きさと子レイ

親レイヤーは子レイヤーを乗せてランダムに場所</layer>

ヤーの大きさをもとに「Math.random()」というプログラムを使ってランダムに決めている。

を移動し、子レイヤーは画像を表示しながら見え隠れする仕掛けになっている。

Javaスクリプト部分の「moveLayer()」というレイヤーには「clip」と呼ばれる表示領域を指定プログラムは子レイヤーと親レイヤーの位置関係

var px = Math.random()*(innerWidth -する値 がある。 親 レイヤー「 p a r e n n t 」 ではから子レイヤーを上または下方向に2ドットずつ移child.clip.height);「clip="0,0,100,100"」として、左上から100×動させるというものだ。このプログラムは「set1 0 0 の正 方 形 を表 示 領 域 とする。子 レイヤー

Timeout」で10ミリ秒ごとに繰り返し実行され、なおこのサンプルでは、「count」を使って子レイ「 c h i l d 」 は 「 t o p = 1 0 0 」、「 l e f t = 1 0 0 」、

子レイヤーが上に動けば親レイヤーの表示領域にヤーが5回表示されたら全体の動きを終了するよ「clip="0,0,100,100"」とする。topとleftは子レ入り、徐々に表示されていく。下に動けば徐々うにしている。ページに応じて適当に数字を変えイヤーの表示領域の始点（左上）を指定するもに消えていく。てみるといいだろう。

ので、親レイヤーの左上を基準として指定していmoveLayer()の中で子レイヤーが完全に隠れきっる。この指定によって初期状態では子レイヤーのたとき、 すなわち「 if (child.top > child.clip.

表示領域は親レイヤーの表示領域からはずれてheight)」の条件を満たしたときに、親レイヤー

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

T IPS & T R ICKS

2
ダイナミックにアウトラインを表示させる
4.0
ウェブサイトにどんどんコンテンツを追加していくと次第に巨大化していく。コンテンツが増えるのはいいのだが、それに伴ってどうしても目的のコンテンツを見つけにくくなってしまう。これを解決するために画面の左端などにウェブサイトのアウトラインを表示させる場合が多い。しかし、アウトラインを表示できるスペースは限られていて一度にすべてを表示できない。そこで限られたスペースを有効に使うために、ダイナミ
ックHTMLを使ってアウトラインの文字をクリックするとサブカテゴリーを表示し、もう一度クリックするとサブカテゴリーを隠す方法を紹介しよう。

1<SCRIPT LANGUAGE="JavaScript">function checkExpand() {var sElem = event.srcElement;dif ("" != sElem.id) {var ch = sElem.id + "Child";
var el = document.all[ch];if (null!=el) el.style.display = "none" == el.style.display ? "" : "none"
event.returnValue=false;}}</SCRIPT>

2<SPAN onclick="checkExpand()" ID="Browser">主なブラウザー</SPAN><DIV ID="BrowserChild" style="display:none"><BR><UL><LI><B><A HREF="http://home.netscape.com/">Netscape Communicator</A></B><LI><B><A HREF="http://www.microsoft.com/ie/">Internet Explorer</A></B><LI><B><A HREF="http://www.ncsa.uiuc.edu/SDG/Software/mosaic-w/">NCSA Mosaic</A></B></UL></DIV>

さっそく内容を見ていこう。なおここでは説分に「Browser」という名前を付けている。

「BrowserChild」という名前を付けている。注
意しなければならないのは、この名前は必ず先ほ明のために一部を簡略化してある。
まず1のタグから説明する。この部分は<HEAD><DIV ID="BrowserChild" style=

どの<SPAN>タグに付けた名前に「Child」を足〜 </HEAD>に記述する。

"display:none"><BR>したものにしなければならないということだ。

「checkExpand()」はアウトラインのサブカテゴ<UL>

サンプルスクリプトでは文字をクリックして表示さリー部分が表示されていない場合には表示させ、<LI><B><A HREF=せる部分は<UL>タグを使ったリストだが、<DIV>表示している場合には隠すというプログラムだ。

"http://home.netscape.com/">

タグを使って囲めるものなら画像でも文章でも使え

次に2のタグについて説明する。

Netscape Communicator</A></B>

る。アウトラインのような単純なものだけでなくア<LI><B><A HREF=

イデア次第ではさまざまな場合に応用することも<SPAN onClick="checkExpand ()""http://www.microsoft.com/ie/">

考えられる。たとえば文字をクリックすると、そID="Browser">主なブラウザー</SPAN>

Internet Explorer</A></B>の文字の解説文や画像が出てくるものだ。自分（省略）なりのアイデアでこの特性を活かしたページを作

この部分はスタイルシートなどでよく利用する</UL><SPAN>タグだが、「onClick」によって<SPAN></DIV>ってみてほしい。

〜 </SPAN>で囲まれた部分をクリックすると先ほど定義した「checkExpand()」を呼び出すこ<DIV> 〜 </DIV> で囲まれた部分がサブカテゴとになる。さらにID属性によってこの囲まれた部リーとなる部 分 だ。ここでもI D 属 性 によって330 INTERNET magazine 1998/5

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

T IPS & T R ICKS

3
文字をフェードイン、フェードアウトさせる
4.0
以前に画面の背景色をフェードインやフェードアウトさせるというトリックをパズルのコーナーで出題した。今回はその逆に、前景つまり文字をフェードインやフェードアウトさせるテクニックを紹介しよう。画面右下のボタンをクリック
すると文字が浮き出たり消えていったりするものだ。このTIPSはこのコーナーではもうおなじみのダイナミックH T M Lを使っている。
レイヤー機能とJavaスクリプトをうまく組み合わせたものだ。一見複雑に見えるが、そんなに難しくはない。文字と表示位置の指定さえ変えればすぐにでも使えるス
クリプトなので、ぜひ試してみてほしい。

d<form><input type="button" value="on/off"
onClick="msgFade()"></form><layer ID="layer1" left=100 top=100 width=200
visibility=show></layer><script language="JavaScript">
var fade = true;
var layer1 = document.layers["layer1"];

dfade = false;}else{
col_val = "0123456789abcdef";
fade = true;}for(i=0; i<col_val.length; i++){col = col_val.charAt(i);col+=col+col+col+col+col;layer1.document.open();layer1.document.fgColor=col;layer1.document.write ("ここに文章を書きます");layer1.document.close();}}</script>function msgFade(){if(fade){col_val = "fedcba9876543210";d

まず最 初 に文 字 を表 示 させるレイヤーを作ードアウトの場合の色を変えるように設定しておfor文の内容は16回繰り返され、フェードインのる。レイヤーの初期値は空にしておく。レイヤー

く。col̲valの値はおまじない程度に考えておいときは色の値であるcolが徐々に大きくなり、フには「I D = " l a y e r 1 " 」と名 前 を付 け、必 ず幅ていい。

ェードアウトのときは小さくなるので、見た目には文字が浮き出たり徐々に消えていったりするよ（width）を指定し、文字を表示させる位置をif(fade){「left」と「top」で指定しておく。

うになるわけだ。

続いてフェードインとフェードアウトの表示効果

col̲val = "fedcba9876543210";

なお、このmsgFade()を呼び出すためのボタンはをもたらすJavaスクリプトに取り掛かる。

fade = false;

上記のようにFORMのボタンでもいいし、アンカまずフェードインとフェードアウトを判別するた}else{ーやレイヤーのonClickイベントを使ってもいい。

col̲val = "0123456789abcdef";

めの値 「f a d e 」と先 ほどのレイヤーを指 す値

fade = true;「layer1」を作る。
}
var fade = true;
var layer1 = document.layers["layer1"];

最後のfor文では、変数col̲valの値を使って16次 に今 回 のメインの仕 掛 けとなるプログラムの前景色「fgColor」に「col」を入力し、フェ進数で表現される色値「col」を作り、「layer1」「msgFade()」を作る。
「col̲val」は文字の色をードインまたはフェードアウトさせる文 字 を決める変数だ。if文を使ってフェードインとフェ「document.write」で表示させる。

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

INTERNET magazine 1998/5331

T IPS & T R ICKS

4
枠線のデザインを自在にアレンジする
4.0

4.0

画像や文字に枠線を付けると、それほどインパクトのないものがあたかもすばらしいもののように見えることがあるから不思議だ。というのは大げさにしても、枠線によって多少見栄えがするようになるのも事実だ。しかし、これまで枠線に飾りを付ける場合にはわざわざ複雑な表組みを使うなどの面倒な方法をとるしかなかった。そこで今回は簡単に使える枠線をアレンジする方法を紹介する。このTIPSは枠線の四辺の色やスタイル、太さなどを自由に変えることができるものだ。今まで短調だったページも枠線の使い方次第では見栄えがするものに簡単に変えられる。レイアウトの凝ったページで活躍しそうなTIPSだ。

d<DIV STYLE="border: thick solid moccasin;
position:absolute; top:30; left:30; width:150; height:50">
CSS / Border</DIV>

これまで枠線を作ろうとした場合にはわざわ
ざ<TABLE>タグを使って表を作成する必要があ「スタイルの部分」がとる値は、次のようになっのような定義された色の名前だ。ている。

今までに説明した例では枠線の四辺が同じ指定になってしまうが、四辺を別々に設定することもった。しかし、スタイルシートを利用することにできる。

よって簡単にさまざまな枠飾りが利用できるよう

solid：実線になった。しかも今回のTIPSはIE4.0でもネット

double：二重線

スケープナビゲーター4.0 でも両方使えるので、groove：溝のような線

border-top: 幅 スタイル 色

ほとんどのユーザーが表示できるといっても過言ridge：浮き出た線

border-bottom: 幅 スタイル 色ではない。それではさっそく内容を見ていこう。

inset：インセット

border-left: 幅 スタイル 色

outset：アウトセット

border-right: 幅 スタイル 色<DIV STYLE="border: 幅 スタイル 色 ……>
ほかに「dotted（点線）」と「dashed（破線）」「border-top」、「border-bottom」、「border-まずは枠線の幅の指定方法を解説する。

も定義されているが、現段階ではIE4.0、ネット

left」、「border-right」はそれぞれ枠線の上部、「幅」の部分がとる値は、「thin」、「medium」、

スケープナビゲーター4.0共に実装されていない

下部、左部、右部の指定を個別にするときに用「thick」でそれぞれ「太い」、「中間」、「細い」

ようだ。

いる。

を表している。ほかにも10pxや1.5cm、12ptな最後に枠線の色の指定方法を解説する。

このTIPSとスタイルシートを組み合わせれば枠組どの単位でも指定することができる。

「色」の部分がとる値は「#CCFF00」のようなみを自由に配置することができる。

次に枠線のスタイルの指定方法を解説する。

16進数で指定するRGBカラーか「moccasin」

332 INTERNET magazine 1998/5

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

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

今月のテーマ

反転表示を制する
今回のパズルはちょっとした復習のようなものになっている。今までもいろいろな場面で紹介してきた「レイヤーの配置と動作」がテーマだからだ。レイヤーはこれからウェブペー
ジ制作者を目指す人にとって必須の機能であることは間違いない。レイヤーを使うポイントはシンプルイズベスト。できるだけ短いスクリプトで注文どおりの動きを表現しよう。そこで今月はレイヤーを駆使した文章の反転表示に挑戦していただく。トリックがわかったらすぐに解答を送ってきてほしい。正解者には抽選で1名にオリジナル腕時計をプレゼントさをやわらかくして、今月のテーマ 反転表示を制する にチャレンジ！

m ip-cdrom@impress.co.jp

文章を
ダイ
ナミッ
ク

1

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

紙面でに反はわか転TIP
表りづS示
ら&いさせろTRICが、右KS」
がら消の画面！
部分
えはてに「いあiNTEっているグレるようRNEる。そーの帯になっT MA
れ状てGにのージをい
A連部
ZINEる。第
れてこ分が左作るこHTMの部
1問
かL
らとは分しない
右だ
この背景に移の文章。今という動しな
回使
色とがダう
文
条イ
いてほレ
字
件
ナミッ
イヤー
色が反を付けしい。
クには転す
る
2。
つ
反多だのペー
し転
少高かもス
けで、表示度なテ
ジをするペ
ク
レ
リ
イ
探ク
プ
ヤっニある人トはでーを入てみれ
ックをはぜきる
れ子にば簡必要ひだ単と挑けに解けするがシンプ戦してるだ、こルに書
ほしろのいうコ。
。J aーナーva スの 去過ク
リ
プトに自信のせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭Q U E S T I O N「HTMLパズルに挑戦しよう」
宛 先

4.0

文字の色が1文字ずつ変わっているのだろうか、
それとも……

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

4.0

続いて1問目で使ったダイナミックに反転表示している部分をWWWブ
ラウザーの画面の右下に隙間なくぴったりとくっつけて表示させてみよう。
WWWブラウザーがどんなサイズで使われていても、常に右下に表示されるようにしてほしい。表示される文字が画面から切れたりしてはならない。
反転している部分すべてがWWWブラウザー内に収まるようにぴったりと配置してほしい。1問目が解ければすぐにでも解けるだろう。1問目が難しいという人は、WWWブラウザーの画面の右下に隙間なく画像が表示されるものでも正解にしよう。ただしレイヤー機能を使ったものに限らせていただく。
ヒントブラウザー画面の大きさを得るには……

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

INTERNET magazine 1998/5333

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