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

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

ようやくウィンドウズ98が発売されたが、IEは4.01サービスパック1のままで、HTMLやスクリプトの面では変化はない。このコーナーの読者なら、IE4の機能3.0を十分に使いこなし、関心はすでにIE5に移っているかもしれないが、IE4はま4.0

だまだTIPS&TRICKSの宝庫だ。今月はIE4での簡単なスクリプトの使い方を中心にして、工夫次第でいくらでもテクニックを生み出せるところをお見せしよう。

3.0

4.0

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

8月号「HTMLパズルに挑戦しよう」の解答
あまり目を向ける機会の少ない「行頭記号」が8月号のテーマであったが、正解者は多かった。タグやスタイルシートのリファレンスを調べていけばそれほど難しい問題ではないからだろう。それでは解答を発表しよう。なお、第1問ではスタイルシートを用いた方法もあるのでそちらの方も検討してみてほしい。

A N S W E R

1 行頭番号を自由に付けろ！

<OL>タグのSTART属性で番号の初期値を設定する。ローマ数字など番号の種類を変えるにはTYPE属性で1、I、i、A、aのどれかを指定する。また、<LI>タグのVALUE属
性、TYPE属性で値や種類を途中で変えることもできる。
<OL START="51"><LI>Link UPDATE(5/2)：<LI VALUE="54">Favorite UPDATE(5/14)<LI>Gallery UPDATE (5/20)<OL TYPE="i"><LI>New Photo：A N S W E R

正解者：高田尚樹、古野潔美、大内勇、良知敬介、
武藤雄太、熊本芳朗（敬称略）

2 行頭記号に画像を表示させろ！

スタイルシートで<UL>タグの行頭記号を画像にするには、「list-style-image: url(画像のファイル名)」を指定すればよい。各<UL>タグにこのスタイルを設定すれば、階層に応じて画像を変えることができる。
<UL STYLE="list-style-image: url(image1.gif)">
正解者：高田尚樹、駒倉恭之、古野潔美、佐藤晴幸、大内勇、良知敬介、熊本芳朗（敬称略）

320 INTERNET magazine 1998/9

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

T IPS & T R ICKS

1
マウスに反応してメッセージを表示

4.0
これまでこのコーナーでは、リンクに関するさまざまなTIPSを紹介してきた。リンクはウェブページの中で大切な役割を担っているものであり、訪れる人にとってリンクがわかりやすいかどうかは重要なポイントだからだ。今回はリンクの上にマウスを載せたときにページ内 にメッセージを表 示 させるTIPSを紹介しよう。今あるページがもっと動きのある面白いものになり、訪れる人の関心を引き付けること間違いなしだ。先月号の「リンクのスタイルを変える」と同様に、すでにあるHTMLにちょっと手を加えるだけでマウスに反応するインタラクティブなページができあがる。試してみない手はないだろう。

d<SPAN ID="msg"></SPAN><A HREF="movie.html" onMouseOver="msg.innerHTML='私のオススメ映画'"
onMouseOut="msg.innerHTML='...'">Movie</A>

これまでにも似たようなテクニックがよく使わ

タグ内に次のように書きこむ。

ラウザーのスターテスバーにメッセージを表示する

このままでも十分なのだが、<SPAN>タグにスタイルシートを指定すればさらにすばらしいページれてきた。リンクの上にマウスを載せたときにブonMouseOut="msg.innerHTML=''"ができるだろう。たとえば以前このコーナーで紹介したフィルターを併用すれば、これまでになかった方法だ。しかし、リンク先のURLがステータスバ面白い効果が得られる。

ーに表示されないため、どこにリンクされている「''」で囲まれた部分に、マウスがはずれたときにのかわからないのが問題だった。今回紹介する方表示するメッセージを書けばいい。マウスがはず法では、ページ中の任意の位置にメッセージを表れたときのメッセージは空欄のままでもかまわな示できるので、その問題は発生しない。

いが、せっかくのスペースだから、何かの表示に<SPAN id="msg" STYLE="width: 100%;
filter: DropShadow (Color=Silver) ">使ってもいいだろう。

</SPAN>

まず、メッセージを表示させたいリンクの<A>タ

最後に、メッセージを表示させたい位置に、次のグ内に次のように書きこむ。

ように書く。

なお、IE 4では「 onMouseOver=」「 onMouse
Out=」は<A>タグ内だけでなく、ほとんどすべ

onMouseOver="msg.innerHTML<SPAN ID="msg"></SPAN>てのタグに指定できるので、<IMG>タグ内に書きこんで画像の説明を表示させたりしてもいいだ='私のオススメ映画'"
この<SPAN>タグを目立つ位置に配置するなど、「''」で囲まれた部分に、マウスが載せられたときメッセージの表示を考慮してページのレイアウトに表示させたいメッセージを書く。また同じ<A>を作るとよいだろう。

ろう。

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

T IPS & T R ICKS

2
リンク先にランダムにジャンプ
3.0

4.0

3.0

4.0

リンクにURLを設定すれば、そのページにしかジャンプしない。当たり前だが、これをひっくり返すようなしかけを「お遊び」として取り入れるのも面白いと思う。ここで紹介するのはそんなTIPSだ。左のサンプルには、リンクが4 つあり、その下にボタンを1つ付けている。
このボタンを押すと、リンクされた4つのページのどれかにジャンプする。ジャンプ先はランダムに決定され、ボタンを押すたびに違うページに飛ぶようになっている。少々スクリプトを使っているが、それほど難しくないし、スクリプトがわからなくてもそのまま書き写せば使えるようになっている。それではさっそく紹介しよう。

d<SCRIPT LANGUAGE="JavaScript">function randomLink ( ) {toLink = Math.floor ( Math.random ( ) * document.links.length)
location.href = document.links [ toLink ]}</SCRIPT><FORM><INPUT TYPE="button" Value="Mystery Link"
onClick="randomLink ( )"></FORM>（document.links.length）をかける。さらに数学関数の「Math.floor ( )」で小数点を切り捨てれHREF="〜"></A>」として見えないリンクを作いくつも設定する必要があるが、スクリプト自体は実にあっさりとしたものとなっている。

ば、リンクの番号をランダムに得ることができる。

作ることもできる。

あらかじめHTML内に<A>タグでリンク先をり、ボタンを押したときだけジャンプするページをこれを変数「toLink」に入れておく。
ただし、注意しなければならないことがある。このページ内のリンクのURLは、最初に書かれたもの
location.href = document.links [ toLink ]例ではボタンを使っているが、たとえば「<A HREF="javascript:randomLink ( ) ">」のように<A>ランダムに得た番号を使って「doument.links[ toLink ] 」とすれば、URLが取り出せる。これをタグにスクリプトを書いた場合、その<A>タグ自数は、「document.links.length」となる。0以上でリンクの総数未満の数をランダムに作れば、ジ「location.href」に代入するだけで、現在のペーう。こうした場合は、変数「toLink」を決める部

ャンプ先のリンクの番号を決定できる。

ジからそのURLにジャンプできる。

分を変更する必要がある。ジャンプ先に含めたくから順番に配列「document.links」に入っている。
JavaScriptでは、配列の要素の数は、「length」
プロパティーでわかるので、ページ内のリンクの総身までランダムにジャンプする対象に含まれてしまない<A>タグの番号をあらかじめ調べ、その番号
toLink = Math.floor ( Math.random ( ) *document.links.length )このスクリプトでは、リンクの数を調べてから番号のときはもう一度乱数を作るといった方法がいいを指定する方法をとっている。このため、あとでだろう。

ページに新しいリンクを追加しても、「document.
「Math.random ( ) 」は数学関数で、0から1の間links.length」の数字が自動的に変わるので、の乱数（小数）を発生する。これにリンクの数スクリプトを変 更 する必 要はない。また、「< A322 INTERNET magazine 1998/9

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

T IPS & T R ICKS

3
大文字小文字を入れかえる
4.0きみのサイトには英文ページはあるだろうか。
「日本人向けだから日本語で……」という声も聞こえるが、英字フォントは種類も豊富だし、ウェブデザインには欠かせない要素だ。英文とは言わないまでも、アルファベットを使ったページデザインは毎日どこかで目にしている。ここでは英字デザイン特有のコツ、大文字小文字の使い分けテクニックを紹介しよう。HTML内のテキストはそのままにして表示をまるごと大文字や小文字にしたり、頭文字だけ変更したりできる機能があることに気づいているかな？ス
タイルシートやスクリプトで簡単にできるので、英文のテキストが用意できたらすぐにも試してみよう。

d<DIV onMouseOver="this.style.textTransform='uppercase'"
onMouseOut="this.style.textTransform='lowercase'"
onClick="this.style.textTransform='none'">アルファベットの大文字小文字を指定するに上のサンプルでは「uppercase」と「lowercase」<STYLE>は、スタイルシートの「text-transform」を利用を使い、マウスがテキストの上に来るとすべて大文.transform1{ text-transform:uppercase }する方法と、スクリプトで「textTransform」プ字、はずれるとすべて小文字になる。

.transform2 { text-transform:lowercase }ロパティーを利用する方法がある。上のサンプル「capitalize」は使い方に悩むかもしれないが、</STYLE>

ではより簡単なtextTransformプロパティーのほ「CSS」のような略語といっしょに用 いると面白うを示した。まずこちらから見てみよう。

いだろう。最初は「cascading style sheet」とあとは、同じくマウスイベントなどでこれを呼び出

textTransformは、「color」や「fontSize」表示しておき、マウスが上に来たら語の頭文字がすとよいだろう。と同じく、各タグ（上のサンプルでは<DIV>タグ、大文字になる。こうすれば略語の紹介に使えるはすなわち「this」）にそなわっている「style」オずだ。

ブジェクトが持つプロパティーだ。
「uppercase」、<DIVonMouseOver="this.className「lowercase」、「capitalize」、そして「none」のスタイルシートで実現する方法も紹介しよう。ス='transform1'"4つの値をとる。順に、「全部大文字」、「全部小タイルシートの「text-transform」属性も、「textonMouseOut="this.className文字」、「語の頭文字だけ大文字」、「特に指定なTransform」プロパティーとまったく同じ4つの値='transform2'">

し」を意味している。これさえわかれば、あとはマをとる。まずこれを<STYLE>のなかで指定してウスイベントなどと結び付けるだけで、マウスが文おく。

字の上に来ると大文字になって強調される、といった表現ができる。

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

INTERNET magazine 1998/9323

T IPS & T R ICKS

4
時間によってデザインを変える
4.0
アクセスした時間によって、表示されるメッセージや画像が変わるページをよく見かけるが、ここではページ全体のデザインを時間によって変えてしまうTIPSを紹介しよう。
左のサンプルでは、ページデザインを3 種類用意し、昼、夕方、夜中とアクセスした時間帯に合わせて変えている。ページ全体の色や背景、リンクの色、そして中央にある画像が変わるのだ。このしかけはスクリプトとスタイルシートで作ることになるが、いたって簡単なものだ。一度覚えてしまえば、ページデザインを4つ以上に増やしたり、月や日付によってデザインを変えたりするなどの応用が柔軟にきく。ぜひ挑戦してみよう。

d1<SCRIPT LANGUAGE="JavaScript">
accessTime = new Date ( )accessHours = accessTime.getHours ( )tag = '<LINK REL="stylesheet" TYPE="text/css" HREF="'if ( accessHours >= 7 && accessHours < 15 ) tag += 'type1.css'
else if ( accessHours >= 15 && accessHours < 23 ) tag += 'type2.css'
else tag += 'type3.css'
tag += '">'
document.write ( tag )</SCRIPT>

2BODY { background: url ( image01.gif ) #CCFFCC; color:#000000; }A:link { color:blue; }A:visited { color:darkblue; }TD.imgbak { background-image: url ( arrow1.gif ) }まずは何はなくともページにアクセスしたときの時刻がわからなくてはならない。次のようなス

実は、次のタグを「document. write ( )」を使っを利用し、「+=」を使って文字を順番につないでて書きこんでいる。

いく方法をとった。条件によっていちいちタグをす<LINK REL="stylesheet"

べて書くよりは繁雑にならないはずだ。
なお、「document.write ( )」で<LINK>タグを書き

accessTime = new Date ( )TYPE="text/css"

こむほかに、「document.bgColor=black;」とaccessHours = accessTime.getHours ( )HREF="スタイルシートファイル名">

して背景色を黒にするなど、プロパティーを直接指クリプトを書く。

定したり、メソッドを実行したりする方法もある。
「 new Date ( ) 」 で Dateオブジェクト「 access

これは以前に紹介した「リンクドスタイルシート」Time」を作る。
「accessTime」には現在の日付だ。2のようにスタイルシートを記述したファイルや時間、時差などが含まれている。そこから「何時」だけを得るには「accessTime.getHours ( )」（拡張子は「.css」）を3つ用意し、これを<LINK>

デザインを変える条件は時間帯だけとは限らない。
たとえば、「accessTime.getMonth ( )」、「access

タグで呼び出してHTML内の色や壁紙を設定してTim e.getDate ( )」でそれぞれアクセスした月、日をとする。このように、時間を得るスクリプトはまずいるのである。

得ることができる。ある特定の日にアクセスしたときだけデザインを変えるようにしても面白いだろう。

最初に書いておこう。
コツとしては、一度<LINK>タグをすべて書いてか次に、デザインを設定するスクリプトを書く。if〜

ら、共通する部分と条件によって書き方が変わる

elseを使って時を表す「accessHours」の値を条部分（今回の場合はファイル名にあたる）とに分け、件にして処理を分岐させる。1 のスクリプトは、条件によって変化する部分をif〜else 文で処理し、一見するとちょっとわかりづらいかもしれないが、その前後に共通部分を書く。ここでは変数「tag」

324 INTERNET magazine 1998/9

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

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

今月のテーマ

囲みを制する
本誌をめくってみればわかるように、記事にはさまざまな「囲み」がある。注意書きを載せたり、用語を解説したりする部分だ。ウェブページでも、文章を順番に並べるだけでなく、目立つ囲みを作って中心となる文章を回り込ませれば、雑誌のような本格的なデザインになる。思いつくままに「TIPS」や「POINT」を入れてみるといいだろう。今月は、囲みとテキストの回り込みに関するパズルに挑戦していただく。トリックがわかったらすぐに解答を送ってきてほしい。正解者には抽選で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
4.0

4.0

左のサンプルを見てほしい。濃い青の背景に白い枠線と文字を使った囲みがあり、文章がその囲みの周りを流れている。<IMG>タグを使えば画像の周りに文字を回り込ませることができるが、ここではテキストを独立した1つのブロックとし、その周りに別のテキストを回り込ませているのだ。ちょうどワープロやDTPソフトで「テキストボックス」を作成するのに似ている。もちろん<TABLE>タグを使っているのではないぞ。解答には、回り込みの指定のほかに、囲みの背景、枠線、文字色の指定も含めるものとするが、テキストには何を使ってもよい。なお、ネットスケープナビゲーターでもほぼ同様に表示できるが、若干違った感じになる。
ヒント

Q U E S T I O N

ALIGN属性の代わりとなるスタイルシートは……

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

4.0
4.0

4.0

第 2 問は、第1 問に少々手を加えて、囲みの背景をグラデーションにしたものだ。
「グラデーション機能なんてあったっけ？」と思うかもしれないが、何のことはない、画像を使っているだけだ。ただし、テキストをまるごと画像にして<IMG>タグで指定しているのではないし、<TABLE>タグを使っているのでもない。テキストはふつうにHTML内に書かれている。これがわかれば、文章を囲みにするだけでなく、画像に文字を載せて丸付き数字を作るなど、いろいろな応用が考えられるだろう。どのように画像を指定しているかが問題なので、画像とテキストは何でもかまわない。解答にはオリジナルの画像を添付して送ってほしい。
ヒン
ト

この連載で何度か紹介したスタイルシートは……

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

INTERNET magazine 1998/9325

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