第 42 回

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

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

ここ数年「最新の標準規格を使ったテクニック」と言えばIE対応のものが圧4

倒的に多かったが、ネットスケープ6の登場で、IEでも使えない技を試す楽しみが増えてきた。それでは今月も、新しいのテクニックの数々をお届けしよう。

5

お詫び：先月号のTIPS 2と3は、マッキントッシュ版のIE 5も対応しているものでした。
お詫びして訂正いたします。

5.5

4

CD-ROM収録先 Å Magnavi→Ip0008→Htmltips+CD-ROM 今月号のTIPSをすべてCD-ROMに収録!!

6

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

7月号「HTMLパズルに挑戦しよう」の解答
今月はたいへん多くの方に解答を寄せていただいた。あまり知られていない技だと考えて出題したのだが、「A:hover」を使ったスタイルシートのテクニックは、かなり普及しているようだ。この問題以外にもいろいろな組み合わせを考えて、新しい技を開発してみよう。

A N S W E R

1 オンマウスで模様を表示させろ！

<A>タグにも背景画像を指定できるから、疑似クラスの「A:hover」に背景を指定す
れば、マウスを載せたときにリンクの背景画像を変えられる。何人もの解答者がサンプルよりもきれいなオリジナル画像を送ってくれたのはうれしい。
<STYLE TYPE="text/css">
A { background-image: url(); }A:hover { background-image: url(puzzle1gif); }</STYLE>
正解者：水原玲、坂部和久、ENDE、てらす、Masa
hiko Murata、Ga/you Urakami、山口雅仁、堀江、よしとも、なるる、外山真、杉本知子、よーすけ（敬称略）

A N S W E R

2 オンマウスで枠を付けろ！

「A IMG { スタイル }」とすれば、<A>〜</A>で囲まれた<IMG>タグのスタイルを指定できる。「A」を「A:hover」に変えて、枠線の太さ、種類、色を指定すれば、マウスを載せたときだけ画像の枠線が現れるようになる。
<STYLE TYPE="text/css">A IMG { border: 8px solid white; }A:hover IMG { border: 8px ridge red; }</STYLE>378 INTERNET magazine 2000/8

正解者：水原玲、坂部和久、ENDE、てらす、Masa
hiko Murata、山口雅仁、堀江、よしとも、なるる、外山真、杉本知子、よーすけ（敬称略）

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

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

T IPS & T R ICKS1
背景画像を操作する
5

1

5.5

6

2000年１月号で背景画像をスクロールさせるテクニックを紹介したのを覚えているだろうか。ス
クリプトでI E がサポートしているbackgroundPositionというプロパティーを使って背景画像の位置を変更したものだったが、新たにネットスケープ6 Preview Release 1でもこれが利用できるようになった。前号でも使ったgetElement
ByIdと組み合わせれば、IE 5でもネットスケープ6でも動作可能なスクリプトが書けるはずだ。このやり方がわかれば、背景画像の 位置だけでなく画像そのものや並び方まで変更できる。面倒なブラウザー判別なしに、背景画像を操作する方法を紹介しよう。

d<SCRIPT LANGUAGE="JavaScript">function setBackgroundImage (id, image) {document.getElementById(id).style.backgroundImage = 'url(' + image + ')';}
function setBackgroundPosition (id, position) {document.getElementById(id).style.backgroundPosition = position;}function setBackgroundRepeat (id, repeat) {document.getElementById(id).style.backgroundRepeat = repeat;}</SCRIPT>2<A onMouseOver="setBackgroundImage ('sample', 'image.gif');
setBackgroundRepeat ('sample', 'no-repeat');
setBackgroundPosition ('sample', 'bottom right')"
onMouseOut ="setBackgroundImage ('sample', null)"HREF="index.htm" >backgroundPosition='bottom right'</A>

スクリプトで 背景画像を扱うためのプロパテ

今回は背景画像の動きをわかりやすくするために、「backgroundィーには、画像ファイルを指定するばらばらに指定してみよう。ソース1の1番上の関に、「bottom right」で 右下に表示させているわ

Image」、画像の位置を指定する「background

数を見てほしい。おなじみの「getElementById」

けだ。画像の位置は数字で指定することもでき

Position」、そして画像の繰り返しパターンを決めを使って、操作するオブジェクト（<DIV>など）のIDるし、「left、right、top、bottom」の組み合わせでる「backgrounRepeat」などがある。おさらいにを拾い、そのオブジェクトの背景スタイルを変える

表 す こと も で きる 。マ ウ ス が は ず れ たときなるが説明しておこう。

わけだ。続く2つの関数も同じ仕組み。それぞれ、（onMouseOutイベント）には、「setBackgournd

backgroundImageには、「style.background

オブジェクトのIDと、スタイルのパターン（image、Image('sample', null)」とすれば背景画像を消去

Image = 'url (画像ファイル名)'」のように背景画像position、repeat）を引数で指定できるようにしてできる。のファイル名を指定する。backgroundPosition

おこう。なお、上記のソースでは省略しているが、いう画像ファイルを、「no-repeat」で繰り返さずには、「"20 30"」のように、垂直方向と水平方向「if (document.getElementById)」として、IE 5かソース1の3つの関数をばらばらにせずに、1つにの 位置をスペースではさんで背景画像の位置情ナビゲーター6であることを確認し、それ以外のブするには、「setBackgroundImage(id, image,報を指定しよう。backgroundRepeatで指定できラウザーでのエラーを防ぐとよい。

position, repeat)」のような関数を作り、4つの引る背景の繰り返しパターンには、「repeat」、「no-数にID、画像、位置、繰り返しを一度に指定 すrepeat」、「repeat-x」、「repeat-y」の4種類があここまでできたら実際にこの関数を呼 び出してみるようにして、3つの関数の中身をまとめればいい。

る。画像ファイル、位置、繰り返しパターンを組よう。たとえばonMouseOverイベントで呼 び出

さらに、「style.textAlign」などと組み合わせて使み合わせて使うことも、もちろんできる。

せばいい。ソース2の<A>タグでは、「sample」

えば、画像と文字が上下左右に動き回るアニメーというIDを付けたタグの背景に「image.gif」とションも簡単に作れるぞ。

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

プロパティー：プログラミング言語において、ある機能が持っている設定可能なオプションや属性のこと。スタイルシートでは「color」のようにスタイルの種類をプロパティーと呼び、JavaScriptでは「document.bgColor」の「bgColor」のようにオブジェクトが持っている変数をプロパティーと呼ぶ。
©1994-2007 Impress R&D

INTERNET magazine 2000/8379

T IPS & T R ICKS

2
サイドバーにページを登録する
6
ネットスケープ6の新しい機能に「サイドバー」というものがあるが、みなさんは使っているだろうか？ 日本語版の初期状態ではウィンドウの左 に「 検 索 」 や「WeatherEye」などが登録されていて、ブックマークを追加することもできる。このように便利な機能を持ったサイドバーだが、今回のTIPSでは自分が作ったページをサイドバーに追加する方法を紹介しよう。左のサンプルを見ると「impress magazine list」というタブが追加され、その中にページが表示されていることがわかる。このタブはJavaScriptを使って追加されたものなのだ。それでは、この便利なTIPSの使い方を解説しよう。

d1<A HREF="javascript://"onClick='window.sidebar.addPanel ("impress magazine list","http://internet.impress.co.jp/magnavi/ip0008/htmltips/sidebar.html")'>インプレスの月刊誌ホームページをサイドバーに追加する。</A>

2<A HREF="http://internet.impress.co.jp/" TARGET="_content">iNTERNET magazine</A>

ソースを見るとわかるように、このTIPSは2のURLを指定する。このURLは「http://」からつのHTMLファイルを使う。1つはサイドバーにの絶対アドレスで指定しなければならない。URL登録するためのリンクを張るページ（ソース1）を絶対アドレスで指定するということは、目的ので、このリンクをクリックすると、サイドバーにファイル（ソース2のファイル）がWWWサーバ登録するかどうかを問い合わせるダイアログボッ

ーにアップロードされていなければ実行できない

クスが表示され、「OK」ボタンを押せば目的のペということだ。インターネットに接続する前に自ージが登録され、「キャンセル」ボタンを押せば分のパソコン内で動作確認を行っても、サイドバ登録されない仕組みになっている。もう1つのフーには何も表示されないので注意してほしい。

「̲content」以外には次のものがある。

TARGET="̲blank"
TARGET="̲self"
TARGET="̲parent"
TARGET="̲top"：新しいウィンドウに表示：同じフレームに表示：親フレームに表示：フレームを解除して表示

なお、HREF 属性の指定先は絶対アドレスと相対アドレスのどちらでもかまわない。

ァイルは、実際にサイドバーに表示されるページ次はソース2だ。ここでは単純にリンクを設定しこのソース2を記述したファイルはサイドバーにているだけだが、よく見 るとT A R G E T 属 性 に表示するものなので、今回のサンプルではメニュ

まずはソース1の説明だ。
「addPanel」のかっ「̲content」を指定をしている。TARGET属性ー的なページにしてみた。サイドバーはネットス

この中は、カンマ（ , ）で分割された2つの要素はリンク先を表示するウィンドウやフレームを指ケープ6で表示可能なものなら、ブラウザー画面に分けけられる。1つ目の要素にはサイドバーの定するもので、ネットスケープ6では「̲content」と同じように表示できるので、ほかにもさまざまタブ部分に表示される文字列を指定し、2つ目のがサイドバーに対するブラウザーウィンドウになな使い方が考えられる。興味を持った人はいろい要素にはそのタブを選択したときにサイドバーにるわけだ。TARGET属性のアンダースコア（ ̲ ）ろと試してみよう。

表示するファイル（ソース2で記述したファイル）付 きのウィンドウ名 は予 約 されている名 称 で、だ（ソース2）。

380 INTERNET magazine 2000/8

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

属性：HTMLの開始タグの中で、要素が持つ性質などを指定する部分。たとえば、<A HREF="index.html">では、A要素にHREFという属性を指定して、その値を「index.html」とすることで、「リンク先はindex.htmlである」ことを表している。
©1994-2007 Impress R&D

T IPS & T R ICKS

3
画像の大きさを自在に操作する
6
まずは左のサンプルを見てほしい。画像の右下に三角形のアイコンが置いてある。今回は、このアイコンをドラッグすることで、左上の画像の大きさを自由に伸縮 させるテクニックを紹 介 しよう。まるで1 つのウィンドウを操作しているような感覚だが、ネットスケープ6はDOM Level1を完全にサポートしているので、こんな芸当もできるようになったのだ。
これを実 現 するには、g e t
ElementByIdを使う。このメソッドは先月、先々月と説明しているので、おなじみになっている方も多いだろう。このメソッドを使えば、サンプルのような面白い機能も作れるのだ。それではソースを見てみよう。

d1<SCRIPT LANGUAGE="JavaScript">
var icon;function beginDrag ( ) {icon = document.getElementById ("icon");window.onmousemove = doDrag;window.onmouseup = endDrag;}function doDrag (e) {icon.style.left = e.clientX - 10 + "px";icon.style.top = e.clientY - 10 + "px";}function endDrag ( ) {window.onmousemove = null;x = parseInt (icon.style.left);y = parseInt (icon.style.top);
img = document.getElementById ("img");
img.setAttribute ("width", "" + (x-100) + "");
img.setAttribute ("height", "" + (y-100) + "");}</SCRIPT>

2<IMG ID="img" SRC="rs_title.gif"
STYLE="position :absolute; left: 100px; top: 100px;"><IMG ID="icon" SRC="icon.gif"
STYLE="position: absolute; left: 352px; top: 218px;"
onmousedown="beginDrag( )">まずはソース1のスクリプトの説明から始め

置と縦方向の位置になる。なお、このclientXと（大きさを伸縮させる画像）を表すようにしていよう。最初の関数「beginDrag」では、マウス

clientYで得られるマウス位置の基点（0,0）は、る。
「setAttribute」はタグの属性を変更する命の動きを調べて処理を行う関数を設定している。

ブラウザーの表示領域の左上隅になることを覚令で、ここでは<IMG>タグの幅（width）と高マウスをドラッグしているときは関数「doDrag」

えておこう。

さ（height）を変更し、それぞれの値を変数xとyの値にしている。ソースをよく見るとxとyの値を実 行 し、 マウスボタンを離 したときは関 数「endDrag」を実行するようにする。また、変数ソース1の最後は関数endDragだ。この関数はからそれぞれ100を減算しているが、これはソー「icon」は関数doDragと関数endDragの両方でドラッグが終わったときに（マウスのボタンを離ス2で指定しているID名「img」の画像の初期使われる変数なのであらかじめ設定しておく。設したときに）実行される。最初にマウスの動き

位 置 をスタイルシートで「 left: 100px; top:

定にはgetElementByIdを使い、変数iconがID（onmousemove）を無効（null）にしている。

100px」としているためだ。

名「icon」の画像（三角形のアイコン）を表す

無効にしないとドラッグ後もアイコンがマウスにようにする。

合わせて動いてしまうので注意しよう。変数「x」

ソース2では2つの画像を指定している。1つ目と「y」にはアイコンの横方向と縦方向の座標位が大きさを伸縮させる画像で、2つ目がアイコン

次は関数doDragだ。ここでは三角形のアイコン置が入る。
「parseInt」とはこの座標を数値とし画像だ。特に注意する点がない普通のスタイルの位置をドラッグ中のマウスの位置に移動するよて扱うための処理だ。

シートを指定しているが、アイコン画像の位置はうにしている。引数「e」にはマウスイベントがe n d D r a g の中 で設 定 する変 数 「 i m g 」 は、「伸縮させる画像の位置＋伸縮させる画像の大き発生したときのマウスの位置情報が入っており、b e g i n D r a g で設 定 したi c o n と同 じように、さ」としておいたほうがよいだろう。

clientXとclientYはそれぞれマウスの横方向の位

getElementByIdを使ってID名が「img」の画像

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

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

©1994-2007 Impress R&D

INTERNET magazine 2000/8381

T IPS & T R ICKS

4ウィンドウを震わせる
455.5

46

左のサンプルページには、ちょっとしたトリックが仕掛けてある。
ページを開くと、しばらくの間ブラウザーのウィンドウががたがたと震えて、それからぴたっと止まる。ただそれだけだが、訪れた人は、一瞬びっくりするだろう。笑い出すかもしれないし、怒り出すかもしれないが、強烈な印象を与えられて、このページが忘れられなくなることは間違いない。ごく基本的なスクリプトでも、アイデア次第でまったく新しい効果を生み出せることがわかるだろう。実用性はまったくないが、オリジナリティーは抜群だ。自分のページにも工夫をこらした仕掛けを入れて、訪れる人を驚かせてみてはどうだろう。

d1<SCRIPT LANGUAGE="JavaScript">var count = 0;
var ax = new Array (-8,-0, 8, 0);
var ay = new Array (0, -8, 0, 8);
function shake ( ) {window.moveBy (ax[count % 4], ay[count % 4]);
count++; if (count < 1) setTimeout ("shake ( );", 50);}</SCRIPT>

2<BODY onload="shake ( );">

このスクリプトの組み立ては、今までこの連ラウザーのウィンドウを現在の位置から移動させって実際に動くスピードが違ってしまうのは避け

載で何度もやってきた、「ページを開いたときにるもので、左右と上下方向の移動距離を引数でられない。動きをもっと大きくしたいなら、配列スクリプトを起動し、一定時間ごとに繰り返す」

指 定 する。 余 りを計 算 する「 % 」 を使 ってaxとayの「8」や「-8」を大きくする。動きをもという方式だ。ソース2のonLoadイベントで、「ax[count % 4], ay[count % 4]」と指定すると、っと細かくしてみたいなら、配列axとayの要素ページを開いたときに呼び出す関数を指定する。

関数shakeが呼び出されるたびに引数が「-8, 0」、数を増やして、いろいろな位置に移動するようにソース1の関数で繰り返しの処理をする。この「0, -8」、「8,0」、「0, 8」、「-8, 0」、……と4回ごする。たとえば次のように6つにしてみる。

サンプルで繰り返すのは、ブラウザーのウィンドとに繰り返し変わる。あとは、変数countを1つウの位置を移動するという処理だ。ウィンドウの増やしてsetTimeoutメソッドを呼び出すだけ。

var ax = new Array(0, -8, -8, 0, 8, 8);

位置をほんの少しずつ素早く動かすことで、ブラただし、永遠にウィンドウが震えていては困るの

var ay = new Array(8, 8, -8, -8, -8, 8);

ウザーが震えているように見えるのだ。

で、if文で繰り返し回数に上限を付ける。

ソース1を詳しく見てみよう。
「count」は、繰

このスクリプトで指定している数字は大ざっぱなり返しの回数を数える変数で、「ax」と「ay」ものだ。実際に動かしてみて、「震え方がいまいはそれぞれ左右と上下の方向にどれだけウィンドち」と思ったら、数字を変えて試してみよう。震

ウを動かすかを表す数字の配列だ。

える動 きが速 過 ぎたり遅 過 ぎたりするときは、

関数「shake」では、実際にウィンドウを移動

setTimeoutメソッドの「50」を増やしたり減らサンプルを自分のページに組み込んだら、あとはさせる処理をする。
「moveBy」メソッドは、ブしたりしてみる。ただし、ブラウザーの種類によ工夫次第だ。

このとき、要素数に合わせてmoveByメソッドの382 INTERNET magazine 2000/8

引数を変えるのを忘れないように。
moveBy(ax[count % 6], ay[count % 6]);

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

関数：プログラミング言語で、一定の処理を独立させて記述した部分。言語によっては「プロシージャー」や「メソッド」などとも呼ばれる。引数を計算して値を返したり、何度も行われる処理を1つにまとめたりするのに使われる。
©1994-2007 Impress R&D

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

今月のテーマ

固定配置を制する

大好評発売中！

ネットスケープ6発表記念パズルの第3弾。スタイ
ルシートを活用した表現テクニックだ。ページに長い文章がある場合には、フレームを使って各ページへのリンクなどを常に表示させておくことができるが、レイアウトのためにわざわざフレーム「HTMLパズルに挑戦しよう」
宛 先を使うのは面倒だ。そんなときにはスタイルシートを使えば、もっと手D軽な配置ができる。そこで今月は、ページをスクロールしても一定の位正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！

置に画像や文章を表示させるテクニックに挑戦してみよう。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ 固定配置を制する にチャレンジ！

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

Q U E S T I O N

1 ロゴを常に表示させろ！

455.5

6

このサンプルは、左にロゴ画像を配置し、右に文章を置いたページだ。
ページをスクロールさせても、ロゴは動かずに常に一定の位置に置かれたままだ。枠線のないフレームを使えばこのような表現も可能だが、スタイルシートを活用してHTMLファイル1つだけで作ってほしい。ページのサイズをはみだすような巨大な画像ファイルを使うというのは、もちろんダメ。CSS level 1で規定されているプロパティーを使うので、IE 4以上が対応しているだけでなく、ネットスケープ6でも表示可能だ。実はこの連載の始めのころから何度も登場しているテクニックの応用なので、それほど難しくはないはずだ。

ヒントQ U E S T I O N背景画像を使いこなそう……

2 リンク集を常に表示させろ！

6

2問目は、まだIEではサポートされていないスタイルシートを使ったレイアウトテクニックの問題だ。IEもナビゲーター6もCSS level 2の機能を一部取り入れているが、ナビゲーター6のほうが対応は進んでおり、サンプルのようなページが作れる。ページをスクロールしても、左に置かれたリンク集の白い囲みはスクロールされずに、常に固定した位置に表示される。もちろん枠線を消したフレームを使っているわけではない。この機能はどんなCSS解説書にも載っていないので、W3CのCSS level 2の仕様書に直接あたって調べてみよう。
www.w3.org/TR/CSS2/

ヒント

仕様書でpositionプロパティーを見てみよう……

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

CSS level 2（シー・エス・エス・レベル・ツー／Cascading Style Sheet level 2）：W3Cが1998年に勧告したスタイルシートの仕様。高度なパターン定義や自動ナンバリング、音声用スタイルなどを規定している。
©1994-2007 Impress R&D

INTERNET magazine 2000/8383

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