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

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

最近のこの連載ではIE4.0で利用できる高度なTIPSが続いていた。今回もActiveXを使ったレベルの高いTIPSも紹介するが、おさらいを兼ねた誰でも簡3.0

単にできるようなものも紹介していく。ネットスケープナビゲーターが無料で配布
4.0

されてWWWブラウザーのシェアも先が読めなくなった今、ウェブページ製作者がどんな技術にも対応できるように、今月も幅広いTIPSとTRICKSをお届けする。

3.0

4.0

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

2月号「HTMLパズルに挑戦しよう」の解答
問題が簡単だったのか、それともプレゼントが変わったのが原因なのかわからないが、今回は解答者の数がいつになく非常に多かった。ウェブページを作るうえでイメージは非常に重要な要素を占めている。わからなかった人もこの解答を読んで試して見よう。

A N S W E R

1 イメージを代替表示させろ！

1問目の解答は簡単だったのではないだろうか。解答のポイントはイメージのファイル名を指定する「SRC」に加えて「LOWSRC」を追加してやることだ。この「LOWSRC」を指定さえすれば、表示されるイメージが読み込まれている間に別のイメージを表示させることができる。
<IMG SRC="photo1.jpg" WIDTH=218 HEIGHT=262 BORDER=0
LOWSRC="photo0.jpg" ALT="some images">
正解者の方々：金子智範さん、土屋陽介さん、藤川晃さん、ほか多数

A N S W E R

2 IE4.0の内部画像を表示させろ!

IE4.0が持っている内部画像を呼び出すには、IE4.0をインストールして始めに起動するウィンドウを参考にすればいい。
<IMG SRC="res://ie4tour.dll/w-chan.bmp" BORDER=0 ALT="アンテナ"><IMG SRC="res://ie4tour.dll/w-begin.bmp" BORDER=0 ALT="手"><IMG SRC="res://ie4tour.dll/w-tour.bmp" BORDER=0 ALT="虫眼鏡"><IMG SRC="res://ie4tour.dll/w-reg.bmp" BORDER=0 ALT="紙と鉛筆"><IMG SRC="res://ie4tour.dll/w-blue.bmp" BORDER=0 ALT="青い丸"><IMG SRC="res://ie4tour.dll/w-orange.bmp" BORDER=0 ALT="赤い丸"><IMG SRC="res://ie4tour.dll/t-one.bmp" BORDER=0 ALT="数字1"><IMG SRC="res://ie4tour.dll/t-two.bmp" BORDER=0 ALT="数字2"><IMG SRC="res://ie4tour.dll/t-three.bmp" BORDER=0 ALT="数字3">
正解者の方々：川田哲さん

308 INTERNET magazine 1998/4

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

T IPS & T R ICKS

1ActiveXコントロールを使って音楽を流す
4.0
WWWでオーディオファイルを扱えるようになったのはもうずいぶん前のことになる。<EMBED>タグや「BGSOUND」といったオプションを使ってウェブページにBGMを加えた読者も多いのではないだ
ろうか。さて、IE4.0ではさらに一歩進んで、ボタンや文字などをクリックしたときに効果音を鳴らしたり音楽を流したりすることができるようになっている。しかも外部のアプリケーションが立ち上がることなく、WWWブラウザー内だけでこれを実現できるのだ。ゲームのページやフォームの強化に役立ちそうなこのTIPS、Waveファイル
かMIDIファイルを用意して、さっそく試してみよう。

<SCRIPT language="VBScript">
Sub Sound_onclick
Snd.runEnd Sub</SCRIPT>

d<INPUT NAME=Sound TYPE=BUTTON VALUE="Click! and Sound!"><OBJECT ID="Snd" WIDTH=0 HEIGHT=0
STYLE = "visibility:hidden"
CLASSID="CLSID:05589FA1-C356-11CEBF01-00AA0055595A"><PARAM NAME="showcontrols" VALUE="0"><PARAM NAME="showdisplay" VALUE="0"><PARAM NAME="AutoStart" VALUE="0"><PARAM NAME="AutoRewind" VALUE="0"><PARAM NAME="PlayCount" VALUE="1"><PARAM NAME="FileName" VALUE="file://C:\WINDOWS\MEDIA\The Microsoft Sound.wav"></OBJECT>

このTIPSではIEのみの機能であるVBスクリ

このスクリプトは「Sound」という名前のオブジ確に書き写そう。

プトとActiveXを使っている。普通ActiveXを利ェクトをクリックしたら、「Snd」というコンポーネ

最後に<OBJECT>タグの下にパラメータを与え用する場合には、ActiveXコントロールパッドなントを実 行 しろという意 味 だ。「 S o u n d 」とておく。上のソースリストどおりに6つのパラメー

どの専用ツールを使ってコンポーネントを作成す「Snd」については以下で説明する。

タを書こう。重要なのは6 番目の「FileName」

るのだが、今回はウィンドウズ標準のサウンドフ

このTIPSではボタンを押したら音が鳴るようにというパラメータだ。

ァイルを再生するためのActiveXコントロールを使したいので、< I N P U T > ボタンを作り、名前を<PARAM NAME="FileName" VALUE=うので、ツールを使ってActiveXコントロールを作「Sound」としておく。続いて最も重要なActiveX成する必要はない。

コントロールの指 定 だ。I D を「S n d 」とした

"file://C:¥WINDOWS¥MEDIA¥The

まず初めに<SCRIPT>タグを使って、サウンドフ<OBJECT>タグを作り、タグ内にMicrosoft Sound.wav">ァイル再生命令のVB スクリプト文を書いておこう。頻繁に紹介しているJavaスクリプトと違って

CLASID=CLSID:05589FA1-C356-11CE-「VALUE」で再生させたいWaveファイルやMIDI「LANGUAGE="VBScript"」とするのを忘れない

BF01-00AA0055595A

ファイルの名前を指定する。上の例のようにローように注意してほしい。

カルのファイルでもいいし、サーバー上に置かれと書いておく。<OBJECT>タグで「CLASSID」

Sub Sound̲onclickを指定したものがサウンド用のActiveXコントロ

Snd.runールであることを表している。この「CLASSID」

End Sub

たファイルでもいいので試してみてほしい。

は非常に大切な値なので、間違いのないように正インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/4309

T IPS & T R ICKS

2
隠された文章をダイナミックに表示する
14.0
ネットスケープナビゲーターとイ
ンターネットエクスプローラのどちらのダイナミックHTMLでも、ウェブページ内にある部品を表示させたり隠したりするためによく使われるのが「visibility」というスタイルだ。詳細な説明を必要なときに表示させたり2つの画像を交互に表示させたりと、応用範囲は広い。
しかし「visibility」の指定によって隠された部分がウェブページの中の空間を占有してしまうという欠点があった。その結果何も書かれていない間の抜けたスペースがレイアウトを考えたとしてもウェブページ内にできてしまう。そこでこの欠点を解決する便利なTIPSを紹介しよう。

2
j http://www.microsoft.com/gallery/files/html/visibility.htm

d<P onclick="document.all.d.style.display=
document.all.d.style.display=='none' ? '' : 'none'">Click here to see more data:</P><P id=d style="display:none">隠したい文章</P>

画 面 1 の左 側 の「V i s i b i l i t y 」の部 分 は、ないときは無駄な余白ががない。これが「display」

し、偽ならば「sentence2」を実行するという意

HTML の中で「visibility」というスタイルを指定の特徴だ。言い換えると「display」は、ウェブペー味を持っている。

した例だ。
「Click here to see more data:」のジのコンテンツを必要に応じてダイナミックに増これを踏まえて説明すると、上のスクリプトは下 の部 分 に不 自 然 な余 白 があるが、ここにはやしたり減らしたりできる機能を提供するのだ。

「'd'というIDを指定したタグのdisplayオプショ「visibility:hidden」という指定によって文章がさて、このようなダイナミックな変化のためには、ンが' n o n e ' だったらそのスタイルを取 り消 し、隠されている。
「Click here to see more data:」

少しばかりのスクリプトが必要だ。上の例では、'none'になっていなかったら'none'にする」とい部分をクリックすることによって表示と非表示をある行をクリックするとその下のパラグラフの表

う意 味 だ 。 す な わ ち 、 クリック す る た び に切り替えられるが、いずれにしてもこのスペース示非表示を切り替えるようにしている。クリック

displayプロパティーの表示と非表示（none）をは予約されることになる。

させる行の<P>タグ内に、次のようなスクリプト切り替えることを意味している。

画面の右側の「Display」の部分は、このスペを書いておこう。
<P id=d style="display:none">ースの無駄を解消するために「display」というonclick = "document.all.d.style.display=document.all.d.style.display=='none' ? '' : 'none'"

表示させたり隠したりする文章部分は、上記の表示される時点で初めてウェブページ内にスペー「test ? sentence1 : sentence2」という構文はnone"」としてIDとdisplayスタイルを指定してスが確保される。つまり、文章が表示されてい「test」の結果が真ならば「sentence1」を実行おくことを忘れないようにしよう。

新 しいスタイルを使った例 だ。こちらもやはり「Click here to see more data:」部分をクリックすると隠されていた文章が表示されるのだが、左の「Visibility」の例と違って、隠された文章が310 INTERNET magazine 1998/4

隠したい文章</P>

ように<P>タグ内に「id=d」、「style="display:

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

T IPS & T R ICKS

3
思いどおりのフォントを表示させる
1 固有フォント

2 汎用フォント

ウィンドウズ

マッキントッシュ

ウィンドウズ

3.0

4.0

3.0

4.0

ウェブページのデザインにめりはりを付けたり見栄えをよくしたりするために<FONT>タグでフォントを指定するのは、このコーナーの読 者ならお馴 染 みの方 法 だろう。
ただこの方法には1つ大きな落とし穴がある。それは指定したフォントがウェブページを見る人のコン
ピュータにインストールされていない場合、指定したフォントに一番近いと思われるフォントで表示されることだ。一番近いというのがくせもので、場合によってはまったく予期しない表示のされ方になってしまう可能性もある。そこで今回はどのコンピュータでも確実に指定したフォントが表示されるTIPSを紹介しよう。

マッキントッシュd<FONT FACE="Arial, Helvetica">Arial, Helvetica</FONT><FONT FACE="Courier New, Courier">Courier New, Courier</FONT><FONT FACE="Times New Roman, Times">Times New Roman, Times</FONT><FONT FACE="MS Pゴシック, Osaka">MS Pゴシック, Osaka</FONT><FONT FACE="MS P明朝, 平成明朝">MS P明朝, 平成明朝</FONT>

ウェブページを見る人のコンピュータはウィン

s e r i f やs a n s - s e r i f 、 c u r s i v e 、 f a n t a s y 、ドウズやマッキントッシュとOSがばらばらなうえ、monospaceといったフォントファミリーという汎インストールされているフォントの種類も同じで用のフォントを指定することもできる（2）。指はない。そこで各OSに標準でインストールされて定した固有のフォントがない場合にこのような汎いるフォントを表にしたので参考にしてほしい。

用のフォントを表示させるように指定するといい2つのOSで使われている類似のフォントをを次のだろう。汎用のフォントのほうが意図したとおりようにうまく組み合わせて指定すれば、多くのコに表示される可能性が高いからだ。

ンピュータで同じように表示されるウェブページ

英文フォントマッキントッシュ

ウィンドウズ

ChicagoCourier
GenevaHelvetica
Monaco
New York
Palatino
SymbolTimes

Courier New
Arial
Times New Roman
Arial Black
ImpactComic Sans MS
SymbolWingDings
Marlett<FONT FACE="Arial, Helvetica,ができるはずだ（1）。

sans-serif">sans-serif</FONT><FONT FACE="MS Pゴシック, Osaka">
なおウィンドウズ版のネットスケープナビゲーター

MS Pゴシック, Osaka</FONT>

では「文字コードセット」が「日本語」になってスタイルシートを使う場合は次のように指定する。

いると英文フォントの指定が効かないので注意しよう。

<DIV STYLE="font-family: MS Pゴシック,Osaka">〜</DIV>Osaka

MS ゴシック

Osaka-等幅MS 明朝和文 平成明朝
フ 平成角ゴシック
ォ 細明朝体ン 中ゴシック
ト 等幅明朝MS PゴシックMS P明朝等幅ゴシック

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

INTERNET magazine 1998/4

311

T IPS & T R ICKS

4
ウェブページのマージンサイズを指定する
3.0

4.0

4.0

ウェブページを作っていて思わぬ余白部分ができて邪魔だと感じた
ことはないだろうか。たとえば左画面のように上部に画像を使ったウェブページを表 示 させる場 合 、HTMLで特になにも指定しなければウェブページの上部と両端に余白部分ができてしまい、見栄えが悪くなってしまう。これを解決するのがマージンを指定する方法だ。
IEではウェブページのマージンを自由に調整できるHTMLがバージョン3.0から用意されていたが、ネットスケープナビゲーターでもマージンを調整できるようになり、ウェブページの無駄な余白部分をなくすことができるようになった。ではさっそく内容を見ていこう。

j http://www.mydesktop.com/d<BODY LINK="#31319C" BGCOLOR="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0"
MARGINHEIGHT="0" MARGINWIDTH="0">

以 前 このコーナーでは < L A Y E R > タグやウサイズぴったりに表 示 される。 ただしこの

そこでスタイルシートを使って部分的にマージン<SPACER>タグを使ったマージンの設定方法を<BODY>タグの属性を解釈するWWWブラウザ

サイズを指定する方法も紹介しておこう。

解 説 した。この方 法 では、< L A Y E R > タグやーはIEしかない。そこでネットスケープナビゲータ<SPACER>タグのほかに<BODY>タグでの設定ーでも同じように表示させるために次のような指<SPAN STYLE="margin-left:

を組み合わせなければならず面倒だった。そこで

定を追加する。

20px; margin-right: 20pt">
本文

今回は別の方法を使ってIEとネットスケープナビ
ゲーターの両方で同じように指定できるマージン

MARGINHEIGHT="0"設定を伝授しよう。

MARGINWIDTH="0"

I E でマージンを調 整 するためのポイントは<BODY>タグの次のような指定方法にある。
TOPMARGIN="0" LEFTMARGIN="0"</SPAN>「margin-left」で左の余白を、「margin-right」

この指定では「MARGINHEIGHT」でウェブペーで右の余白を指定する。このほかにスタイルシー

ジの上端からの、「MARGINWIDTH」でウェブペ

トでは「margin-top」でページの上からの余白ージの両端からのマージンサイズを指定する。こを、「margin-bottom」でページの下からの部分の値も0として先ほどのIEでの指定法方と組み合の余白を、「padding」でページの四辺のマージ「TOPMARGIN」はウェブページの上端からの、わせておけば、ネットスケープナビゲーターでもIE

ンサイズを指定することができる。<BODY>タグ「LEFTMARGIN」はウェブページの左端からのマでもウェブページの余白をなくすことができる。

を利用する方法とスタイルシートを使う方法をマージンサイズを指定する。ここで値を0にするこ

ただし意味もなくマージンサイズを0にしてしまう

スターしておけば、もう無駄な余白を心配する必とでウェブページがWWWブラウザーのウィンドとかえって見にくいウェブページになってしまう。

要はない。

312 INTERNET magazine 1998/4

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

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

今月のテーマ

簡易画像を制する
何度かこの連載で高度な画像表示のTIPSを紹介させていただいた。画像は重要な要素であることは間違いないのだが、華美になりすぎるウェブページを嫌ってシンプル一辺倒を好む読者もいるに違いない。しかしそういった人も図を上手に使いたいというのが本音だろう。思い出してほしいのは画像ファイルを使わないで図を表示させるTIPSだ。そこで今月はお手軽な簡易画像の表示に挑戦していただく。トリックが分かったらすぐに解答を送ってきてほしい。正解者には抽選で1名にオリジナル腕時計をプレゼントさせていただく。なお、正解は来月のコーナーで発表する。それでは頭をやわらかくして、今月のテーマ 簡易画像を制する にチャレンジ！

Q U E S T I O N「HTMLパズルに挑戦しよう」
宛 先D
正解が分かった人も、分からなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！
m ip-cdrom@impress.co.jp

1 建物、地形の簡易画像を表示させろ！

4.0

一軒家やビル、工場、神殿、競技場。それに道路や海。クリップアー
トのようにもアイコンのようにも見えるこれらの画像はいったいどこにあるのだろうか。実はIE4.0をインストールしたコンピュータでは、これ以外にも多くの簡易画像を使用できる。今回は建物や地形を表すアイコンに絞って挙げてみたが、ほかにも乗り物や標識、複雑な矢印などウェブページで使えそうな簡易画像がたくさん用意されている。ダイナミックHTMLやデジタルカメラの画像などで重くなりがちなウェブページを、これらの「読み込みの軽い」簡易画像でシェイプアップする方法にチャレンジしてみてほしい。
ヒント

Q U E S T I O N

読み込みが軽く色を指定できるということは……

2 簡易画像を半透明で表示させろ！

4.0

1問目が解けたら上のサンプルに少し手を加えた右の画面を見てほしい。なんとこちらは簡易画像が半透明になって下の壁紙が透けているのだ。簡易画像を応用すればこんなことができるのだ。たとえばスタイルシートの位置指定のテクニックを使って画像や文字を重ねる。重なりの上になる画像や文字にこの半透明にするテクニックを使えば、立体的なページのできあがりだ。1問目が分からなかった人もぜひ挑戦してほしい。その場合は適当な文字か画像を半透明であれば正解にさせていただく。このコーナーの読者だったら過去の連載をひも解けばすぐに分かるのではないだろうか。
ヒン
ト

文字や画像にフィルターをかけるには……

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

INTERNET magazine 1998/4313

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