第 41 回

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

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

先月ついにこの連載にネットスケープ6用のTIPSが登場したが、いかがだっ4たろうか。IEと同じソースでダイナミックHTMLが動くことは驚きだ。IE 5.5の新しいベータ版も発表され、HTMLやCSS、JavaScriptがこれからどう変5わっていくのか、ますます目が離せない。それでは今月もネットスケープ6がサ5.5ポートした新しいタグを中心に、さまざまなテクニックをお届けしよう。
4

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

6

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

6月号「HTMLパズルに挑戦しよう」の解答
第1問はごく簡単な問題だったが、ネットスケープ6をインストールして試した人があまりいないせいか、応募者が少なかったのは残念だ。第2問は、ナビゲーター4のバグ（表示が大きく崩れるなど）を回避するのにたいへん有効な方法なので、ぜひ覚えておいてほしい。

A N S W E R

1 ネットスケープ6を判別せよ！

ここでは「navigator.userAgent」でブラウザーを判別した。ネットスケープ6では、「Mozilla/5.0 (Windows; N; Win98; ja-JP; m14) Netscape6/6.0b1」のようになる。
<SCRIPT LANGUAGE="JavaScript">
if (navigator.userAgent.indexOf("Netscape6") >= 0)
location.href = "indexn6.html";
else if (navigator.userAgent.indexOf("MSIE 5") >= 0)
location.href = "indexe5.html";</SCRIPT>A N S W E R

正 解 者 ： 坂 部 和 久 さん、巻 き字 さん、M a s a h i k o
Murataさん、山口雅仁さん、よしともさん、杉本知子さん、布施智也さん、Libretto30さん

2 スタイルシートを使い分けろ！

「@import」という指定で外部のCSSファイルを読み込める。これに対応しているのがIE 4以降とネットスケープ6なので、スタイルシートの使い分けができる。
<STYLE TYPE="text/css">@import url(puzzle2.css);</STYLE>
正 解 者 ： 坂 部 和 久 さん、巻 き字 さん、M a s a h i k o
Murataさん、神森勉さん、山口雅仁さん、よしともさん、杉本知子さん、Libretto30さん

332 INTERNET magazine 2000/7

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

スタイルシート：HTMLやXMLなどタグ付き文書を表示したときの視覚的効果を指定するための仕組み。CSS（Cascading Style Sheets）やXSL（eXtensible Style Language）がある。CSSは、インターネットエクスプローラ3以降とネットスケープナビゲーター4以降でサポートされた。
©1994-2007 Impress R&D

T IPS & T R ICKS

1
DOMでテキストアニメーション
5<SCRIPT LANGUAGE="JavaScript">
fr = 20; cl = 255; lt = 0; el = 0;function colorfade ( ) {if (fr > 0) {lt += fr;
document.getElementById ("text" + el).style.left = lt + "px";cl -= 5;document.getElementById ("text" + el).style.color ="rgb(" + cl + "," + cl + "," + cl + ")";
fr--;
setTimeout ("colorfade ( )", 20);} else {fr = 20; cl = 255; lt = 0;
if (el < 5) {el++; setTimeout("colorfade ( )", 20);}}}</SCRIPT>

6

前回紹介したDOMのパワーはもう実感してもらっただろうか。こんどは前回のポイントだった「getElementById」と、スタイルシートのポジショニング機能を組み合わせて、IE 5でもネットスケープ6でも動作するテキストアニメーションを作ってみよう。今までのようなブラウザー判別を必要としないので、シンプルなスクリプトでできる。アニメーションの内容は、「何行かの文字列が1行ずつ画面の左端から流れてきて中央に並ぶ。文字列は始めは白くて背景に溶け込んでいるが、アニメーションにシンクロして、だんだん色が濃くなって最後にはグレーになる」。こんな感じだ。では解説してみよう。

d1

5.5

2
<BODY onload="colorfade ( )" BGCOLOR="white"><DIV ID="text0"
STYLE="position: absolute; left: 0px; top: 40px;
color: rgb(255,255,255);">HTML</DIV>

まず始めにソース2を見ておこう。<BODY>の「rr」、「gg」、「bb」にこの値を当てはめることに20フレーム分のアニメーションが終わると、else文

タグでは、後で説明する関数「colorfade」をonなる。今回は背景を白くし、文字も白からスタートに移る。変数の値をリセットし、アニメーション操loadイベントで呼び出している。また背景色は白するので255にしておこう。0 にしておけば黒から作が次の<DIV>タグに移れるように、「el」（IDの番にしておこう。省略しているが、<DIV>タグは6つあスタートする。
「lt」は文字がスタートする位置の左号）を1つ増やす。行数分だけアニメーションが終る。それぞれに「ID」属性があるのに注意してほ端の座標をあらわす。画面の左端からスタートさせしい。今回は「text0」から「text6」までの 6つだ。

る場合は0にしておこう。最後に「el」だが、スクリわると、関数は終了する。自分自身を呼び出す仕組み「setTimeout ( "colorfade ( ) ",20 ) ;」を使っ

スクリプトを使ってこのタグ（DOMのオブジェクト）

プトで操作する<DIV>タグのID番号を表すのにているので、「20」の値を変えることで、アニメーシを操作するときのオブジェクト名となるものだ。ス使う。最初は0でよい。

ョンのスピードを変えられる。さあ、きちんと両方のブラウザーでアニメーションができただろうか？

タイルの設定にも注意。
「position: absolute;」と絶対座標にしたうえで、左端と上端の座標を決めあとはメインとなる関数「colorfade」だ。if 文はておく。
「left」はすべて0だが、「top」の値は、各行「fr」で決めたフレーム数の分だけ繰り返されるもちなみに「fr」の値をだんだん小さくしているのは、の文字のサイズや行間に合わせて自由に決めるとので、文字列を移動させ色を変化させる。ポイン
トは「document.getElementById ("text"+ el ).

残りフレーム数を表すのと同時に、「lt += fr;」とすることで、文字の動きをだんだん小さくする効果

style.left = lt +"px";」の部分で、「"text"+ el」とがある。アニメーションが単調ではなくなるので、HTMLの準備ができたところで、ソース1のスクリいうIDを持ったタグの左端座標を「lt」ピクセルに今回に限らず使えるちょっとクレバーなテクニック

プトを作成しよう。まず4つの変数を説明する。
「fr」

する、という意味だ。先月覚えたDOMの機能「getだ。参考にしてみてほしい。

はアニメーションのフレーム数。たとえば20コマにElementById」を使っている。
「style.color」
で色してみる。
「cl」
は文字の色だ。RGB形式（#rrggbb）

を変更する部分も同じだ。

いいだろう。文字色は白にしておく。

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

DOM（ドム／Document Object Model）：プログラムによってHTMLやXMLの内容を検索したり操作したりする方法を共通化したルール。W3Cが1998年に発表した
DOM level 1と2000年現在策定中のDOM level 2がある。
©1994-2007 Impress R&D

INTERNET magazine 2000/7333

T IPS & T R ICKS

2
選択ボックスに小見出しを作る
6
みなさんは<OPTGROUP>というタグを聞いたことがあるだろうか？ これはお馴染 みのHTML
4.0 から追加されたタグの1 つだが、IEもナビゲーターもサポートしていなかった。このタグを知っている人はほとんどいないのではないだろうか。 そこで今 回 は<OPTGROUP>タグの使い方をお教えしよう。「でも、サポートしているブラウザーがないのなら意味がないよ」と思うだろうが心配無用。この4月に登場したネットスケープ6 Preview Release 1がサポートしているのだ。左はこのタグの表示イメージで、選択ボックスの中に小見出しがあることがわかるだろう。 これが< O P T
GROUP>タグだ！

d<FORM>
都道府県：<SELECT><OPTGROUP LABEL="北海道・東北"><OPTION LABEL="北海道"><OPTION LABEL="青森"> ……
<OPTGROUP LABEL ="関東・甲信越"><OPTION LABEL="茨城"><OPTION LABEL="栃木"> ……
</SELECT></FORM>

これまでこのコーナーでは数多くのHTMLタ各<OPTION>タグの見出しになる。当然、全体<OPTION>タグのLABEL属性も今までのブラウグを紹介してきたが、実はまだ紹介していないタを<SELECT>〜</SELECT>で囲わなければい

ザーではサポートされていなかったので、ネット

グがいくつか残っている。なぜ紹介しないのかといけないことは言 うまでもないだろう。

スケープ6でしか表示できない。

うと、「一般に普及しているブラウザーがサポー<OPTGROUP>タグは<SELECT>タグの中にいトしていない」ことが理由だった。しかし、4月に公くつでも記述することができるので、サンプルのネットスケープ6は、まだ開発者向けに公開され開されたネットスケープ6 Preview Release 1は、ように項目ごとに小見出しを付けると表示効果ているだけなので、今月号で紹介しているTIPS

W3Cの規格であるHTML 4.0をすべてサポートしが上がるだろう。

を実際にホームページに組み込むのは時期尚早ているのだ。ホームページ制作者であるみなさん

さらに上のソースをよく見ると、<OPTION>タと言 わざるを得 ないが、今 のうちから正 式 なにとって待望のブラウザーが登場したと言えるだ

グにも「LABEL」という見慣れない属性が指定

HTML 4.0を覚えておくことは大切だ。まだ使っろう。そこで今回のTIPSでは、ホームページの基されていることに気付いただろう。今までは選択ていない人は、本誌の付録CD-ROMからインス本であるHTMLタグを1つ紹介する。基本と言っ項目を次のように記述していた。

トールしてみよう。今月号で紹介されているテクニックだけでなく、いろいろなことにチャレンジても、<OPTGROUP>という聞きなれないタグだ。今までのブラウザーでは表示することさえで<OPTION>北海道

してみると、将来のホームページ作成に必ず役に立つだろう。

きなかったので、ここで初めて見る人も多いだろHTML 4.0では次のようにも記述できる。

う。それでは使い方を説明しよう。

ネットスケープ6 Preview Release 1
使い方は上記ソースのとおりで、<OPTGROUPLABEL="〜">で指定した文字列が、それに続く

334 INTERNET magazine 2000/7<OPTION LABEL="北海道">（ウィンドウズ版）
CD-ROM収録先 ÅWin→Netscape→V6pr1

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

HTML 4.0（エイチ・ティー・エム・エル・よんてんゼロ／HyperText Markup Language 4.0）：WWWの標準化団体W3Cが1997年に発表したHTMLの標準仕様。文書構造と見栄えの切り離し、国際化、アクセシビリティー、スクリプトやフレームの導入などが特徴。
©1994-2007 Impress R&D

T IPS & T R ICKS

3
単語の間隔を調整する
6
ここで紹介するTIPSは、「単語と単語の間隔を調整する」テクニックだ。左のサンプルの本文では単語間隔をあまり広く設定してないので効果がわかりにくいかもしれないが、見出しの文字は少し広めに設定しているので、その効果が認識できるだろう。このTIPSは、CSS level 1というスタイルシートのもっとも古い規格で制定されたプロパティー使っているのだが、今まではブラウザーがサポートしていなかったために、使えないテクニックだった。しかし、ネットスケープ6 Preveiw Release1の登場でついに使用可能になったのだ。君も単語の間隔を調整して読みやすいホームページを作ってみよう。

d<H1 STYLE="word-spacing: 0.6em">
about Netscape 6 Preview Release 1</H1>「単語の間隔」と言うと、日本語を使う私た使い方はとくに難しいことはなく、普通のスタイしておけば、あとから文字のサイズを変更してもちにとってはあまりピンとこないと思うが、ホールシートと同じくタグに対して指定するだけだ。

単語の間隔は常に「小文字m の文字高さの0.6

ムページで詩などを公開する場合は、単語と単上記ソースではSTYLE属性を使って指定してい倍」になるのだ。このem単位はホームページを

語の間隔は文章から読み手に与えるイメージのるが、<HEAD>〜</HEAD>の間に<STYLE>タ頻繁に更新する場合に、作業の手間を軽減する面で重要な意味がある。英文では読みやすさのグを使 って指 定 してもいい。 < L I N K > タグやのに便利なので使ってほしい。

点で非常に重要になることは言うまでもないだろ「@import」を使って、外部のCSSファイルに記う。今までは単語間隔を調整する際に、全角ス載したプロパティーを適用することも可能だ。

今回のTIPSとは関係ないが、読みやすさの点では「line-height」（行の間隔）も重要になるのペースや「&nbsp;」あるいは<PRE>タグなどを使っていたホームページ作者は多いだろうが、正ここで注目してほしいのは、word-spacing にで、ホームページで英文や詩などを載せている人

式なHTMLの文法としてはあまりよい方法とは言「0.6em」という値を適用していることだ。
「em」

はword-spacingと併せてline-heightも調整しえない。 正 しくはスタイルシートで「 w o r d -という単位は、スタイルを適用する要素の文字てほしい。参考までに、筆者はword-spacingがspacing」を使うのだ。しかし、このプロパティサイズによって相対的に変化する単位で、小文0.3〜0.4emで、line-heightが1.3〜1.4emの文ーは、今までどのブラウザーもサポートしていな

字 のm の高 さを1 としたサイズだ。 たとえば、章がもっとも読みやすいと感じる。

かったので、先に述べたような手法を使わざるを「 f o n t - s i z e : 2 0 p t 」 を指 定 している文 章 に得なかったのだ。ネットスケープ6 では、この「word-spacing:10px」の指定をしてしまうと、このword-spacingもネットスケープ6でないとword-spacingを含めてほぼすべてのCSS level 1

あとになってfont-sizeを変更したときに、同時認識されないものなので、実際に使うにはまだ早がサポートされたので、さっそく取り上げることにword-spacingも変更しなければレイアウトがいと言わざるを得ないが、使い方だけでも覚えてにした。

崩れてしまう。
「word-spacing:0.6em」と指定おくと将来役に立つだろう。

インターネットマガジン／株式会社インプレスR&DCSS（シー・エス・エス／Cascading Style Sheets）：ウェブページの表示方法を指定する言語であるスタイルシートのうち、現在もっとも広く使われている方式。
W3Cが1996年に発表したCSS level 1と1998年に発表したCSS level 2がある。
©1994-2007 Impress R&D

INTERNET magazine 2000/7335

T IPS & T R ICKS

4
リンク先のフレームを切り替える
455.5

フレームを使ったページにリンクを置いたときには、リンク先のページをどのフレームやウィンドウに表示させるかが問題になる。
フレーム内に表示させると画面が狭くなるし、ウィンドウ全体に表示させるとフレームのよさがなくなる気がする。そこで、どこにリンク先のページを表示させるかをユーザーが自分で決められる仕掛けを作ってみてはいかがだろうか。
左のサンプルには、リンク集の上に「新しいウィンドウで開く」などの選択ボタンが3 つあって、チェックするだけで簡単に切り替えられる。複雑なスクリプトを使わずにフレーム内のすべてのリンクの表示先を一度に変更できるこのテクニックを紹介しよう。

d1<SCRIPT LANGUAGE="JavaScript">function settarget (tgt) {base1.target = tgt;}</SCRIPT><BASE ID="base1" TARGET="_top">

2<INPUT TYPE="radio" NAME="op1" onClick="settarget('_blank')">新しいウィンドウで開く<INPUT TYPE="radio" NAME="op1" onClick="settarget('_top')">このウィンドウで開く<INPUT TYPE="radio" NAME="op1" onClick="settarget('_self')">このフレームで開く

ページ中のリンクをクリックしたときに、リンらに<BASE>タグを書いてID属性を「base1」にク先をどのフレームやウィンドウに表示させるかしておく。この<SCRIPT>タグと<BASE>タグはを決めるには、<BASE>タグでTARGET属性を指<HEAD>〜</HEAD>の中に置く。

定 す れ ば い い 。た と え ば <BASE TARGET=

次にソース2のように、リンク先を切り替える選"̲top">とすればブラウザーのウィンドウ全体に、択ボタンを<INPUT>タグで作る。クリックした<BASE TARGET="̲blank">とすれば新しくウときにリンク先 が切 り替 えられるように、ソース1と2を左フレーム（right.html）に記述

ィンドウが開いてその中に表示される。

onClickイベントで関数「settarget」を呼び出したら、次のような選択ボタンを加えればいい。

IE 4以降なら、この<BASE>タグのTARGET属す。関数の引数には、それぞれTARGET属性の性もスクリプトで変更できるのだ（ただし、残念

値を表す「̲blank」（新しいウィンドウ）、「̲top」なことにマッキントッシュ版のIE では動作しな（現在のウィンドウ全体）、「̲self」（現在のフレい）。やりかたはとても簡単。ソース1と2をフーム内）を指定しておく。これだけで完成だ。

レームのHTMLに記述する。サンプルでは右フレ<FRAMESET COLS="180,*"><FRAME SRC="right.html" NAME="frm1"><FRAME SRC="left.htm1" NAME="frm2"></FRAMESET><INPUT TYPE="radio" NAME="op1"
onClick="settarget('frm2')">右フレームで開く

これで、選 択 ボタンをクリックすると< B A S EームになるHTMLだ。

この技を応用して、リンク集を左のフレームに移TARGET="frm2">を指定したのと同じ状態にな

まず、 ソース1 のスクリプトのように関 数して「右のフレームで開く」という選択肢を加えって、左フレーム中のどのリンクをクリックしても「settarget」を作る。この関数の中身はたった1行。

たい場 合 はどうすればいいだろう。 まず、右フレームにリンク先が表示されるようになる。

関数の引数「tgt」を「base1」というオブジェク<FRAME>タグを書いたHTMLの中で、NAMEトの「target」プロパティーに代入するだけ。さ属性を使ってフレームに名前を付けておく。

336 INTERNET magazine 2000/7

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

フレーム：WWWブラウザー上で、複数のHTMLファイルを一度に表示する方法、およびそのタグ。ネットスケープナビゲーターとインターネットエクスプローラ以外のブラウザーでは対応していない場合が多い。
©1994-2007 Impress R&D

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

今月のテーマスタイルシートを制する大好評発売中！

CSS level 1を完全にサポートしたネットスケー
プ6の発表で、ナビゲーター4のためにこれまで避けてきたスタイルシートの技を堂々と試せるようになった。色を付けたりフォントサイズを変えたりするだけでなく、組み合わせを工夫すれば「HTMLパズルに挑戦しよう」
宛 先

高度な表現や面白いトリックが実現できるようになったのだ。しかもやDやこしいスクリプトを書かなくても済む。そこで今月はスタイルシート

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

を利用して、今までにない効果を狙ったパズルに挑戦していただく。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ スタイルシートを制する にチャレンジ！

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

Q U E S T I O N

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

45

5.5

6

左のサンプルは、スタイルシートとリンクの組み合わせ技の例だ。マウスをリンクの上に載せると、テキストの背景に波型の模様が現れる。ス
タイルシートを使って、マウスを載せたときに色を変えたり、太字にしたり、下線を付けたりする例はよく見かけるが、これはいったい何だろう。
実はこの模様は単なる画像で、スタイルシートの機能で表示しているのだ。このテクニックのコツが分かれば、簡単な記述だけで人をあっと言わせるような効果ができるぞ。解答の条件は、JavaScriptを一切使わずにスタイルシートだけでこれを実現すること。工夫をこらした画像を使ってオリジナリティーのある解答を作ってほしい。

ヒン
トQ U E S T I O N

アンカー疑似クラスに何かを指定……

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

6

左のサンプルは画像がリンクになっていて、マウスを載せると画像に額縁のような枠が付く。スタイルシートに完全対応しているブラウザーなら簡単な記述だけでこんなこともできるのだ。条件は第1 問と同じく、JavaScriptではなくスタイルシートだけで作ること。画像には何を使ってもいいが、表示される枠の部分は画像ではない。W3CのCSS 1の仕様書の中に例があるにも関わらず、残念ながらウィンドウズ版のIEでは効果が現れない（マッキントッシュ版IEではうまくいった）。ネットスケー
プ6を使って試してみてほしい。枠の色やスタイルをいろいろと変えてみれば、人目を引くページ作りのヒントになるだろう。
ヒン
ト

4月号の解答（5月号に掲載）と考え方は同じ……

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

W3C（ダブル・スリー・シー／World Wide Web Consortium）：WWWの発展との相互運用性の確保のために、企業や研究所、大学をメンバーとして設立された世界的な組織。
HTMLやCSS、XMLの仕様書を勧告として公開している。
©1994-2007 Impress R&D

INTERNET magazine 2000/7337

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