このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性の誰よりも早く最新のHTMLを使ってみたい問題だ。そこでこのコーナーでは、TIPSご白畑 真 川田 哲とにブラウザーの対応状況をアイコンで表している（9月10日現在）。これを参考に使用するWWWブラウザーを選んでほしい。

インターネットマガジンのリニューアルしたホームページの各コーナーでは、ありがたいことに、この連載に関するご意見が多かった。質問やご要望のある人

3.0

はホームページの「Q&A」や「読者アンケート」も使ってみてほしい。
「自分の4.0

ページではこんなTIPSを使っている」という投稿も歓迎だ。それでは今月も1行で書けるTIPSから少々長めのスクリプトまでいろいろとお届けしよう。

3.0

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

インターネットマガジンホームページ jhttp://internet.impress.co.jp/
4.0

ネットスケープナビゲーター4.0以上

10月号「HTMLパズルに挑戦しよう」の解答
今回は、応募者、正答者ともに1名と少なかった。ウィンドウ全体でのダブルクリックの処理は、ナビゲーター4.0のイベントハンドラーを利用すればそれほど難しくない。わからなかった人は、解答を見てさっそくやってみよう。いったんわかってしまえば、応用もいろいろと効くはずだ。

A N S W E R

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

ウィンドウ全体でマウスのダブルクリックを認識させるには、「document.onDblClick」にネコを動かす関数を指定する。また、ダブルクリックした位置は、関数の引数のプロパティー「ev.pageX」（X座標）、「ev.pageY」（Y座標）でわかる。
<SCRIPT LANGUAGE="JavaScript">function warp(ev) {document.layers["neko1"].moveTo(ev.pageX, ev.pageY);}document.onDblClick = warp;</SCRIPT>：<LAYER NAME="neko1" TOP=0 HEIGHT=0 HEIGHT=44 WIDTH=60><IMG SRC="image̲a.gif">Warp Cat</LAYER>

A N S W E R

正解者：大内勇さん

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

ナビゲーターでウィンドウの幅を得るには、「innerWidth」を使う。ダブルクリックした位置を「innerWidth」の半分の値と比べればよい。
function warp2(ev) {if (ev.pageX < innerWidth / 2)
document.layers["neko1"].moveTo(ev.pageX, ev.pageY);
else
document.layers["neko2"].moveTo(ev.pageX, ev.pageY);}

282 INTERNET magazine 1998/11

正解者：大内勇さん

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

T IPS & T R ICKS

1
見出しを飾る
4.0

4.0

見出しを表すタグ< H 1 > 〜 < H
6>は、HTMLの入門書では最初のほうに出てくるが、実際に自分のページで使っている人は少ないのではないだろうか。入門書どおりに見出しを順番に付けたくても、文字が大きすぎたり小さすぎたりして、思うようなデザインにならないからだ。
画像を作って見出しの代わりにしている人も多いだろう。ところが左のサンプルを見てほしい。HTMLの書き方としては、単純に<H1>タグと<H2>タグを並べているだけなのだ
が、1 番目の見出しは黒 い背景に白い文字、2番目の見出しは左と下に水色の罫線のようなものが付いている。これがわかれば、見出しのためにいちいち画像を作る必要はもうない。

dH1 { background-color: black; color: white; border-style: none; border-width: 1;
margin-left: 0px; padding-left: 16px;
font-size: 20pt; font-weight: bold; font-family: Verdana; }H2 { border-style: solid; border-color: #00C0C0; border-width: 0 0 6 32;
margin-left: 32px; padding-left: 16px;
font-size: 14pt; font-weight: bold; }このコーナーの読者ならおわかりのように、スタイルシートを使っている。上のスタイルシートを

border-style: solid;

指定を加えれば、IEと同じような表示になる。いborder-color: #00C0C0;

わばナビゲーターを「ごまかす」わけだ。

< S T Y L E > 〜< / S T Y L E > で囲 い、 H T M Lのborder-width: 0 0 6 32;<HEAD> 〜</HEAD> の中に置けば、<H1> やborder-style: none; border-width: 1;<H2> を使った昔ながらのページが一瞬にして新margin-left: 0px;

しいデザインに切り替わる。

「border-style:solid」
で枠線を表示させ、「border-color」で枠線の色を指定する。
「border-width」

あとは、「p a d d i n g - l e f t 」で左 に間 隔を空け、には4つの数字をスペースで区切って並べ、上、右、まず<H1> に指定したスタイルシートを見てみよう。

「font-size」、「font-weight」、「font-family」で下、左の枠線の太さを変えて指定すれば、枠線を背景色を黒に、文字色を白にする指定は以下のフォントの大きさ、太字、フォントの種類を指定す飾りのように使うことができる。あとは、「margin-部分だ。ここは基本中の基本だ。

る。ただし、ご存じのようにナビゲーターの場合

left」、「padding-left」、「font-size」、「font-は、日本語のページではフォントの種類の指定はweight」で余白やフォントを指定するだけだ。

background-color: black; color: white;

有効にならない。
スタイルシートを使えば、単純なHTMLでもこれだ

IEでは、これでサンプルのような表示になるが、ネ

次に<H2> のスタイルシートを見てみよう。水色のけのことができる。背景色や枠線を工夫して、きれットスケープナビゲーターでは、文字の部分の背飾りは、実は単なる枠線で、次のように指定していな見出しを作ってみよう。

景が黒く塗られるだけで、サンプルのように黒いいる。

帯状にならない。そこで次のように枠線や余白のインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/11283

T IPS & T R ICKS

2
背景画像を固定する
3.0

4.0

スクリプトやスタイルシートを使ったやや難しいTIPSがこれまで続いてきたが、まだ紹 介していないHTMLのタグや属性もまだ残っている。ここではそうした簡単なTIPSを紹介しよう。自分のページに背景画像を指定している読者は多いと思うが、ウィンドウをスクロールすると背景画像もいっしょにスクロールされてしまうことに不満を持ったことはないだろうか。たとえば
大きなJPEG 画像など凝った画像を使っているページの場合、背景までスクロールされてしまい、意図しなかった空白の領域ができてしまうことがある。そこでHTMLの属性を使って背景の画像を簡単に固定する方法をお見せしよう。

d<BODY BACKGROUND="back.jpg" BGPROPERTIES="FIXED">

まずは上のサンプル画面をよく見てほしい。2

ここで重要なのは、背景にどのような画像を使うれば、まるで映画の最後に流れるスタッフロール

つの画面を比べてみると、本文の文字はスクローかという点だ。縦の方向にパターンが繰り返されのような面白いページができあがる。今あるペールされているが、背景の画像はスクロールされず、ているような画像だと、スクロールしてもまったくジにスタッフロールのページを付け加えてみるのそのままの位置に固定されていることに気が付く

変化がないので、背景の画像を固定する意味がも面白いかもしれない。これをヒントにユニークなだろう。背景は本文とともにスクロールされるもなくなってしまう。テクスチャーや小さな画像を使ページ作りにチャレンジしてみてほしい。のだと思っている人が多いかもしれないが、必ずった場合にも、変わりばえのしない結果になってしもそうではないのだ。

しまうだろう。

なお、背景画像を固定する効果は、以下のようにそこで、ここは1つ思い切って大きなサイズの画像

スタイルシートの「background-attachment」をこの効果を出すためには、難しいHTMLを書く必を背景に使ってみてはどうだろうか。大きなサイズ使って出すこともできる。

要はない。やりかたは非常に単純だ。背景の画像の画像を使うと重いページになってしまうのが心をBACKGROUND属性で指定している<BODY>

配だが、圧縮率を高めにした JPEG 形式で画像<STYLE>

タグに「BGPROPERTIES」属性を付けるだけだ。

を保存すれば、10数キロバイトのサイズで収まる

BODY { background-attachment: fixed;< B O D Y > タグの中 に「 B G P R O P E R T I E S =ことが多い。背景にするなら画質が多少悪くてもbackground-image: url(back.jpg) }"FIXED"」という属性を付け加えるだけで、ウィそれほど気になることもないだろう。

</STYLE>

ンドウをスクロールしても背景の画像はスクロールせずに固定されたままになる。

背景画像を固定する効果と1997年12月号で紹介した「画面を自動スクロールさせる」を併用す

284 INTERNET magazine 1998/11

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

T IPS & T R ICKS

3
カウントダウンタイマーを表示する
4.0
以前にこのコーナーでは、指定した日付まであと何日かをカウント
ダウン表 示 するT I P Sを紹介した（1997年11月号）。今回は、1秒ごとにタイマーを表示するテクニックを紹介しよう。左のサンプルは、15秒待つと違うページへジャンプするようになっているが、ジャンプするまでに中央の数字が1 秒ごとにカウントダウンして表示される。このようなタイマー表示の方法がわかれば、サンプルのような使い方のほかにもいろいろな応用がきくはずだ。もちろん15秒という数字は決まったものではなく、10秒、1分などのように任意に時間を設定して表 示 できるように作られている。それではさっそく見てみよう。

d1<SCRIPT LANGUAGE="JavaScript">function setTime (t) {lastSec = t;tID = setInterval ('graphicalTimer ()', 1000);
timerDisplay.innerText = lastSec;}
function graphicalTimer () {lastSec - -;timerDisplay.innerText = lastSec;
if (lastSec == 0) {clearInterval (tID);location.href = "next.html";}}</SCRIPT>

2<DIV ALIGN="CENTER" ID="timerDisplay"
STYLE="font-size:120pt; font-family:Arial;font-weight:800;"></DIV>3<BODY onLoad="setTime (15);">

すれば、まるでストップウォッチのような効 果を出このTIPSで作成した関数は2 つある（ソース

次に関数「graphicalTimer」を見てみよう。まず

1）。1つは時間を設定してタイマーを起動する関変数「lastSec」の値を1つ減らし、「setTime」すこともできる。たとえば、関数「setTime」を次数「setTime」。もう1つは1秒ごとに数字の表示の場合と同じく「innerText」を使って表示させのように変える。

を変える関数「graphicalTimer」だ。

る。これで1秒ずつカウントダウンしていくタイマーが表 示される。「 l a s t S e c 」が 0 になったら、

lastSec = t * 10;まずは関数「setTime」から。設定する秒数を引「clearInterval」にタイマー変数「tID」を指定し

tID = setInterval ('graphicalTimer ()',100);

数の「t」から変数「lastSec」に保存する。次にてタイマーをクリアし、適当な処理を書く。ここでtimerDisplay.innerHTML = lastSec / 10;「setInterval」で関数「graphicalTimer」を1000は違うアドレスへジャンプするスクリプトを書いてミリ秒、つまり1秒ごとに呼び出すように指定する。

いる。

関数「graphicalTimer」では次のようにする。

「setInterval」から返ってくる「tID」は「タイマー変数」というもので、あとでタイマーをクリアするた

この2つの関数を書いたら、3 のように<BODY>めに使うことになる。設定した秒数を最初に表示

タグの「onLoad」で関数「setTime」を呼び出しておきたいので、今までに何度か紹介してきたす。呼び出すときには、設定する秒数を引数に指定する。たとえば1分なら、「setTime (60)」とな

こうすれば、タイマーを0.1 秒ごとに表示できる。

TIPSを使う。2のように空の<DIV>タグを用意し、IDを付ける。スクリプトで「innerText」に「lastる。

追いつかなくなってしまい、タイマーが正確ではな

ただし、あまり短くすると、遅いマシンでは処理がくなるので注意しよう。

Sec」の値を入れて<DIV>タグの内容を変えれば、秒数が表示される。

timerDisplay.innerHTML = lastSec / 10;関数「graphicalTimer」を呼び出す間隔を短く

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

INTERNET magazine 1998/11285

T IPS & T R ICKS

4
キーボードで画像を動かす
4.0
これまでこのコーナーで何度も紹介してきた画像や文字などのオブジェクトを動かすTIPSは、どれもマウスを使って動かしたり、自動的にアニメーション表示を行ったりするものだった。せっかくそこまでできるのだから、キーボードでもオブジェクトを操作したいと思うだろう。
マウス操作では、かえって面倒になることもある。そこでここでは、どのキーが押されたかを判別してオブジェクトの位置を移動させるテクニックを紹介しよう。左のサンプルでは、テンキー（数字キー）を押すと鳥の画像を上下左右に動かすことができる。これを応用すれば、ホームページ上でゲームを作ることも夢ではないはずだ。

d1<SCRIPT LANGUAGE="JavaScript">function control () {pressKey =String.fromCharCode (event.keyCode);
switch (pressKey) {case '2':
tori.style.pixelTop += 10;
break;
case '4':
tori.style.pixelLeft -= 10;
break;
case '6':
tori.style.pixelLeft += 10;
break;
case '8':
tori.style.pixelTop -= 10;break;}}
document.onkeypress = control;</SCRIPT>

2<IMG ID="tori" SRC="tori.gif"
STYLE="position: absolute; left: 500;
top:250; width: 52; height: 46;">

このTIPSのポイントは、キーボード入力の処「String.fromCharCode」を使ってキーコードの理だ。キーボード入力を処理するには、「onkey

数値を文字に変換すればよい。変換したほうが直down」または「onkeypress」イベントを使う。こ

感的にわかりやすいスクリプトを書けるはずだ。

ら抜ける命令だ。
鳥の画像は、スクリプトで移動できるようにするために、2のように<IMG>タグ内にスタイルシート

こでは、キーを押しっぱなしにしたときでも画像を移動できるようにするために「onkeypress」を用押されたキーによって処理を分ける部分は、if 〜を書いて「position: absolute」とし、「left」といた。1のスクリプトの最後の行で「onkeypress」elseで書くと煩雑になるので、switch〜caseを「top」で最初の位置を指定する。ID属性で「tori」にキーボード入力を処理するための関数「control」使ってすっきりとした形のスクリプトにした。押さと名前を付ければ、スクリプトでは「tori.style.〜」を指定する。これにより、どれかキーを入力したとれたキーコードを文字に変換して変数「pressKey」を変化させて位置を移動できる。

きに必ず関数「control」が呼び出されるようになに入れておき、「c a s e 」の後ろに置 いた文 字とる。

「pressKey」が一致した場合に、「case」以下のここでは画像を移動しているだけだが、このスクリ処 理 が行 われる。 ここでは、「 p i x e l T o p 」やプトを応用すれば、キーを押したときに別の画像「pixelLeft」を増やしたり減らしたりして画像の位を出現させたり、メッセージを表示したりできる。

「event.keyCode」から押されたキーのコードを置を動かしている。これは8月号の「オブジェクトいろいろ挑戦してみよう。

取得する。得られたコードによって処理を分けれの位置を自由に動かす」でも紹介した。

1の中 の関 数 「c o n t r o l 」を見てみよう。まずばよいのだが、返されるコードは数値だ。キーボー

なお、各 case のあとで何かを処理したら、必ずドのどの文字がどのコードと対応しているかを調「b r e a k 」を入れておくことを忘れてはならない。

べ、数値によって分岐のしかたを考えなければなら「break」を入れないと、次のcase 以降の文も処ない。しかし、そんな面 倒 なことをしなくても、理されてしまうからだ。
「break」はswitchの中か

286 INTERNET magazine 1998/11

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

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

今月のテーマ

未対応タグを制する。
HTML4.0によってブラウザー間のタグの互換性問題が解消されようとしているが、互換性のないタグとして 有名なのがネットスケープナビゲーターの <BLINK> と IE の<MARQUEE>だ。この2つはHTML4.0でもサポートされない。しか「HTMLパズルに挑戦しよう」
宛 先し、ダイナミックHTMLを使えば、<BLINK>と<MARQUEE> の動作Dを2つのブラウザーで再現できる。そこで今月は、未対応タグに関するパ正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！

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

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

Q U E S T I O N

1 エクスプローラでBLINKを実現せよ！

4.0

まず第1問。左のサンプルは、インターネットエクスプローラのものだ。
「BLINK」という文字が点滅し、「MARQUEE」という文字が右から左へと流れていく。インターネットエクスプローラで文字をスクロールさせるには<MARQUEE>タグを使えばよいが、<BLINK>タグで文字を点滅させることはできない。しかし、サンプルを見ると、対応している<MARQUEE>を使って文字を動かしているのはわかるが、あたかも<BLINK>タグを使っているかのように文字の点滅も行われている。タグにスタイルシートを指定して数行のスクリプトを書けばOKなのだが、いったいどのようにすればいいだろうか？ この問題は、比較的簡単だ。
ヒン
トQ U E S T I O N

スクリプトで表示と非表示を切り替えるには……

2 ナビゲーターでMARQUEEを実現せよ！

4.0

続 いて第2問。左のサンプルは第1問のものとほとんど同じだが、今度はネットスケープナビゲーターで動作している。やはり「BLINK」という文字が点滅し、「MARQUEE」という文字が右から左へと流れていく。ネッ
トスケープナビゲーターでは<BLINK>タグを使って文字を点滅させることはできるが、<MARQUEE>タグを使って文字を動かすことはできない。スクロールを実現するには、ナビゲーター特有のレイヤーとそれを操作する
数行のスクリプトを書けばよいのだが、どのようにすればよいだろうか？ マーキーの幅にはあまりこだらわなくてもよい。また、スクロールさせる文字の長さはそれほど長くなくてもよい。
ヒントスクリプトでレイヤーの位置を動かすには……

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

INTERNET magazine 1998/11287

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