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

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

今月よりネットスケープ6の日本語正式版を付録CD-ROMに収録。今まで使4

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

5

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

試してみてはいかがだろうか。それでは今月も、まだ誰も見たことのない最新

5.5

インターネットエクスプローラ5.5以上のテクニックの数々を紹介しよう。

4

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

6

ネットスケープ6以上ってみたことのなかった人も、これを機会に2000年6月号からのTIPS &TRICKSのバックナンバーを読んで、最新のスタイルシートやDOMの機能をCD-ROM収録先 Å Magnavi→Ip0102→Htmltips+CD-ROM 今月号のTIPSをすべてCD-ROMに収録!!

M18Mozilla（数字はMilestoneの番号）

1月号「HTMLパズルに挑戦しよう」の解答
それほど難しい問題ではなかったが、挑戦者が少なかったのは残念だ。2問目でIE 5.5の新機能を英語のサイトで調べるのが面倒だっただろうか。今月のパズルでも、簡単な問題と難しい問題を1問ずつ用意したので、簡単なものだけでもチャレンジしてほしい。

A N S W E R

1 メニューを埋め込め！

6<IFRAME>タグにスタイルシートで枠線の種類、太さ、色の指定をするだけ。なお、
インターネットエクスプローラでは、「FRAMEBORDR="0"」を指定しないと、フレームに立体的な枠が付いてしまう。
<IFRAME NAME="menu" SRC="menu.html"
FRAMEBORDER="0"
STYLE="border: solid 4px gray; width: 150px; height: 250px;"></IFRAME>
正解者：坂部和久さん、Masahiko Murataさん、冨園慎
一郎さん、ENDEさん、山口雅仁さん、よしともさん、堀江さん

A N S W E R

2 背景を連続させよ！

フレームを埋め込むほうのHTMLでは、<IFRAME>タグに「ALLOWTRANSPARENCY」属性を指定する。埋め込まれるほうのフレームのHTMLでは、<BODY>タグのスタイルシートで、背景色を「transparent」にする。

1<IFRAME NAME="menu" SRC="menu.html"
ALLOWTRANSPARENCY="true" FRAMEBORDER="0"
STYLE="border: solid 4px gray; width: 150px; height: 250px;"></IFRAME>

2<BODY STYLE="background-color: transparent">

364 INTERNET magazine 2001/2

正解者：坂部和久さん、Masahiko Murataさん、冨園慎
一郎さん、ENDEさん、山口雅仁さん、よしともさん、
堀江さん

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

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

T IPS & T R ICKS

1
テーマをインストールする
6

1

ネットスケープ6やMozillaの面
白さの1つは、自分でブラウザーをカスタマイズできることだ。しかも、改造できることにはいろいろなレベルがあり、プログラムに触れない初心者からディープなマニアまで、だれでも楽しめる仕掛けが組み込まれている。今回は、まずどんな人でもできる簡単なカスタマイズだ。「テーマ」と呼ばれる外観のデザインを、好みに合わせてインストールするボタンを作ってみよう。Linuxのウィンドウマネージャーのように、好きなものを選んでインターフェイスを取り替えられる機能だ。自分で作ったオリジナルテーマの配布もできてしまうぞ。 （高橋登史朗）

d<SCRIPT TYPE="text/javascript">function chgSkin (swt, file, name) {var skinpath = new Array ( );skinpath[0] = 'ftp://ftp.netscape.com/pub/netscape6/themes/english/6.0/';
skinpath[1] = 'resource:/chrome/';skinpath[2] = 'chrome/';if ( navigator.userAgent.indexOf ("Netscape6") != -1) {InstallTrigger.installChrome (InstallTrigger.SKIN, skinpath[swt] + file, name);}}</SCRIPT>2<INPUT TYPE="button"
VALUE="Netscapeからorbit/1.0をダウンロードして切り替える"
onclick="chgSkin (0, 'orbit.jar', 'orbit/1.0')"><BR><INPUT TYPE="button"
VALUE="デフォルトのmodern/1.0に切り替える"
onclick="chgSkin (1, 'modern.jar', 'modern/1.0')">スクリプトを見る前に、まずテーマの切り替なテーマをダウンロードして使えるようになっていもし、自分のオリジナルテーマを作ったときは、配えを試してみよう。ネットスケープ6 にははじめかる。テーマパークにあるいくつかのテーマはコン列「skinpath」の代わりに自分のテーマファイルらテーマが2つ入っている。
「モダン」と「クラシッ

テストで一般から公募したもので、誰でも作れるへのパスを書けばいい。

ク」だ。メニューから「表示」→「テーマを適用」でものなのだ。テーマのソースはこの連載でも取り確認できる。

上げているXULでできており、ボタンなどのGIF

if 文 の「 navigator.userAgent.indexOf ("Net

画像を取り替えるだけでもカスタマイズはできてscape6") != -1」で、ブラウザーがネットスケープ6しまう。やる気のある人はネットスケープのサイの場合にだけ、続く{ } の中の命令が実行される。

ト

その命令が「InstallTrigger. installChrome」だ。

を見てぜひ挑戦してみてほしい。

InstallTriggerはインストールのためのオブジェク
それではソースを見てみよう。ボタンを押して関トで、installChromeメソッドにテーマのURLとこのリストからテーマの名前を選択 すると、ブラ数「chgSkin」を起動 すると、ネットスケープ6 の名前を指定すると、OSに関係なく自動インストー

ウザー全体のデザインが魔法のように切り替わっ場合は指定されたテーマをダウンロードして切りルを実行してくれる。てしまうのだ。

替えるというものだ。ダウンロード元はchgSkin

さあ、とりあえずはCD -ROMから好きなスキンをテーマの種類はこの2つだけではない。
「表示」→の最初の引数で指定している。0、1、2 でそれぞインストールしてさくさく切り替えて使ってみよう。

「テーマを適用」→「新しいテーマを取得」でネッれFTPのディレクトリー、ハードディスク内の決めトスケープのテーマパークサイトへ行けば、いろられたフォルダー、CD-ROMのTIPS & TRICKS

いろなデザインのテーマが登録されていて、好きのフォルダーからインストールするようにしている。

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

home.netscape.com/themes/
createtheme.html

XUL（ズール／XML-based User Interface Language）：XMLをもとにしたユーザーインターフェイス記述言語。メニューやツールバーなどのさまざまなインターフェイスを、クロスプラットフォームで記述できる。現在開発中のMozillaやネットスケープ6に実装されている。
©1994-2007 Impress R&DINTERNET magazine 2001/2365

T IPS & T R ICKS

2
入力欄に合わせて色を変える
6M 18

1998年にCSS level 2がW3Cの勧告になったにもかかわらず、これまで2年以上もの間、インターネットエクスプローラもネットスケープナビゲーターもCSSのサポートを十分にしてこなかった。
そこへ登場したのが、標準規格を完璧にサポートすることを目標としたMozilla とネットスケープ6だ。左のサンプルを見てみよう。
掲示板のテキスト入力欄に書き込
もうとするたびに、現在入力中の欄の背景色が変わる。今どの欄に書いているのか分かりやすいし、使っていて楽しいページになる。
CSS 2では、スクリプトを使わずに、ほんの数行の指定だけでこれができてしまうのだ。 （編集部）

dINPUT[TYPE="text"]:focus, TEXTAREA:focus {background-color: #FFFF80; color: #AA0000;
border-color: #FF0000;}

テキストボックスやボタンなどのフォームの部

INPUT:focus { color: red; }めてみるといいだろう。たとえば次 の例 では、< H 1 > の次 に< H 2 > が並 んでいる場 合 にだけ、品がキーボードで操作できる状態になっていることを「フォーカスが当たっている」という。CSS

しかし、これだけの指定ではボタンとテキストボ<H2>に対してスタイルが適用されて、見出しの2では、フォーカスが当たっている場合だけにス

ックスで別の色やフォントを使いたくても、同じ間の余白を小さくできる。

タイルシートを適用する仕組みがある。それには、になってしまう。そこで、先月の「角の丸い囲みこれまで何度か紹介したことのある「擬似クラス」を作る」のポイント欄で紹介した「属性セレクタを使う。たとえばよく使われているものに、マウー」を使って属性の値でスタイルを変えれば、ボスをリンクの上に載せたときにフォントや色が変タンとテキストボックスを区別できる。

H1 + H2 { margin-top: -12pt; }同じ名前の要素に自動的にテキストや画像を挿入する「:before」擬似要素と「:after」擬似要わるようにする「:hover」擬似クラスがある。
INPUT[TYPE="text"]:focus {素は、2000年9月号で紹介した。

color: red; }A:hover { font-weight: bold; }INPUT[TYPE="submit"]:focus {これと同じようにCSS 2には、フォーカスが当た

P:before { content: "★"; }color: blue; font-weight: bold; }CSS 2が普及すれば、ページ作成の手間を省いたっている場合を表す「:focus」擬似クラスがあり、新しいデザインの可能性を試したりできる。

る。次のような指定をすると、ボタンやテキストCSSでは、{ 〜 } の前に指定する部分を「セレクボックスにフォーカスが当たっているときの文字ター」と呼ぶが、CSS 2ではセレクターの機能がインターネットエクスプローラでも早く完全対応色を変えられる。

大幅に拡大されているので、一度仕様書をながしてほしいものだ。

366 INTERNET magazine 2001/2

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

Mozilla（モジラ）：ネットスケープナビゲーターのニックネーム。1994年当時、人気のあったブラウザーMozaic（モザイク）を凌駕するという意味で名付けられた。現在Mozilla.orgで開発中の新ブラウザーもMozillaと呼ばれ、そのソースコードを元にして作られたブラウザーがネットスケープ6である。
©1994-2007 Impress R&D

T IPS & T R ICKS

3
文字や画像をつねに右下に表示する
45

5.5

4

バナー画像がいつもブラウザーの右下に表示されているページを見たことがあるだろうか？ ウィン
ドウのサイズを変えたりスクロールさせたりすると、画像が移動してつねに右下の位置をキープするようなページだ。スタイリッシュなページを作っても、見る人の環境次第で崩れてしまうのはつらいと思っているデザイナーには、おすすめのTIPSだ。今回はシンプルに文字を固定してみた。画面をはじめに表示したとき、ウィンドウのサイズを変えたとき、スクロール
バ ー を 動 か し た と き 、「 I ' malways here !」という文字がいつもウィンドウの右下にあるように見える。
（藤井幸孝）

d<SCRIPT LANGUAGE="JavaScript1.2">
var rb_width, rb_height;
function initialize ( ) {if (document.all) {rb_width = rb.offsetWidth;rb_height = rb.offsetHeight;
setInterval ("rb_ie()", 50);
rb.style.visibility = "visible";}else if (document.layers) {rb_width = document.rb.document.width;rb_height = document.rb.document.height;
setInterval ("rb_ns()", 50);
document.rb.visibility = "show";}}function rb_ie ( ) {rb.style.pixelLeft = document.body.scrollLeft +document.body.clientWidth - rb_width - 5;
rb.style.pixelTop = document.body.scrollTop +document.body.clientHeight - rb_height;}
function rb_ns ( ) {document.rb.left = window.pageXOffset +window.innerWidth - rb_width - 30;
document.rb.top = window.pageYOffset +window.innerHeight - rb_height;}
window.onload = initialize;</SCRIPT>

ドウの下の端に見えるという仕組みだ。

ment.オブジェクト名.document.width（または上記のソースでは省略したが、「I'm always hereheight）」を使う。

!」を囲った<DIV>タグに「rb」というID属性を付関数rb̲ieと関数rb̲nsでは、オブジェクトの位置スクロールの位置＋ウィンドウのサイズ

け、スタイルシートでpositionをabsolute にして、を動かしている。2つの関数では、オブジェクトの− <DIV>（オブジェクト）のサイズ自由に配置できるようにする。また、visibilityを左右の座標、上下の座標、スクロール位置、ウィhidden にして隠しておき、スクリプトが起動するンドウの内側の大きさを得る方法が異なるのでソとvisibleに切り替わって表示されるようにする。

ースを確認しよう。横方向の位置を計算するときこのスクリプトでは、次の数値を計算して、右下端のちょうどいい位置を割り出している。

「スクロールの位置」について少し説明しておこう。に5 や30などの数字を引いているのは、そのまま分かりやすいのは縦方向の例だ。スクロールバーを動かしていくと、ページの上の方の部分はウィIEとナビゲーターで使用するプロパティーなどがま

では文字が右に寄り過ぎるケースがあるからだ。

ンドウの上にどんどん消えていく。スクロールのったく異なるので、両方のブラウザー用に別々の試してみて適当な数字を探すといいだろう。

位置とは、ページの中のどこがウィンドウの一番関数を作っておく。関数「initialize」では、「doc-上に来ているかを表すものだ。スクロールの位置ument.all」があるならIE 用の関数「rb̲ie」を、最後に「window.onload = initialize」
として、ペに現在のウィンドウのサイズを足すと、ウィンドウ「document.layers」があるならナビゲーター用のージを開いたときに関数が呼ばれ、最初の描画がの下の端がページの中でどの位置にあたるかが分関数「rb̲ns」をおなじみのsetInterval で呼び出うまく動作するように仕掛けておく。テキストを1かるわけだ。この位置からオブジェクトの高さを引す。オブジェクトのサイズを割り出す方法も違って行だけ作ったつもりが 2行 に折 れてしまうといういて、その数値をオブジェクトの上下の座標としている。IEでは「オブジェクト名.offsetWidth（また場合は、なつかしの<NOBR>タグで回避できるの指定 すれば、どんなときにもオブジェクトはウィンはoffsetHeight）」を、ナビゲーターなら「docuで、うまくいかなかった人は試してみよう。

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

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

INTERNET magazine 2001/2367

T IPS & T R ICKS

4
領域をまるごとズームさせる
5.5
以前、JavaScriptで画像の高さと幅を変化させてズーム効果を出すTIPSを紹介したが、一度に1つの要素にしか効果を適用できないものだった。今回は、IE 5.5から使えるようになったスタイルシートのzoomプロパティーを使って、ズーム効果を表現するテクニックを紹介しよう。これは指定した要素の内側に含まれるすべての要素に対してズーム効果を適用できる便利なものだ。左はそのサンプルで、「zoom IN」や「zoom OUT」ボタンを押 すと、黒い背景色の領域にある画像と文字が同時に拡大したり縮小したりする仕組みになっている。それではさっそくソースを見てみよう。
（大内 勇）d1function zoomIn ( ) {var Zoom = parseInt (zmArea.style.zoom) + 10 + '%';
zmArea.style.zoom = Zoom;}
function zoomOut ( ) {var Zoom = parseInt (zmArea.style.zoom) - 10 + '%';
zmArea.style.zoom = Zoom;}

3<IMG SRC="zmin.gif" onClick="zoomIn ( )"><IMG SRC="zmout.gif" onClick="zoomOut ( )">2<DIV ID="zmArea" STYLE="width: 550px; height: 250px; zoom: 50%;"><IMG SRC="winter.jpg" WIDTH="320" HEIGHT="240" ALIGN="left"><H1 STYLE="font-size: 30pt">Snow World !!</H1></DIV>

ここで紹介するテクニックでは、スタイルシートてみよう。背景色が黒の領域に対して画像サイズの「zoom」プロパティーとJavaScriptの「zoom」の比率が明らかに小さくなっている。また「Snowロパティーで、その対象は「zmArea」（ソース1のID名「zmArea」）になる。今までのJavaScriptプロパティーの2つを使っている。ソースのようにWorld !!」の文字には30ポイントを指定しているの感覚では、その要素自体の大きさが変わるよう簡単なのだが、注意してほしいポイントが1点だけのだが、画像と同様に小さくなっている（タイトルなイメージを持つかもしれないが、このzoomプロあるので、最初に説明しておこう。スタイルシートの「CSS Zooming」は24ポイントなので比較してパティーを使うと指定した要素は変わらずに、その「zoom」は単独でも適用できるのに対し、Javaほしい）。zmAreaの領域にスタイルシートのzoomの内側だけ拡大、縮小するようになる。このサンScriptの「zoom」はそれだけでは動作せず、操作プロパティーで50%を指定しているためだ。zoom

プルでは拡大率と縮小率をそれぞれ10% になる

する対象の要素にスタイルシートを必ず指定して、はIE 5.5から使えるようになった新しいスタイルシように指定している。

ページを読み込んだ時点でのzoomの値をあらかートで、指定した要素の内側に含まれるすべてのじめ決めておかなければならないということだ。こ要素に対して有効になる。の点にだけ注意しておけば、特に悩むことなくこのテクニックを応用できるだろう。

ソース3はクリックするとズームインとズームアウトを行うボタンだ。onClickイベントで関数zoom

次はダイナミックにズーム効果を出す、JavaScriptInとzoomOutを呼び出しているだけだ。の「zoom」プロパティーの説明をしよう。ソース1以上で指定領域をズームさせるTIPS の完成だ。

まずはソース2を見てもらいたい。ID名「zm Area」には「zoomIn」と「zoomOut」という2つの関数

冒頭 で書いたとおりスタイルシートだけでも拡大（背景色が黒の領域）の大きさには550×250ピクがある。その名のとおり、ズームイン（拡大）とズーや縮小表示 はできるのだが、このTIPS のようにセル、画像の大きさには320×240ピクセルを指定

ムアウト（縮小）の処理を行う関数だ。それぞれのJavaScriptと連動させて、インタラクティブに使している。このことをふまえて左側のサンプルを見関数の中にある「style.zoom」がズームを行うプうと面白いだろう。

368 INTERNET magazine 2001/2

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

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

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

今月のテーマ<SELECT>を制する

大好評発売中！

<SELECT>タグで作るプルダウンメニューは、フォーム内での選択肢として使われるだけでなく、JavaScriptと組み合わせてほかのページにジャンプする仕掛けに使えるなど応用範囲が広い。そのままでは地味な白や灰色のデザインのメニ「HTMLパズルに挑戦しよう」
宛 先ューだが、最新のブラウザーを使えば、スタイルシートを適用してカラDフルなものを作り込むことも可能だ。そこで今月は、プルダウンメニュ

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

ーにいろいろな飾りを付けてみるパズルに挑戦していただく。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解 は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ <SELECT>を制する にチャレンジ！

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

Q U E S T I O N

1 メニューを色分けせよ！

45

5.5

6M18

左のサンプルのようなプルダウンメニューは、ときどき目にすることがあるだろう。メニューの中の項目の背景がそれぞれ色分けされているものだ。また、文字の色も変更されている。こうしたテクニックを使えば、どのページでもかわりばえのしないプルダウンメニューにも、ちょっとしたアクセントを加えられる。スタイルシートがフォームの部品にも使えることはこの連載の読者ならご存知だろうが、<SELECT>にも適用できることには気づいていない人もいるのではないだろうか。そこで、ごく基本的な問題だがあえて出題してみた。この問題に一発で答えられなければ、TIPS & TRICKERとは言えないぞ。
ヒント

Q U E S T I O N

ヒントを出すまでもないだろう……

2 メニューに 画像を入れろ！

6

M18

1問目は基本問題だが、2問目は裏技の問題だ。左のサンプルを見てほしい。プルダウンメニューの各項目に、アイコン画像が付いている。ネットスケープ6やMozillaでは、スタイルシートを使ってこんなこともできるのだ。もちろん複雑なJavaScriptでメニューを作成しているわけではなくて、ごく普通の<SELECT>タグを使っているだけだ。さて、いったいどうやるのだろう。こんな技はどんなサイトや本でも紹介されていない。
さっぱり分からないという人は、Mozillaをインストールしたフォルダーの下のどこかにある「test16.html」を探して見てみてよう。Mozillaは今月も付録CD-ROMのBに収録してある。
ヒント「リスト」のためのスタイルシートを使う……

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

フォーム：掲示板のコメントや検索サイトでのキーワードのように、ブラウザー上でユーザーが値を入力してサーバー上のプログラムに送信することで、対話的な機能を実現する仕組み。
HTMLでは<FORM>タグや<INPUT>タグを組み合わせて作成する。
©1994-2007 Impress R&D

INTERNET magazine 2001/2369

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