このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性の誰よりも早く最新のHTMLを使ってみたい藤井幸孝／大内 勇／高橋登史朗／佐藤和人

問題だ。そこでこのコーナーでは、TIPSごとにブラウザーの対応状況をアイコンで表している（4月10日現在）。これを参考に使用するWWWブラウザーを選んでほしい。

3月末にリリースされたインターネットエクスプローラ（IE）6のパブリックプレ

4

インターネットエクスプローラ4以上

ビューはすでに試してみただろうか。正式版リリースに先駆けて、これからは

5

インターネットエクスプローラ5以上

IE 6のTIPSを紹介していくのでぜひチェックしてみてほしい。また、このほか

5.5

インターネットエクスプローラ5.5以上にもウェブページを効果的にアレンジするなど、今月はIE 5.5および6にター

6

インターネットエクスプローラ6（パブリックプレビュー）

ゲットを絞ってさまざまなテクニックをお届けしよう。

4

ネットスケープナビゲーター4以上

6

ネットスケープ6以上

CD-ROM収録先

Å Magnavi→Ip0106→Htmltips+CD-ROM 今月号のTIPSをすべてCD-ROMに収録!!
M0.8

Mozilla5月号「HTMLパズルに挑戦しよう」の解答
HTMLのごく基本的な機能を利用したもので、タグさえ使わない問題だが、いかがだったろうか。あまり意識されることはないが、ユニコードの採用はHTML 4の大きな特徴になっている。このHTML 4の新機能を使ってページにちょっとした遊びを加えてみたのがこのパズルだ。

A N S W E R

1 ハートマークを描け！

HTML 4の文字実体参照を使い、&spades;のように記述する。&amp;や&copy;と同じ要領だ。&#x2660;のように数値文字参照を用いてもよい。うまく表示されないときは、フォントの種類をいろいろ変えて試してみよう。
&spades;&hearts;&clubs;&diams;A N S W E R

正解者：ENDEさん、Masahiko Murataさん、なるるさん、鼎甲子さん、MIKAGE Shionさん、堀江さん、坂部和久さん、山口雅仁さん

2 雪だるまを描け！

「&#x」から始まる数値文字参照を使い、ユニコードの2600から2603（16進数）の番号を直接指定する。HTMLファイルの文字コードをユニコードにして、文字を直接テキストとして埋め込んだ解答も正解とした。
&#x2600;&#x2601;&#x2602;&#x2603;

290 INTERNET magazine 2001/6

正解者：ENDEさん、Masahiko Murataさん、なるるさん、鼎甲子さん、MIKAGE Shionさん、堀江さん、坂部和久さん、山口雅仁さん

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

ユニコード（Unicode）：漢字やハングル文字をはじめ、世界各国のあらゆる文字を表示する統一型の文字コード。当初1つ1つの文字を2バイトで表現していたが、文字数の都合上、世界中の文字を余すところなく表現できなくなってきたために、1文字の区切りを2バイト超（不定）に拡張したUnicode2.0などが策定されている。
©1994-2007 Impress R&D

TIPS & TRICKS

1
自作のカーソルを表示する
6
IE 6パブリックプレビューの新機能をさっそく紹介しよう。スタイルシートにカーソル（マウスポインター）を変更する機能があるのは、この連載の読者ならご存じだろう。ページ上の好きな部分でカーソルを指の形にしたり、砂時計にしたりできる。しかし、今までは限られた種類のなかからカーソルを選べるだけで、好きな画像は割り当てられなかった。1999年6月号の「マウスカーソルを追いかけるアイコン」のように、スクリプトを書けば不可能ではないが面倒だ。IE 6では適切なファイルを用意すれば、短い記述でカーソルを置き換えられる。それでは試してみよう。
（佐藤和人）

d<P STYLE="cursor: url(tips.cur);">

まずは、マイクロソフトのサイトから最新のベータ版である、IE 6パブリックプレビューをダ

DIV.div1 { cursor: wait; }ウンロードしよう。
www.microsoft.com/japan/ie/preview/

このcursor プロパティーに指定できる値には、IE 6ではパーソナルバーなどのブラウザーのインスチョンマーク）などがある。IE 6では、ここにターフェイスを中心に強化が図られているが、も背景画像と同じように「url」を使ってカーソルちろんHTMLやスタイルシートにも新機能がいくファイル（curファイル）を読み込めるのだ。

waitのほかに、pointer（指の形）やhelp（クエつも追加されている。とくに、これまで中途半端だったHTML 4やCSS 1、2といった標準規格のDIV.div2 { cursor: url (mycursor.cur ); }www.khsoft.gr.jp

サポートが進んでいる。ここで紹介する自作カーソルの指定も、CSS 2で定められているものだ。

ウィンドウズのカーソルファイルを作るには、専IE 6のスタイルシートでは、curファイルだけでな用のソフトが必要だ。普通のグラフィックソフト

くアニメーションカーソル（aniファイル）も指スタイルシートでカーソルを変える機能をおさらでは作 成 できない。 たとえば、 シェアウェア定できる。KH IconStudio98と同じ作者によるいしよう。次のように指定すれば、「div1」とい（1,000円）のKH IconStudio98はウィンドウズ

KH ANIMedit97（シェアウェア、1,200円）をうクラス属性のDIVタグがあるところにマウスを用のアイコン作成ソフトだが、2色からフルカラ

使えば、カーソルがアニメーションするウェブペ動かしたときに、カーソルが砂時計の形に変わる。

ーまでのカーソルを作成する機能も備えている。

ージも作れるようになるぞ。

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

ベータ版：アプリケーションなどにおいて、最終完成前のバーションにあるもの。ベータ版を広く公開してユーザーからバグ情報などを集めることで、製品の完成度を高めていくメーカーも多い。
©1994-2007 Impress R&DINTERNET magazine 2001/6

291

TIPS & TRICKS

2
テキストを書き換えられるようにする
5.56

ホームページを訪れた人が画面のなかで文字を書き込めるところといえば、フォームのテキストボッ
クスくらいしか な い。ところ がIE 5.5 以降では、フォーム以外の通常の文章も直接編集できるようになっている。とはいえ、サーバーにアップロードされているファイルを書き換えるわけではなく、あくまでブラウザーに表示されたウェブページのテキストを書き換えるだけなので、使い道を思いつくのは大変だ。そこで、今回は演出に趣向を凝らして、ちょっとしたお楽しみサンプルを作成した。左のテキストをいろいろ書き換えて、ウィンドウ右下の「reboot」ボタンをクリックしてみよう。
（藤井幸孝）d<DIV ID="text0" contenteditable="true">....</DIV>

編集できるテキストを用意するためのコードは、ニメーションと、先月号の光源フィルター（スポッなページも作れるはずだ。ホームページを見にき上に書いたように驚くほど簡単だ。<DIV>タグやトライト）を組み合わせて、簡単なVJ作品のようなてくれた人にこれで遊んでもらおう。

<SPAN>タグなどに、IE 5.5で追加された新しいサンプルを作ってみた。映像に合わせて表示されプロパティー「contenteditable="true"」を付けるテキストがすでに設定されたものだけでなく、自書式そのものが単純なだけに、このTIPSで一番加えておくだけでよい。

由自在に書き換えられるように、フェードイン表示

難しいのは、その使い道だろう。ページの中身をされるアニメーションの部分にcontenteditable

書き換えて表示するのは作者にとってうれしいこと<DIV ID="text0" contenteditable="true">を適用してみた。サンプルの６行の文字列はすべではないし、contenteditableを使って書き換え……（書き換え可能にしておきたいテキスト）て「editable」（編集可能）になっているので、これられたテキストは、フォームに入力した文字のよう</DIV>を好きな単語やメッセージに書き換えて、ウィンドに送信 できない。いったんブラウザーを閉じてしウ右下にある「reboot」をクリックすれば、再表まうと、書き換えた文字列は失われてしまう。そたったこれだけで、IE 5.5でこのページを見れば、示するときに書き換えたメッセージが表示される。

こで、挨拶状や定型文などのひな型を表示 する<DIV>タグで囲まれた部分のテキストを、好きなもちろん日本語もOKだ。なお、「更新」ボタンでサイトで使ってみてはどうだろう。
「editable」にしように書き換えられる。サンプルを使って試してみ

表示をリフレッシュすると、書き換えたテキストがたクールなテンプレートを公開しておけば、宛名やてほしい。マウスでポイントした部分の文字を消元に戻ってしまうので必ず「reboot」を使うようメッセージ部分を書き換えたあとにブラウザーのしたり書き換えたりできただろうか。にしよう。

印刷機能でプリントアウトして使える。フォームをさらに各種のスクリプトや SVGを駆使すれば、マ使ったときに比べてテキストボックスの枠線がじゃウスの動きで映像やテキストを操作できる本格的まをしないので、きれいなフォーマットが作れる。

今回は、以前に紹介したDOMを使ったテキストア

292 INTERNET magazine 2001/6

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

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

TIPS & TRICKS

3
サーバーの時刻に合わせる
4460.8JavaScriptのDate() は時間を扱う関数で、ちょっと応用すればホームページの端に「今月のカレンダー」のような飾りを自動的に作れる便利なものである。しかしこれには使用上、ちょっと困った点がある。たとえば、アクセスしたマシンの日付が1999年5月に設定されていると、カレンダーを作ってもその1999 年 5月が「今月」と表示されてしまう。月単位ならばともか
く、分単位で何らかの処理を行うのには向いていない。そこで、サーバーの時刻をJavaScriptに取り込んで、アクセスしてきた環境によらずサーバー側の時刻を常に表示して利用するテクニックを紹介する。
（高橋登史朗）d1<!--#exec cmd="./time.pl"--><FORM><INPUT TYPE="button" VALUE="今何時?"
onclick="alert('修正前:'+new Date()+'\\n\\n'+'修正後:'+newDate(getNow()))">

今回のTIPSはサーバー側でPerlとSSIを準備しておき、クライアント側でJavaScriptを動作さ

2$time = time ;print <<__HTM__;<SCRIPT LANGUAGE ='JavaScript'>var clnow = new Date();
var clnownum = clnow.getTime() ;var svnownum = $time * 1000;
var sa = svnownum - clnownum ;function getNow(){
var now = new Date();
returnnow.getTime() + sa ;}</SCRIPT>__HTM__……（ここにHTMLを記述する）のように記述すると、PerlスクリプトがSSIによっ̲̲HTM̲̲て呼 び出され、結果がJavaScriptの形でHTMLせる必要がある。まずは先にソース2を説明してファイルに埋め込まれる。最終的にはJavaScriptおこう。これはPerlスクリプトでJavaScriptを書は、PerlによるHTMLの書き出し部分だ。ここでき出すのがおもな役割で、「test.pl」として実行可は<SCRIPT>タグごとJavaScriptを記述する。の時刻を反映させた正しい時刻が使われるという能な状態でアップロードしておこう。ここではまず上記の $time をJavaScriptに埋め込むのには、わけだ。CD-ROMではPHPでの例も示したので、$time = time ;var svnownum = $time * 1000

として、サーバーの時刻を$time というPerlの変と記 述 する。 ここでJ a v a S c r i p t の 変 数

せよJavaScriptのDate() 関数にはローカル側の数にセットしている。UNIXやウィンドウズのサーバsvnownumへPerlの変数$timeを1000倍して代時刻を素直に取り込んで使ってしまう欠点がある

ーならば1970年1月1日から現在までの秒数が収入している。あとは、あらかじめ得ておいたクライことを理解しておこう。曜日や日付、時間帯によまる。JavaScriptのget Time()は1970年1月1日

アント側の時刻とsvnownumとの差を引き算しって異なるコンテンツを表示させるのにこの関数から現在までのミリ秒を返すので、ちょうど1000て、new Date() するごとにその差を修正してやれを使っている人は、間違った時刻を表示するクラ分の1の値を返すわけだ。次のばよいわけだ。そしてHTML本体にはソース1のイアントでどう見えるのかということにも注意して

print <<̲̲HTM̲̲;<!--#exec cmd="./test.pl"-->がユーザー側のマシンで実行されてもサーバー側PHP派はこちらを参照して欲しい。
今回はやや異質なTIPSかもしれないが、いずれにもらいたい。

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

PHP（ピー・エイチ・ピー／PHP Hypertext Preprocessor）：スクリプト言語の一種で、HTMLに記述したスクリプトをサーバー側が解釈して実行する。利用するにはサーバー側でPHPが実行できるためのモジュールが組み込まれている必要がある。データベースとウェブサーバーの連携に強く、データベースの情報を引き出して利用するサイトによく使われる。
©1994-2007 Impress R&D

INTERNET magazine 2001/6293

TIPS & TRICKS

4
リンク先の説明をポップアップさせる
5.5

6

ここで紹介するTIPSは、リンク先の簡単な説明を表示させてからジャンプさせるというものだ。ステータスバーにリンク先の情報を表示させてからジャンプするというテクニックがあるが、これも今ではもう古くさく、ステータスバーの変化に気付きにくい。そこで今回は左のサンプルのように、リンク先の情報をポップアップウィンドウではっきりと 表示させる。ウィンドウの「Go there」をクリックすると指定したページにジャンプする。ポップアップウィンドウの枠やテキストの色はカスタマイズでき、背景にグラデーションをかけるのも簡単なので、ちょっとした解説を加えるのに使ってみよう。
（大内 勇）d3

1<B onclick="popupProp('XHTML','eXtensible Hyper-Text Markup
Language','http://www.w3.org/TR/xhtml1/','100')">XHTML</B>

2<DIV ID="popupWin" STYLE="display:none"><DIV ID="Title"></DIV><DIV ID="Text"></DIV><DIV ID="Link"></DIV><DIV onClick="parent.location.href=Link.innerText">Go there...</DIV></DIV><SCRIPT LANGUAGE="JScript">
var popup = window.createPopup();function popupProp(ttl,info,link,h) {Title.innerText = ttl;
Text.innerText = info;
Link.innerText = link;
goPop(h);}function goPop(h) {var popupBody = popup.document.body;
var posX = event.x + 10;
var posY = event.y + 10;
popupBody.style.backgroundColor = "#ffffff";
popupBody.innerHTML = popupWin.innerHTML;popup.show(posX,posY,200,h,document.body);}</SCRIPT>

ソース1はポップアップウィンドウを開くためスタイルシートで非表示（display:none）にしておY）や背景色を指定し、その次でソース2で指定しの文字に指定 するタグだ。onClickイベントで関く。ID名Title,Text,Linkの各DIVタグは、ソース

たID名popupWin内の各要素をポップアップウィ

数「popupProp」を呼 び出すと、マウスでクリッ3 から渡される文字列の受け皿になり、最後のンドウ（popupBody）の要素に置き換える。最後

クしたときにポップアップウィンドウを表示させる

DIVタグは、ソース1で指定したURLへジャンプにshow()でポップアップウィンドウを表示状態にようになっているのだが、そのときに4つの値を渡させるためのリンクとなる。

させている。なお、カッコ内は先頭から順に「X座している。括弧内のシングルクオートで囲った部分
は、前から順に標,Y座標,幅,高さ,基点」を指定してゆく。ちなみ
最後のソース3がポップアップウィンドウに関するに今回の場合は基点に「document.body」を指各種の処理を行うスクリプトの部分だ。最初の行定しているので、ブラウザーウィンドウ内の左上位('タイトル','リンク先の簡単な説明','URL','の「createPopup()」がポップアップウィンドウを置がX座標=0,Y座標=0になる。

ポップアップウィンドウの高さ')作るメソッドだ。関数popupPropはソース1から呼 び出されるもので、この中では「innerText」をとなる。

参考までに「innerText」と「innerHTML」の違い使ってソース1から渡された値を、ソース2の受を書いておく。
「innerText」は指定したオブジェク

け皿（ID名Title,Text,Linkの各DIVタグ）に入れるトの内側に含まれるテキストのみが該当し、「innerソース2は少し複雑な役割を果たしている。このようにしている。その後で関数「goPop」に引数hHTML」は指定したオブジェクト内側のタグを含ん部分はソース1からソース3に渡された値をいっ（ポップアップウィンドウの高さ）を渡して処理を移だ全要素を含むものになっている。今回のTIPSでたん格納するために必要だ。ここでは最初に、ソしている。関数goPopではマウスの位置に合わせはこれら2つの値が両方とも登場しているので、混ース2の全体にpopupWinというID名を指定し、たポップアップウィンドウの表示位置（posX、pos同しないようにしてほしい。

294 INTERNET magazine 2001/6

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

ステータスバー：ウィンドウの下部に表示される領域で、ウィンドウ内にある要素の詳細情報を表示したり、ウィンドウ内で行われた処理の結果などをユーザーに通知したりする。

©1994-2007 Impress R&D

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

今 月 の テ ー マ

IE 6を制する6万部突破！

IE 6で追加された新機能の中には、地味だが重要な意味を持つものが多い。まだ完全とは言えないものの、これまでサポートされなかったHTML 4やCSSの細かい部分が「HTMLパズルに挑戦しよう」
宛て先拾い上げられている。たとえば、見た目に変化はないが、<TH>と<TD>タグでHEADERS、SCOPE、ABBR、AXISといったアクセDシビリティー関連の属性が正式に採用されている。そこで今月は、IE 6

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

がW3Cの規格をサポートしているかどうかを実験するパズルに挑戦していただく。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ"IE 6を制する"にチャレンジ！

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

Q U E S T I O N

1 centerなしでセンタリング！

6

6

M0.8

第1問は「テーブルをセンタリングする」というだけの問題だ。HTML
入門書の最初に出てきそうな単純な問題で、がっかりしたかもしれない。
しかし、この問題はなかなか奥が深いのだ。条件の1つとして、<CENTER>タグを使わずにスタイルシートで実現してほしい。もう1つの条件
として、text-alignプロパティーを使わずにセンタリング表示してほしい。
実は、<TABLE>タグにtext-align: centerを指定するとセンタリングされてしまうのは、CSSの文法としては間違っているのだ。これまで以上に厳密に標準規格をサポートしているIE 6では、こうした間違いが修正されている。さあ、いったいどうすればいいのだろうか。
ヒン
トQ U E S T I O N<!DOCTYPE 〜>を記述する……

2 自動的に画像を入れろ！

6

6

M0.8

第2問は、CSSを利用したちょっとしたトリックだ。左のサンプルの「One」「Two」「Three」という部分は<P>タグで作った段落だ。各段落の前に画像が置かれているが、これは<IMG>タグで指定しているのではなく、スタイルシートの機能を使っている。CSS 2のサポートが進んでいるネットスケープ6やMozillaでは、contentプロパティーを使って要素の前に自動的に文字や画像を入れることができるが（2000年9月号参照）、IE 6はまだそこまで進んでいない。CSS 1だけを使って段落の前に画像を置くのが条件だ。もちろん背景画像を使うのではない。CSS 1で背景以外に画像を扱える機能があるかどうかをじっくり調べてみよう。
ヒント

displayを変える……

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

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

INTERNET magazine 2001/6295

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