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

今月の本誌付録の小冊子は、お待ちかねの「HTML TIPS & TRICKS 58連発」だ。第1回から先月までのTIPSとパズルから特に役立つものを精選した3.0保存版だ。最近この連載を読み始めたばかりの方も、小冊子を手元に置いて4.0

COOLなページ作りの情報源としてもらいたい。それでは今月もあっと言わせるデザインから高度なスクリプトまでさまざまなTIPSをお届けしよう。

3.0

CD-ROM収録先 A Magnavi→Ip9901→Htmltips+CD-ROM 今月号のTIPSをすべてCD-ROMに収録！！

4.0

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

12月号「HTMLパズルに挑戦しよう」の解答
今回は比較的簡単だったせいか、応募者全員が正解だった。テクニカルな部分の多い今までのパズルと比べたら、今回のパズルはとっつきやすかったのかもしれない。それでは解答を発表しよう。
（第1問はナビゲーター4でも使えるものでした。お詫びして訂正させていただきます。
）

A N S W E R

1 文字を重ねろ！

1行の高さを指定するline-hegihtを使えばよい。これをフォントの大きさより小さくすれば、あとは文字を配置していくだけで文字を重ねられる。
<DIV STYLE="font-family:Times New Roman; font-size:72pt; font-weight: 900;
line-height: 36pt;"><DIV STYLE="color:#404040;">HTML</DIV><DIV STYLE="color:#808080; text-indent: 50px;">TIPS and</DIV><DIV STYLE="color:#ffffff; text-indent: 100px;">TRICKS #22</DIV></DIV>A N S W E R

正解者：熊本芳朗、米澤慎一郎、いのうえ、石橋達也、良知敬介、田中和也、川瀬達矢、藤島英史、倉賀野修、田中博英（敬称略）

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

文字と文字の間隔を指定するletter-spacingを使えばよい。ちなみに数値はマイナスの値でも指定できるので、文字の間隔をせまくすることもできる。またletter-spacingにnormalを指定すると間隔を元に戻せる。
<DIV STYLE="position:absolute; left:100; color: blue; font-weight: 900;
font-size:24pt; font-family: 'Courier New'; letter-spacing: 36pt;"><SPAN STYLE="font-size: 36pt;">H</SPAN>TML<BR><SPAN STYLE="font-size:36pt;">T</SPAN>IPS<BR><SPAN STYLE="font-size:36pt;">A</SPAN>nd<BR><SPAN STYLE="font-size: 36pt;">T</SPAN>RICKS<SPAN STYLE="font-size: 36pt; letter-spacing: normal;">#22</SPAN></DIV>

310 INTERNET magazine 1999/1

正解者：熊本芳朗、米澤慎一郎、いのうえ、石橋達也、良知敬介、田中和也、川瀬達矢、倉賀野修、
田中博英（敬称略）

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

T IPS & T R ICKS

1
フォームをデザインする
4.0
今までのフォームのテキストボッ
クスでは、背景が白でテキストが黒という何の変哲もないデザインしか使用できなかった。ホームページのデザインに凝っている人には悩みの種だったに違いない。ところが、IE 4からはフォームの部品にスタイルを設定できるようになった。そこで今回は、スタイルシートを使用してちょっと変わったデザインのフォームを作成するTIPSを紹介しよう。投稿者を楽しませる仕掛けを作って、訪れてくれるゲストを引き付けることもホームページ作りでは大切な要素の1つだ。ホームページで投稿フォームなどを作っている人は、ぜひこうしたスタイルを設定してみてほしい。

d1

2<STYLE TYPE="text/css">.fs { color:white; font: 12pt 'MS ゴシック' }.ipt { background-color: dodgerblue; color: white; font: 12pt 'Comic Sans MS' }</STYLE><INPUT TYPE="text" CLASS="ipt"><TEXTAREA CLASS="fs" STYLE="background-image: url (gra.gif)"><INPUT TYPE="submit" CLASS="fs" STYLE="background-color: orange">2 では、各部品にCLASS 属性を付けて1で設

まず上の画面を見てほしい。普通のフォームる。フォントの種類によっては、名前の中にスペーとはデザインがかなり違い、テキストボックスやボスが入っているものがあるので、その場合はフォン定したスタイルを呼び出している。テキストエリア

タンの背景に色や画像が付いていて、文字が白色

ト名をシングルクォート（' '）で囲み、ブラウザーが（<TEXTAREA>） とボタン（ <INPUT TYPE=になっていることに気付くだろう。これは、1行テキきちんと認識できるようにしよう。

"submit">）
では、STYLE属性も指定して背景にストボックス、テキストエリア、ボタンの各部品にここでは、「font」というフォントの属性を一括して画像や色を指定している。テキストエリアの背景スタイルシートを使用しているためだ。スタイルの指定できるスタイルシートのプロパティーを使ってはグラデーションになっているが、これは縦に細長設定は一般的なスタイルシートの指定方法と同じいる。この fontでは、以下のプロパティーの値をい画像を並べたものだ。

で、CLASS属性やSTYLE属性を利用できる。ここまとめて指定できるので、記述を省略したい人はでは両方の属性を使って、<HEAD>〜</HEAD>使ってみてほしい。

これでオリジナルデザインのフォームは完成だ。このコーナーの読者なら、スタイルシートはすでにお間で指定したスタイル設定を呼び出したり、部品にワンポイントのスタイルを指定したりしている。

font-stylefont-variant

font-size/line-height

font-weight

font-family

なじみになっているはずだ。自分のホームページで応用して訪問者を楽しませてみよう。

1のSTYLEタグでの指定では、クラス名「fs」の文字色をwhiteに、フォントを12ポイントのMS ゴ

なお、指定する順序 は基本的 に上に示したとおシックに指定している。また、クラス名「ipt」の背りで、省略したプロパティーには初期値が適用さ景色をdodgerblue に、文字色をwhiteに、フォれることに注意しよう。

ントを12ポイントのComic Sans MSに指定していインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1999/1

311

T IPS & T R ICKS

2
記念日にメッセージを表示させる
3.0

4.0

3.0

4.0

日本人は記念日が好きだ。読者も何かの記念日を設定して楽しんでるのではないだろうか？ そんな人にぴったりのTIPS がこれだ。
JavaScriptでパソコンの時計を参照して、指定日になったらメッセージを表示させるページだ。元旦や成 人 の日になると、「 A HAPPYNEW YEAR」などその日にふさわしいあいさつがページの冒頭に現れる。スクリプト自体は最新のテクニックを使っていないので、バージョンが古いブラウザーでも動作する。互換性を気にせず気軽に使えるスクリプトだ。これからはクリスマスやお正月、成人式やバレンタインデーなどの記念日が目白押しなので、ぜひ使ってみてほしい。

d<SCRIPT LANGUAGE="JavaScript">
var msg = new Array ();msg [0] = 'A HAPPY NEW YEAR !!';
msg [1] = 'Congraturation, 20th……!';
var month = new Array ();month[0] = 1; month[1] = 1;
var day = new Array();day[0] = 1; day[1] = 15;

このTIPS は、JavaScriptを使用して、指定日

var date = new Date ();var m = date.getMonth () + 1;
var d = date.getDate ();for (i = 0; i < 2; i++) {if (m == month [i] && d == day [i]) {document.write(msg[i]);}}</SCRIPT>

増やしてよい。

ージが表示される。month [i]、day [i]、msg [i]には、先に指定した配列番号の要素が入っている。になるとあらかじめ用意しておいたメッセージを表示させるものだ。スクリプト自体はそれほど複雑

次に、Dateオブジェクトを使って現在の日付を取得ではないので、よく読んで使ってみてほしい。

する。日時に関する処理を行うときは必ずDateをちなみに、このwrite ()にはタグやスタイルシートをこのスクリプトは必ず<BODY>〜</BODY>の間使うことを覚えておこう。ここでは、Dateオブジェ含んだ文字列を指定することもできる。write ()にに記述しなければいけない。そうしないとブラウザ

クトを変数dateとして扱い、getMonthメソッドでタグなどを指定するときは、シングルクォート(' ')でーがメッセージを表示する位置を判断できなくな

取得した月とgetDateメソッドで取得した日を、そ囲むようにしよう。ってしまう。注意しよう。

れぞれ変数mと変数dに入れている。注意しなけ
ればいけないのは、getMonthで得られる月は0か

document.write ('<B>' +msg [i]+ '</B>');

まず、メッセージ（msg）、月（month）、日（day）ら始まるということだ。つまり、1月なら0 に、10の配列をそれぞれ作る。配列を使う場合は、配列月なら9になる。そのため、ここではgetMonthに今回紹介したJavaScriptはナビゲーター、IEともオブジェクトArrayを宣言することを覚えておこう。
「msg [数字]」の右にあるシングルクォート(' ')で1を加えたものを変数mに入れている。にバージョン3でも動作するので、互換性を気に囲 まれた文 字 列 が表 示 するメッセージになり、最後に、得られた現在の月日によって表示するメッTIPSの使用を控えていた人は、このスクリプトを「month [数字]」と「day[数字]」の右がそれぞれセージを変える処理を行う。ここではforループを使って{ } 内の処理を2度行い、if 文の条件が一致ぜひ使ってもらいたい。

メッセージを表示する月と日になる。ここではメッセージと月日は2つずつだが、その数はいくらでもしたときにdocument.write ( )が実行されてメッセ

312 INTERNET magazine 1999/1

せずに使える。今まで互換性が気になって最新のインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

T IPS & T R ICKS

3
発光アニメーションを作る
4.0
この連載でさまざまな形で取り上げてきたインターネットエクスプローラ4.0のビジュアルフィルター。ビジュアルフィルターだけで影や光、波型など画像処理ソフトを使わなければできないような効果を手軽に加えることができる。ところで、フィルターのパラメータはスクリプ
トから参照したり操作したりできることをご存じだろうか？ フィルターとJavaScriptを連携させれば、フィルターだけではできない特殊な効果を作り出せる。今回取り上げるのは、G l o wフィルターとJ a v a
Script の連携で画像や文字の輝きをダイナミックに変える発光アニメーションだ。それでは、さっそくご覧いただこう。

d1<SCRIPT LANGUAGE="JavaScript">step = 1; count = 1;function radiation () {if (count > 4 || count < 1) step *= -1;
count += step;
SAMPLE.filters ["Glow"].Strength = count * 4;}</SCRIPT>

2<BODY onLoad="setInterval ('radiation ()',250);">3<DIV ID="SAMPLE"
STYLE="position: absolute; top: 25; left: 25;
color: #000000; padding: 50;
Filter: Glow (Color:#0000ff,Strength=0);"><IMG SRC="htmark.gif"
STYLE="Filter: Mask (Color=#000000);"
width=200 height=200><BR>HT MARK</DIV>

ここで使われているGlowフィルターは、画像

20 の6 段階用意している。数値は0から100までや文字の縁の外側を発光させ、浮き出ているようの範囲で指定したほうがいいだろう。100が最大色と同じ色のMaskフィルターをかけたものにGlow
フィルターをかけると、より効果を高めることができな効果を出すことができるものだ。このフィルターるだろう。のパラメータは、発光の色を指定するColorと発光の 強さと な る 。B O D Y タグ で「 o n L o a d ="setInterval ('radiation()',250);"」として（ソースの強さを指定するStrengthの2つだ。Strengthの2）、Strengthを変える関数radiationを一定時間

ここで取り上げた発光アニメーションのほかにも、値を一定時間ごとに変えていくことで、あたかもピごとに呼び出し、Strengthを増減させている。

フィルターとJavaScriptの連携によって強力な特カピカと不気味に輝くアニメーションを作り出すこ

発光させる対象のオブジェクトに対してフィルター殊効果を引き出すことができる。パラメータをいろとができるのだ。

をかけるとき、そのままだとサイズに合わせて発光いろと変化させてみよう。思わぬ効果を見つけるしている部分が切り取られてしまうことがある。そことができるかもしれないぞ。次回のTIPSでは、発光の強さStrengthは、スクリプトの中で次の式

こで、オブジェクトにスタイルシートのpaddingをAlphaフィルターを使ったフェードイン・アウトを使って設定できる。

設定して余白を空けるようにした（ソース3）。発処理を取り上げることにしよう。

光の強さを大きくする場合は、それに合わせて余オブジェクト名.filters ["Glow"].Strength

白を大きめに取ったほうがよいだろう。

= 数値;
ここで特殊効果に関するアドバイス。文字列を発これを使って数値を段階的に変えていけばよい（ソ

光アニメーションさせる場合、文字の色を背景色ース1）。サンプルでは、Strengthを0、4、8、12、16、と同じ色にするとよい。画像の場合は、一度背景

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

T IPS & T R ICKS

4
データバインディング機能でデータベースを利用 その2
4.0
前回は簡単なデータソースオブジェクトTDC（TabularData Control）を使用して、HTML のテーブルにCSVファイルのデータを表示させる方法を紹介した。今回は、INPUTタグで作ったテキストボックスに、データベースのレコードを1つ表示し、 なおかつスクリプトを使って次々とダイナミックに別のレコードを呼び出していくようなデータベースらしい使い方に挑戦してみる。左のサンプルでは、7つのテキストボ
ックスに生徒のデータが表示され、ボタンを押すと、次や前の生徒のものに切り替わったり先頭や最後のものにジャンプしたりする。前回紹介したTDCの使い方を思い出しながら試してみよう。

d1<OBJECT ID="tdcStudent" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"><PARAM NAME="FieldDelim" VALUE=","><PARAM NAME="DataURL" VALUE="recordset.csv"><PARAM NAME="TextQualifier" VALUE="'"><PARAM NAME="UseHeader" VALUE="true"></OBJECT>2<INPUT TYPE=TEXT DATASRC=#tdcStudent DATAFLD=code><INPUT TYPE=TEXT DATASRC=#tdcStudent DATAFLD=first><INPUT TYPE=TEXT DATASRC=#tdcStudent DATAFLD=last>：

まずサンプルを見てみよう。ページの右側の表

3<INPUT TYPE=BUTTON VALUE="<<"
onClick="tdcStudent.recordset.MoveFirst ()"><INPUT TYPE=BUTTON VALUE=" < "onClick="tdcStudent.recordset.MovePrevious();if (tdcStudent.recordset.BOF)
tdcStudent.recordset.MoveFirst ();"><INPUT TYPE=BUTTON VALUE=" > "onClick="tdcStudent.recordset.MoveNext ();if (tdcStudent.recordset.EOF)
tdcStudent.recordset.MoveLast ();"><INPUT TYPE=BUTTON VALUE=">>"
onClick="tdcStudent.recordset.Movelast ();">

コードを移動して別の生徒の情報を表示できるよ

if ( tdcStudent.recordset.BOF )tdcStudent.recordset.MoveFirst ();は前回と同じく、OBJECTタグでTDCのデータソうにしよう。

ース（ここではtdcStudent）
を作成し（ソース1）、Visual BasicなどでデータベースアプリケーションTABLEタグに結び付けたものだ。左側のテキストを作ったことのある人はご存じだろう。通常、デーBOFは先頭のレコードを使っていることを表すプ

ボックスにも同じデータソースを結び付けている

タオブジェクトはその下にレコードセットと呼ばれるロパティーだ。最終レコードのときも同じように、が、テーブル型ではなくシングルバリュー型のINPUTオブジェクトを持っている（tdcStudent.recordset）。

EOFプロパティーをチェックしてMoveLastメソッド

タグを使っているので、データベースのレコードが1そしてそのレコードセットオブジェクトでは、レコーを使用しよう。

つ1つ（生徒1人分ずつ）表示されている。

ドを移動するための4つの基本的なメソッド（Move

以上のように簡単なスクリプトでデータベースを参

シングルバリュー型でも、データを結 び付ける方法

First、MovePrevious、MoveNext、MoveLast）照するページができる。これを応用して、ある条件はテーブル型と同じだ。DATASRC属性でデータが提供されている。これらの各メソッドをボタンのに合致するまでMoveNextを繰り返すようなスクソースの名前（tdcStudent）を設定し、DATAFLD

onClick イベントに関連付けて、ボタンを押すとリプトを書けば検索サイトも作れることになる。き属性で結び付けるフィールド名（codeなど）
を指定

INPUTタグに表示されるレコードが変わるようにみもウェブデータベースプログラミングに挑戦だ！

する（ソース2）。今回7つのフィールドを持つデーした（ソース3）。ここで注意するのは、先頭のレコ

タベースファイルを使っているので、7つのINPUTードを表示しているときに、さらにMovePreviousタグを作っておこう。

メソッドを実行すると問題があるので、次のように結び付けが成功した最初の状態だと、データベー

MoveFirstメソッドを使うことだ。

スの1番目のレコードが表示されている。次に、レ314 INTERNET magazine 1999/1

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

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

今月のテーマフォントのサイズ変更を制する
ホームページを見ているときに、文字の大きさが小さすぎて読みにくい場合があるだろう。そんなとき、フォントのサイズを自由に変えられたらとても助かる。サイズを大きくしたページを別に用意する方法もあるが、それよりはページの更新なしで「HTMLパズルに挑戦しよう」
宛 先

大きさを段階的に変えられるほうがいいだろう。そこで今月は、フォントDのサイズをダイナミックに変更するパズルに挑戦していただく。トリックが正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！

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

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

Q U E S T I O N

1 フォントのサイズを変更せよ！

4.0

まずは左にあるサンプルを見ていただこう。このサンプルでは、中央の背景が水色の部分のフォントサイズを変えることができる。
「フォントを小さく」と「フォントを大きく」の2つのボタンがあり、ボタンをそれぞれ押して、サイズを段階的に変えられる。しかもサイズを変えるためにページを移動する必要はないのだ。第1問では、このサンプルのようにフォントのサイズを動的に変える方法を考えていただきたい。なお、エラーが出ることを防ぐために、変更できるサイズの範囲をある程度限定すること。また、フォントの種類や色などはサイズを変更しても影響を受けないようにすること。さあ、やってみよう。
ヒント

Q U E S T I O N

スタイルシートに対応するJavaScriptのプロパティーは……

2 表示部分にスクロールバーを付けろ！

4.0

フォントサイズを動的に変えると、ちょっとした問題が起きる。スタイルシートのheightで高さを指定した場合、フォントを大きくしたときにheightの高さを超えると、超えた部分があふれて表示されてしまうことだ。これではレイアウトを崩してしまうことになる。そこで、フォントを大きくした場合でもあふれずにheightで指定した高さのまま表示させるようにしたい。第2問では、そのための方法の1つとして、左のサンプルのようにスクロールバーを付ける方法を考えていただきたい。ただし、フレームを組み合わせる方法は使わないこと。複雑なことをしなくてもスクロールバーを付けることはそれほど難しいことではない。
ヒン
ト「あふれる」を指定するスタイルシートは……

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

INTERNET magazine 1999/1315

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