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

今回のTIPS & TRICKSは、2や3のようにやや長めのスクリプトを書いたり、4のようにActiveXコントロールを使うものとなったので、付属CD-ROMに3.0

ソースのHTMLファイルを収録した。テキストエディターなどでHTMLファイル4.0を開き、本誌を見ながら必要な部分を自分のHTMLにコピー＆ペーストして使ってみてほしい。それでは今月もさまざまなTIPSをお届けしよう。

3.0

CD-ROM収録先 A Magnavi→Ip9812→Htmltips+CD-ROM

4.0

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

11月号「HTMLパズルに挑戦しよう」の解答<BLINK>と<MARQUEE>タグの動きを未対応のブラウザーで動作させると言っても、あまりピンとこないものかもしれない。今までこのコーナーで扱ってきたダイナミックHTMLを使えばよいのだ。つまり、スタイルシートやレイヤーとJavaScriptを組み合わせて動きを作ればよい。それでは解答を発表しよう。

A N S W E R

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

単に表示（visible）と非表示（hidden）を交互に入れ替えているだけだ。タイマーを設定すれば、一定時間ごとに入れ替えが起き、点滅しているように見える。
<SCRIPT LANGUAGE="JavaScript">function ieblink() {if (blinkblock.style.visibility == "visible") blinkblock.style.visibility = "hidden";else blinkblock.style.visibility = "visible";}</SCRIPT><BODY onLoad="setInterval('ieblink()', 750)"><DIV ID="blinkblock" STYLE="visibility:visible;">BLINK</DIV>A N S W E R

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

正解者：町谷円さん、Heron さん、良知敬介さん、
田中博英さん

レイヤーを右端（innerWidth）に置いてから、leftの値を減らしていくと、右から左へスクロールしているように見える。見えなくなったら、再び右端に置けば現れる。
<SCRIPT LANGUAGE="JavaScript">function nnmarquee() {document.marqueeblock.left = innerWidth;document.marqueeblock.visibility = "show";setInterval( 'mving()', 100);}
function mving() {document.marqueeblock.left -= 5;
if (document.marqueeblock.left <= -250)
document.marqueeblock.left = innerWidth;}</SCRIPT><BODY onLoad="nnmarquee();"><LAYER LEFT=0 TOP=250 VISIBILITY="hide" NAME="marqueeblock">
MARQUEE</LAYER>

300 INTERNET magazine 1998/12

正解者：Heronさん、田中博英さん

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

T IPS & T R ICKS

1
フォームの部品を囲む
4.0
右のサンプルは、アンケート送信用に作成されたフォームだ。ラジオ
ボタンやテキストボックスなどのフォームの部品が青い枠で囲まれているのがわかる。スタイルシートを使って枠を付けているだけだと思うかもしれない。しかし、サンプルをよく見ると、枠の左上に「あなたの情報」や「今月の評価」といった説明が付いていて、その文字は枠線の上に載せられたように表示されている。文字の位置をスタイルシートでずらしているわけではない。
HTMLで指定するだけで、自動的に説明付きの枠線が表示されるのだ。いったいどうやっているのだろうか？ フォームを使ったページを作成している人は必見だ。

d<FIELDSET><LEGEND>あなたの情報 <BR></LEGEND>
お名前：<INPUT TYPE="text" NAME="name" SIZE=40><BR>
メールアドレス：<INPUT TYPE="text" NAME="mail" SIZE=40><BR></FIELDSET>

HTML4.0では、7月号のTIPS & TRICKS1で紹HTML 4.0では、<FIELDSET> はあくまでフォーム

タグではあるが、サンプルでは次のようにスタイル介したように、<LABEL>タグやアクセスキーなど、の部 品をグループ化 するのが目的のタグであり、シートを使って少々見栄えをよくしてみた。

フォームにさまざまな改良が加えられた。フォーム内<LEGEND>でグループの説明を付けるとされていFIELDSET { padding: 8px; border-color:blue; background-color: #FFFFC0; }の部品をグループにまとめるための<FIELDSET>るだけだ。サンプルのように枠で囲まれたり、説明タグもその1つだ。<FIELDSET>を使えば、フォが枠線の上に載ったりするのは、IE 4で表示した場ーム内の数多くの部品をいくつかのジャンルに分合だけかもしれないということに注意しよう。ネッけることができるので、入力する人にとってわかりトスケープナビゲーターが将来<FIELDSET>をサやすいインターフェイスになる。

ポートしたときには、同じ表示になるとは限らない。

<FILEDSET>には、<LEGEND>タグで説明用のHTML 4.0では、見栄えのためよりも音声読 み上<FIELDSET>のスタイルを見てみよう。何も指定キャプションを付けることができる。上のサンプルのげソフトなどのために<FIELDSET>が利用される

しないと、枠線とその中身がくっついた感じになるように、<FIELDSET>タグのすぐ次に<LEGEND>と考えられているようだ。

ので「padding」
で余白を空けた。さらに「border-〜 < / L E G E N D >で囲んだ説明を書き、それから「見出し付きの囲み」を作るために、テキストだけcolor」で枠線に青い色を付け、「background-<INPUT>などのフォームの部品を記述する。

を囲んだ<FIELDSET>を使ってしまいたくなるが、color」で背景を黄色くしている。<LEGEND>で<LEGEND>〜</LEGEND> 内に<BR>タグを入フォームの部品を囲む以外の目的で使うのは避け

は、「font-weight」や「color」といったスタイルをれているのは、ネットスケープナビゲーターでもうまたほうがいいだろう。

指定して、説明の文字を太くしたり、色を付けたりく表示されるようにするためだ。

LEGEND { font-weight: bold;color: green; }している。
<FIELDSET>は「グループ化」という構造を表す

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

INTERNET magazine 1998/12301

T IPS & T R ICKS

2
ナビゲーターでヘルプを出現させる
4.0
2月号のTIPS & TRICKS 4「文字列に対してヘルプを出現させる」で、マウスカーソルを文字の上に載せると小さいヘルプを表示させる方法を紹介した。これは、各種タグの「TITLE」属性をサポートしているIE 4だけが対応しているもので、他のブラウザーを使っている人には意味がないTIPSだった。今回紹介するのは、ナビゲーター4で同様のヘルプを表示させるTIPSだ。
レイヤーを使うため、単に文字を表示させるだけでなく、文字色や背景色を変えるなどIE 4 のTITLE 属性ではできないさまざまな表現ができる。ウェブデザイナーにとっては朗報となるだろう。それではさっそく見てみよう。

d1

var msg = new Array();msg[0]="これからの……";
msg[1]="ネットスケープ社が……";：
function show (x, y, str) {obj = document.layers ["helpLay"];if (x < outerWidth / 2) obj.moveTo (x, y + 20);
else obj.moveTo (x - 300, y + 20);
obj.document.write (str);
obj.document.close ();obj.visibility = "show";}function hide () {document.layers ["helpLay"].visibility = "hide";}2<A HREF="javascript:void(0)"onMouseover="show (event.pageX, event.pageY, msg [0])"onMouseout="hide ()">Dynamic HTML</A>

3<LAYER NAME="helpLay" VISIBILITY="hide"
BGCOLOR="lemonchiffon"></LAYER>

このTIPSは、リンクの上にマウスカーソルを載3つの引数があるが、これには呼び出し元である

最後に、<LAYER>タグでヘルプ用のレイヤーを作せることでヘルプを出現させるダイナミックHTML<A>タグ内の「onMouseOver=」で渡された値る（ソース3）。
「NAME」で「helpLay」という名だ。ヘルプはレイヤーでできているため、ネットスが入る。つまり、「x」にはカーソルの左右の座標前を付け、「VISIBILITY」で 非表示を指定し、ケープナビゲーター4だけで動作する。スクリプト「event.pageX」が、「y」にはカーソルの上下の「BGCOLOR」で背景色を付けている。次のようにとそれを呼び出す<A>タグ、それに<LAYER>タ座標「event.pageY」が、「str」にはヘルプのメ「show」関数を書き換えてレイヤーの「bgColor」グの3つから成り立っている。

ッセージ「msg [0] 」などが入る。「x」と「y」を使を変更すれば、ヘルプの背景色を自由に変えるこってヘルプ用レイヤーの位置を移動する際には、ともできる。

ソース1のスクリプトを見てみよう。まず、ヘルプ用のメッセージの配列を作成する。
「msg [0] = "こif〜elseで位置を調節する。この条件分岐がないれからウェブの主流 になる可能性 の高い表現方い、読めなくなる場合があるので注意しよう。ヘ法です。";」のように、"〜"で囲んだ部分がレイヤ

ルプのメッセージは、「document.write」を使っ：ーの表示内容になる。"〜"の中にはテキストだけてレイヤーに文字を書き込んで変更する。書き込

obj.bgColor = color;：とレイヤーの位置がブラウザーの外になってしま

ではなく、<IMG>タグを入れて画像を使ったヘルんだら「document.close」を呼び出すこと。

プを作ることもできる。

<A>タグ内の「onMouseout=」で指定している

次に、ヘルプを表示する関数「show」とソース2「h i d e 」だ。また、「H R E F 」には「j a v a s c r p i t :void (0)」を指定してクリックを無効にしている。

function show (x, y, color, str) {obj = document.layers ["helpLay"];のは、ヘルプのレイヤーを非表示状態にする関数の<A>タグを見比べてみよう。関数「show」には302 INTERNET magazine 1998/12

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

T IPS & T R ICKS

3
拡縮ワイプで画像を入れ替える
4.0
何はともあれ、左のサンプルを見ていただこう。最初に表示された1 枚目の画像がだんだん上に縮まり、下から新たに2枚目の画像が現れるのがわかるだろう。そして、2枚目の画像がまた上に縮み、もとの1 枚目の画像がまた下から現われ、これが繰り返される。アニメーションGIFを使っているわけではない。2枚の画像の位置と高さを変えてアニメーション表示させているのである。サンプルの画像は、一見すると回転しているように見えるが、これは「拡縮ワイプ」と言われるものである。ここでは上下の拡縮ワイプだが、少し変えれば左右の拡縮ワイプも可能なので、マスターしていろいろ応用してみよう。

d1
img1 = "image1"; img2 = "image2";
step = 5;function wipe () {if (document.all (img1).style.pixelHeight >= step) {document.all (img1).style.pixelHeight -= step;
document.all (img2).style.pixelTop -= step;
document.all (img2).style.pixelHeight += step;} else {document.all (img1).style.pixelHeight = 0;
document.all (img2).style.pixelTop = 40;
document.all (img2).style.pixelHeight = 155;
document.all (img1).style.pixelTop = 40 + 155;
temp = img1; img1 = img2; img2 = temp;}}

2<IMG ID="image1" SRC="image01.gif"
STYLE="position:absolute; top:40; left:40;
width:364; height:155;"><IMG ID="image2" SRC="image02.gif"
STYLE="position:absolute; top:195; left:40;width:364; height:0;">

まずは、画像の配置だ。幅と高さがまったく同

次に、2枚の画像をどのように動かしていけばいい像の高さが「step」の値より小さくなったら、動かじ2 枚の画像を用意する。ソース2のように、1枚目かを見てみよう（ソース1）。2つの変数「img1」とすことをやめて、2枚の画像の位置や高さを次のよの画像の<IMG>タグにスタイルシートで「position:「img2」にそれぞれ1 枚目の画像と2枚目の画像うに調節する。

absolute;」
を指定し、
「top」
、「left」、「width」、の名前（ID属性）を最初に入れておき、この2つの「height」の値をそれぞれ指定して、どこか好きな変数を関数の中で使っていくことにする。また、変img1のpixelHeight：0

場所に置く。2枚目の画像は次のようにする。

数「step」に一度に動かす幅（ここでは5）を指定

img1のpixelTop：2枚目の最初のY座標しておく。

img2 のpixelHeight：画像の高さ

top: 1枚目の top + 1枚目のheight

関数「wipe」の中では、まず「img1」の画像を縮img2 のpixelTop：1枚目の最初のY座標

left: 1枚目のleftと同じ値

める（「style.pixelHeight」を小さくする）。それか

width: 1枚目のwidthと同じ値

ら「im g 2 」の画像の位置を上にずらし（「s t y l e .

こうした調節をしないと、動かしたときに位置がず

height: 0

pixelTop」を小さくし）、「img2」の画像を伸ばすれてしまったりしてうまく拡縮ワイプができない。調（「style.pixelHeight」を大きくする）。これを繰り節したら、変数「img1」と「img2」の値、つまり画返し行うわけだ。

像の名前を交換する。

初の段階では、高さは0 なので2 枚目の画像は表「step」の分だけ移動させることを繰り返している

最後に、<BODY>タグで「onLoad="setInterval('wipe ()', 50);"」として、 一 定 時間ごとに関 数示されない。

ので、このままでは「step」の値以下の半端 な部「wipe」が呼び出されるようにする。これで2枚の分が残ってしまうことになる。そこで、「img1」の画画像が次々と入れ替わるようになる。

このように設定することで、1枚目の画像のすぐ下に2枚目の画像が置かれるようになる。ただし、最インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/12303

T IPS & T R ICKS

4
データバインディング機能でデータベースを利用 その1
4.0

1

ウェブとデータベースを連結させてダイナミックなページを見せるしく
みは、古くはCGIで、最近ではIIS（インターネットインフォメーションサーバー）＋ASP（Active Server
P a g e s ）で使うA D O（A c t i v e X
Data Object）やオラクルのウェブアプリケーションサーバーなどを便利に利用して作成できる。だが、これらのテクニックはサーバー上のアプリケーションの機能に頼っているので、プロバイダーのホームページサービスでは残念ながら利用できなかった。ところが、IE 4にはサーバーにまったく頼らずにデータベースを利用できる機能がある。
ここではこの「データバインディング機能」を紹介しよう。

d<OBJECT ID="tdcWeather" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"><PARAM NAME="FieldDelim" VALUE=","><PARAM NAME="DataURL" VALUE="database.csv"><PARAM NAME="TextQualifier" VALUE="'"><PARAM NAME="UseHeader" VALUE="true"></OBJECT>23<TABLE datasrc=#tdcWeather><TR><TD><SPAN datafld="City"></SPAN></TD><TD><SPAN datafld="am_early"></SPAN></TD><TD><SPAN datafld="am_late"></SPAN></TD><TD><SPAN datafld="pm_ealry"></SPAN></TD><TD><SPAN datafld="pm_late"></SPAN></TD></TR></TABLE>'City','am_early','am_late','pm_ealry','pm_late''Los Angels',20,20,30,40'Chicago',10,0,0,10'New York',10,10,20,10'London',40,50,50,20'Paris',20,20,30,10'Berlin',20,30,10,0'Beijing',20,10,10,10'Tokyo',30,40,40,10

データバインディング機能は、データソースオ込み対象のCSVファイルを作成しておこう（ソース

最後に、 この CSV データベースから読 み出した

ブジェクト（DSO）と呼ばれるActiveXやJava の3）。一番上の行には各フィールドの名前を書いて値を、テーブルにして表示させよう（ソース2 ）。

オブジェクトを使ってデータベースファイルにアクセおく。2 行目からが実際のデータだ。都市名と4つ<TABLE datasrc=#tdcWeather>として、さきほスし、その中のデータをHTMLに埋め込んで表示の数値、合わせて5つのフィールドを作る。文字列

ど作ったTD CオブジェクトのIDを指定する。そしさせるものだ。DSOはクライアント側で動くので、は「''」でくくり、各フィールドはカンマで区切る。行て<TD> タグ内で<SPAN datafld="City"> としどんなウェブサーバーを使用しているサイトでも機は改行することで自動的に区切られる。このファイて、CSVファイルで使ったフィールド名を指定し、能する。

ルはあとでサーバー上に置いておくことになる。

このセルにどのフィールドを表示するのかを決めよ

サンプルでは最 も基 本 的な DSO である、TDC

続 いて、このCSVファイルを読み込むHTMLファう。面白いのは、<TABLE>タグ内には<TR>は1（Tabular Data Control）を使用して、各地の降水イルを作成する。最も重要なのは、TDCオブジェ組だけでよいこと。あとは自動的にすべての行が確率を表示するHTMLを書いてみた。このようなクトの定義だ。<OBJECT>タグでActiveXコント読み込まれ、行数だけ<TR>が生成される。日付

ページは、フォーマットは変化しなくても中身の値ロールを追加する（ソース1）。
「ID」属性は「tdcが変わって降水確率が変わったら、CSVファイルだけは毎日変わるので、データベースの値を動的W e a t h e r 」とする。< P A R A M > タグの「F i l e dだけを変更すればよい。に組み込むことができれば、作成が非常に楽にな

Delim」は区切り文字の「 , 」のこと、「DataURL」

データバインド機能では、ADOのように「Recordset」る。ふだんはデータベースだけを更新すればいいは読み込むファイル名、「TextQualifier」は文字オブジェクトを使って、必要なレコードの必要なフィわけだ。

列をくくった文字の「 ' 」のことだ。
「UseHeader」

ールドだけを取り出したり、カーソル移動をしたりTDCとはIE 4.0以 降 に付属 するコントロールで、を「True」にするのは、CSVの1行目がフィールドできる。今回はテーブルによる自動表示を扱った

CSVファイル（テキスト形式の簡易データベース）名定義行だということを知らせるためだ。わからなので、次回はもう少し高機能な処理に挑戦してみにアクセスする機能を持っている。最初に、読みいときは上のとおりに書いておこう。

よう。

304 INTERNET magazine 1998/12

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

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

今月のテーマ文字レイアウトを制する
HTML文書の構造を組み立てていくのが HTMLタグの役割なら、文書のデザイン部分を担っているのは、この連載でもずいぶん取り上げてきたスタイルシートだ。色やフォントのためだけでなく、文字をレイアウトするためにスタイルシートを使え「HTMLパズルに挑戦しよう」
宛 先ば、ふつうのページを見栄えのするデザインに変えることができる。そこD

で今月は、文字のレイアウトに関するパズルに挑戦していただく。トリッ正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！

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

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

Q U E S T I O N

1 文字を重ねろ！

4.0

左のサンプルを見てほしい。タイトルの文字にグラデーションがかかり、見栄えのするデザインになっている。といってもグラデーションのかけ方が問題なのではない。よく見ると、文字と文字が重なっているのわかるだろうか。サンプルのように大きめのフォントを用意して。色違いの文字を重ねて書くだけでもずいぶん印象が違ってくる。第1問では、文字と文字を重ね合わせる方法を考えてほしい。文字をいくつか用意して、「margin-top」を使って配置する方法もある。しかし、あるスタイルシートのプロパティーを1つ加えるだけで、もっとスマートにできる方法があるのだ。いったい何を加えればよいだろうか。さあ、やってみよう。
ヒン
トQ U E S T I O N

文字の高さより何かを小さくすれば……

2 間隔を開けて文字を配置しろ！

4.0

第2問も、まずはサンプルを見てほしい。タイトルの部分に文字が等間隔で配置されており、その間隔が比較的大きく取ってあるのがわかるだろうか。こんなふうに広い間隔を空けて文字を置くと、これもなかなか見栄えのするデザインになる。一定の間隔を開けて文字を配置するにはどうすればいいか、それが第2問だ。文字と文字の間に全角スペースをいくつか埋めていくという手もあるが、あまりよい方法とは言えない。第1問と同様に、あるスタイルシートの属性を1つ加えるだけでできるスマートな方法があるので、それを考えてほしい。第1問、第2問ともに、解答は単純なものなので、スタイルシートを詳しく調べて挑戦しよう。
ヒント「文字−間隔」というプロパティーは……

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

INTERNET magazine 1998/12305

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