このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性

誰よりも早く最新のHTMLを使ってみたいの問題だ。そこでこのコーナーでは、TIPS

藤井幸孝 白畑真

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

毎日のように増え続けるウェブページの中で、どうすれば目立つ存在になれるか。これが、ウェブマスターにとっての永遠の課題だ。デザインはもちろん、ど3.0

んなコンテンツが見られるか、聞けるかといったことが重要になる。リアルオー
4.0

ディオやリアルビデオからインタラクティブな仕掛けまで、今月も、アクセス数倍増間違いなしのCOOLなTIPSとTRICKSを満載でお届けする。

3.0

4.0

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

8月号「HTMLパズルに挑戦しよう」の解答
2か月連続でJavaScriptを使ったパズルを出題させていただいた。もはや、JavaScriptは難しくないのか？ そう感じてしまうほど、正解者の数は多かった。中には、「今月こそ名前を載せて」なんていう熱いチャレンジャーもいた。おめでとう、三浦さん。それでは、8月号 ポップアップメニューを制する の解答を発表しよう。

A N S W E R

1 ステータスバーにポップアップ！

ステータスバーは「window.status」と表す。あとは「onMouseOver」という命令文を使って、ここに文字が表示されるようにすればよい。マウスカーソルが載っているときだけ文字を表示するように「onMouseOut」まで作れば完璧だ。「return true」を忘れると表示のタイミングがおかしくなるので注意しよう。
<A HREF=""
onMouseOver="window.status='HTML TIPS&TRICKS Can
you write this script ?';return true;"
onMouseOut="window.status=''">A N S W E R

正解者の方々：石山フミオさん、三浦雅和さん、相澤治郎
さん、おたけさん、吉本克彦さん、岩崎典生さん、山本達郎さん、ほか

2 「ポン」と鳴るポップアップ！

JavaScriptの「alert()」を使えば簡単にできてしまう。ANSWER 1も同じだが、メッセージは「''」でくくるようにする。alertのメッセージの中に改行を入れたい場合は「¥n」と書いておけばいい。
<A HREF=""
onMouseOver="alert('Yeah, it¥'s HTML TIPS & TRICKS !
¥n cool, artistic and latest technique¥n¥n presented by iNTERNET MAGAZINE')">

330 INTERNET magazine 1997/9

正解者の方々：石山フミオ、三浦雅和さん、相澤治郎さん、吉本克彦さん、岩崎典生さん、毛利伸二さん、山本達郎さん、ほか

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

T IPS & T R ICKS

1
リアルオーディオのストリーミング放送を流す
3.0

4.0

3.0

4.0

ホームページから音楽や映像を配信したいと思ったことはないだ
ろうか。でも、AVIやWAV、クイックタイムなどのサイズが大きなファイルを使うのは避けたい。こんなときこそ、データをダウンロードしながら同時に再生できるリアルオーディオとリアルビデオの出番だ。今まで、リアルオーディオなんて一般のユーザーには手の届かない仕掛けだとあきらめていた人も多いだろう。今月のTIPS第1弾
は、なんと、専用のサーバーを使わずにリアルオーディオやリアルビデオのストリーミングを流すというウェブマスター必見のテクニックだ。
これだけで、ホームページがマルチメディアステーションになる。

j http://www.impress-radio.com/（疑似ストリーム j http://www.watch.impress.co.jp/pc/docs/article/radio/ ）d1

2

リアルオーディオ・メタファイル（*.ram）

ページ内<A HREF="sample.ram">
ここをクリックすると音楽が流れます</A>~

http://www.impress.co.jp/ user/ra/sample.ra

アルビデオエンコーダーだ。

る。このメタファイルは拡張子を「*.RAM」とービスを行っているプロバイダーがリアルオー

http://www.real.com/products/encoder/

して保存する。最後にページ内の好きな場所

ディオとリアルビデオの使用を許可しているかから、最新のものを入手しよう。にこのメタファイルへのリンクを作成する。 こどうかを確認してほしい。ここで紹介するTIPS作成したファイル（オーディオは*.RA、ビデオ

れは1のは、HTTPサーバーの機能だけでストリーミンは*.RM）をサーバーに置く。次に、エディター

グ再生を可能にする「疑似ストリーム（HTTPなどでメタファイルと呼ばれるテキストファイ<A HREF="sample.ram">

Pseudo-Streaming）方式」を使っている。プルを作成する。内容は1のここをクリックすると音楽が流れます

このTIPSを使う前に、ホームページ開設サロバイダーがこれに対応していることが必須と</A>˜なる。本誌5月号のプロバーダー特集に詳しい

http://www.impress.co.jp/ user/情報が掲載されているので参考にしてほしい。

ra/sample.ra

確認が済んだら、プログレッシブネットワークのように、通常のアンカータグを使えばよい。
これで完成だ。このリンクをクリックすればマス社のホームページからエンコーダーをダウンのように、RAファイルやRMファイルのURLだルチメディアのストリーミング再生が始まる。自ロードして、リアルオーディオ、ビデオファイルけを記述すればよい。ポイントは、必ず絶対パ分だけのラジオ局やテレビ局を作ることも夢じを作成する。疑似ストリーミングに対応していスを使うということだ。
「/ra/sample.ra」のよゃない。

るのは、リアルオーディオエンコーダー3.0とリ

うに相対パスではうまく再生できないことがあインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/9331

T IPS & T R ICKS

2
カーソルの移動で画像を変化させる
3.0

4.0

MSNのホームページでおなじみの「マクロメディアフラッシュ」を使ったサイトが増えている。その多くは、あるスポットにマウスカーソルを載せると、画像が変化してボタンを押したような効果が出るという仕掛けになっている。一度は自分のページで使ってみたいとは思うものの、高価な作成ツールを買ったり使い方を覚えたりと、ハードルは高い。そこで、左のページを見てほしい。ここでも、カーソルの移動で画像が変化するという仕掛けを使っている。ただし、フラッシュではなくHTMLだけで処理 しているのだ。今月の第 2 弾 、これがフラッシュいらずのインタラ
クティブなTIPSだ。

j http://earthday.wilderness.org/d<A HREF="index.htm"
onMouseOver="document.images['button'].src='image_change.gif';"
onMouseOut ="document.images['button'].src='image.gif';"><IMG NAME="button" SRC="image.gif" BORDER=0></A>

たった4行のJavaScriptで疑似フラッシュボを見てみよう。
「A HREF」で前述の画像をクリタンができてしまう。まずは「IMG」タグの内容ックすると、「index.htm」にジャンプするというを見てみよう。

リンクができる。ポイントは次の「o n M o u s eOver」の部分だ。これは「マウスカーソルを載エクスプローラ3.0ユーザーのためにこのTIPSは、エクスプローラ3.0ではエラー画面が表示される。これを防ぐために、ナビゲーター3.0以上を使っている場合だけスクリプトが有効になるようにしよう。

<IMG NAME="button" SRC="image.gif"

せたら」を意味している。次の「d o c u m e n t .

BORDER=0>

images」は、任意の画像を呼び出すスクリプト

if (navigator.appVersion.substring(0,1) >= 3)

で、ここでは「src=」以降の「image̲change.

を加えれば完璧だ。

これで、ページを読み込んだ際に「image.gif」gif」が表示されることになる。
「'button'」は先が表示される。これをマウスのカーソルの動きにに定義した画像の部分に付けた名前と同じもの合わせて別の画像に変化させればいい。このためにする。これで、「imgage.gif」にカーソルを載に「NAME="button"」を記述して、この画像せると「image̲change.gif」に変化するというの部分に名前を付けておく。次に、仕掛けができたわけだ。次は、画像からカーソルをはずしたときに再び「image.gif」に戻るよう<A HREF="index.htm"にしたい。そこで「onMouseOut」が登場する。

onMouseOver="document.images

これは「マウスカーソルがこのスポットから外れ['button'].src='image̲change.gif';"たら」を意味している。結果は「src=」以降の「image.gif」に戻る。これで完成だ。

332 INTERNET magazine 1997/9<A HREF="index.htm"
onMouseOver="if (navigator.appVersion.
substring(0,1) >= 3)
document.images['button'].src ='image_chanege.gif';"onMouseOut ="if (navigator.appVersion.
substring(0,1) >= 3)
document.images['button'].src ='imgage.gif';"><IMG NAME="button"SRC="imgage.gif"
BORDER=0></A>

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

T IPS & T R ICKS

3
文字をウェーブ状に配置する
3.0

4.0

3.0

4.0

マイクロソフトワードに付属する「ワードアート」という機能を使うと、文字列を円にそって曲げたり、右上がりや右下がりに変形させたりできる。ホームページでも、タイトルなどにこのような加工された文字を使うことが多いが、たいていは表示に時間のかかる画像を使用することになる。でも、ページが表示される際にタイトルだけが遅れて現れるというのは見ていて気持ちがいいものではない。
そこで、左の図を見てほしい。なんと、このページでは画像を使わずに文字をウェーブ状に配置しているのだ。それでは、また1つ画像を使う機会が減りそうな、COOLなTIPSを紹介しよう。

d下げる <SUB>

上げる <SUP><SUP><FONT COLOR="#B5BEBF" SIZE="7">I</FONT></SUB><FONT COLOR="#97A5A6" SIZE="7">N</FONT></SUP></SUP><SUB><SUB><FONT COLOR="#AFB9BA" SIZE="7">N</FONT></SUB></SUB><SUP><FONT COLOR="#91A0A1" SIZE="7">E</FONT></SUP>

このTIPSの秘密は、普段はあまり使わない<SUB>と<SUP>でくくっただけでは、上げ下げ文字を上げ下げするタグにある。さっそく内容をした文字が小さくなってしまう。そこで「FONT」

見てみよう。

タグを使って1文字ごとにサイズを固定しておく。
さらに、<SUB><FONT COLOR="#B5BEBF"<SUB><SUB>

SIZE="7">I</FONT></SUB><FONT COLOR="#AFB9BA" SIZE="7"><SUP><FONT COLOR="#91A0A1"

N</FONT></SUB></SUB>

SIZE="7">E</FONT></SUP><SUP><FONT COLOR="#91A0A1"<SUB>タグは、文字の位置をベースラインから

SIZE="7">E</FONT></SUP>下げて下付きにする。反対に<SUP>タグは、文字の位置をベースラインから上げて上付きにすのように入れ子にしていけば、2文字目は1文字る。通常、これらのタグは指数や脚注、または TM目より下（上）に、3文字目は2文字目よりさらにや（ R ）などの特殊記号を表示するために用いる。

下（上）に配置される。これを繰り返せば、
ウェー

これを利用して、文字がウェーブ状に並ぶバナー

ブ状のバナーができあがる。あとは、センス次第。

を作ってしまおうというわけだ。ただし、単に自分だけのかっこいいタイトルを作ってみよう。

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

グラデーションもかけてしまおう
本誌7月号のこのコーナーで紹介した「文字にグラデーションをかける」のTIPSを思い出してほしい。実は、上図のサンプルでは文字をウェーブ状に配置したうえに、グラデーションもほどこしているのだ。
<SUB><FONT COLOR="#B5BEBF" SIZE="7">I</FONT></SUB><SUB><SUB><FONT COLOR="#AFB9BA" SIZE="7">N</FONT></SUB></SUB>
このように、このコーナーで紹介するTIPSのいくつかを組み合わせれば、効果100倍だ。

INTERNET magazine 1997/9333

T IPS & T R ICKS

4
丸付き数字①、②、③を使う
4.0

4.0

ウェブページで文章を箇条書きにしたい場合は、<UL> や<OL>などのリストタグを使う。オプシ
ョンによって項目の番号をアラビ
ア数字やローマ数字、アルファベットなどから選択できるほか、○や■も使える。それでは左のページを見てほしい。ここでは箇条書
きに①、②などの○で囲んだ数字を使っている。もう気が付いた人もいるかもしれないが、リストタ
グに①はない。日本語フォントの①はプラットフォームによっては表示できないうえに、英文ページでは使えない。ではどうやって。今
月最後のTIPSは、一度使うとくせになりそうな、小粒だけれど効果抜群のすぐれものだ。

j http://www.microsoft.com/truetype/css/gallery/4d.htm

1

スタイル定義<STYLE>.ball { color: deepskyblue;
font-size: 44px;
font-weight: bold;
font-family: Wingdings; }d2

本文<DIV CLASS=ball>l</DIV><DIV CLASS=title>1</DIV>.title { color: darkblue;
margin-left: 8px;
margin-top: -39px;
font-size: 24px;
font-weight: bold;
font-family: Verdana; }</STYLE>

以前、このコーナーで紹介した「立体文字」「color」で文字の色を、「font-size」でフォントのを思い出してほしい。スタイルシートのマイナス

大きさを、「font-family」でフォントの種類（Wing書こう。

マージン指定を使って、別の文字を重ね合わせるdings）をそれぞれ設定する。
「.ball」はスタイ<DIV CLASS=ball>I</DIV>というテクニックだ。つまり、このTIPSでは「○」

ル設定に付ける名前で、ピリオドに続けて好き<DIV CLASS=title>1</DIV>と「1 」などの数字をそれぞれ記述して、スタイルなものを付ける。あとでこれを呼び出すことになシートによってこれらを重ね合わせることで「①」る。次に、数字の部分を定義する。

を表現しているのだ。では、「○」はどうすれば「<DIV CLASS=」に続けて、スタイル定義の際に付けた名前からピリオドをとったものを記入すいいか。TIPS & TRICKSでもおなじみの絵文字.title { color: darkblue;

ると、「DIV」で囲まれた部分にそれぞれのスタイフォント「Wingdings」を使おう。タグ1のスタ

margin-left: 8px;

ルが反 映 する。W i n g d i n g s フォントで「I 」は

イル定義は<HEAD>

margin-top: -39px;「○」にあたる。2行目の「1」をこれに重ねれば</HEAD>の中に記述する。まずは「○」の部分のスタイル設定から。

いい。
「.title」の「margin-top: -39px」の値を変「margin-left」と「margin-top」で数字の位置えながら調節してみよう。
「○」の中にうまく数.ball { color: deepskyblue;が決まる。
「margin-top」の値をマイナスにする

字が入ったら完成だ。今では、ナビゲーター4.0

font-size: 44px;と、数が増えるに従って文字がページの上部にでもこのTIPSが使えるようになった。①が使い

font-weight: bold;移動する。とりあえず適当な値を入れておこう。

たくなったら、ぜひチャレンジしてほしい。

font-family: Wingdings; }スタイル部分の定義はこれで終わりだ。本文を334 INTERNET magazine 1997/9

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

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

今月のテーマ

壁紙を制する
7月号のこのコーナーでは「背景色」に関するパズルに挑戦していただいた。背景色とくれば次は「壁紙」だ。
HTMLを覚えたてのころには、背景に画像を使うことが楽しくて頻繁に使ってしまう。ところが、実際にサーバーに上げてみると、表示速度の遅さに気が付いて「やっぱりやーめた」ということになりがちだ。そこで、もっとかしこい壁紙の使い方を考えてみたい。それも、あっと驚くような効果的なものがいい。今月は、この「壁紙」に挑戦していただく。トリックが分かったらすぐに解答を送ってきてほしい。正解者にはダイレクトプラスを発行させていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわら
かくして、今月のテーマ 壁紙を制する にチャレンジ！

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

1 壁紙を1枚だけ表示させろ！

4.0

4.0

3月号のこのコーナーで、背景画像を左サイドだけ、あるいは上1列だけに貼り付けるTIPSを紹介した。その後、ナビゲーター4.0もこのTIPSに対応した。今回のパズルはこれに関連したものになる。左の図を見てほしい。ウィンドウの左上に表示されているのはなんと壁紙。そう、まったく繰り返されないで1枚だけ表示されているのだ。壁紙を使うことで、へたをするとページ全体が読みにくくなることもある。部分的に貼り付けられたらと思ったことはないだろうか。また、繰り返さないですむのなら、タイル化に向かない画像も使えるはずだ。このTIPSでページが華やかになること間違いなし。さあ、チャレンジだ。
ヒント

Q U E S T I O N

3月号を読み返してみよう。
あれは確かスタイルシートを……

2 ウィンドウの真ん中に壁紙を表示させろ！

4.0

4.0

1問目が解けたら、もう1ステップ上の壁紙使いをめざそう。左の画像は、同様にページの背景として使用されている。なんとこちらはウィンドウズのデスクトップの壁紙と同じように、ウィンドウの中央に1枚だけ表示されているではないか。WWWブラウザーのウィンドウをどんなサイズにしても壁紙は真ん中にある。さらに、このページをスクロールさせると、壁紙は中央に固定されたままテキストだけが動く。つまり、好きな画像を背景にして、映画のエンディングのクレジット表示のような見せ方ができるのだ。工夫すればどこにでも貼り付けられるこのテクニック、まずは中央固定表示に挑戦してみよう。
ヒント

壁紙TIPSはスタイルシートにおまかせ。
固定は「fix」だから……

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

INTERNET magazine 1997/9335

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