第 ２ 回

このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性Navigator 4.0の「レイヤー」
タグ登場！の問題だ。そこでこのコーナーでは、TIPSごとのブラウザーの対応状況をアイコンで表している（1月10日現在）。これを参考に、使用するWWWブラウザーを選んでほしい。

今月の注目は何といっても「ネットスケープコミュニケーター」の登場だろう。
インターネットエクスプローラ3.0以上

この中のWWWブラウザーである「ナビゲーター4.0」は「レイヤー」という最新のHTMLに対応した。今月のこのコーナーでは、この「レイヤー」の活用法はもネットスケープナビゲーター3.0以上

ちろん、ホームページ作 成 の可 能 性 が100 倍 アップするCOOL なTIPS と3.0

TRICKS満載でお届けする。

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

2月号「HTMLパズルに挑戦しよう」の解答
第一回から多くのチャレンジャーがHTMLパズルに挑戦してくれた。正解者の数も予想以上に多く、もっと難度の高い問題を用意しなくてはと、編集部ではうれしい悲鳴を上げている。それでは、2月号

空間を制する の解答を発表しよう。

A N S W E R

1 行間を自由にあやつるには

このパズルのポイントは「どうすればスタイルシートを使わずに行間のサイズを変更できるか」ということだった。ヒントにもあるように、それぞれの行間に空白の1行を挿入して、このサイズを変更できればいいわけだ。秘密は全角のスペースにあった。答えは……
文字列<BR><FONT SIZE="-1"> </FONT><BR>
文字列<BR>となる。<FONT>と</FONT>の間には全角のスペースを入れる。これで「SIZE=」の値を変更すれば行間は自由にあやつれるのだ。

A N S W E R

正解者の方々：Orange Juiceさん、Koji Hattoriさん、市川徹さん、しらはた＠アレスネットさん、他

2 フレームの隙間を埋めろ！

ナビゲーターユーザにはちょっと辛かったかも。マイクロソフト社のホームページで使われているこのテクニックの秘密は<BODY>タグにあった。フレームはもちろんフローティング
フレームを使う際には抜群の効果を発揮するからぜひマスターしてほしい。答えは……
<BODY TOPMARGIN=0 LEFTMARGIN=0>となる。「MARGIN」の値を増やせば、その分だけページの上部と左部に空白ができる。これでページの「余白」は思いどおりになるぞ。

320 INTERNET magazine 1997/3

正解者の方々：Ryo NAGURAさん、児玉 和重さん、他

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

T IPS & T R ICKS

1
WWWブラウザーを自動判別する
3.0

4.0

まずは左の2つのページを見てほしい。なんと、これはまったく同じページを異なるWWWブラウザーで表示させたものなのだ。これではせっかくのデザインも台無しだ。こうなると、最新のHTMLを自由に使うためには、WWWブラウザーごとに専用のページを用意するしかなさそうだ。ただし、トップページに「ナビゲーターはこちら」などのリンクを用意して、ユーザーに選択させるのはCOOLではない。ここはひとつ、アクセスした瞬間に自動的にどのWWWブラウザーかを判別して、それぞれの対応ページにジャンプするという仕掛けを作っておこう。これが今月のTIPS＆TRICKS第一弾だ。

jhttp://www.windows.com/gallery/files/styles/unison.htmd<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == "Netscape")
location = "index2.htm";</SCRIPT>JavaScriptを使えば、これくらいの処理は簡単の直後に上記のJavaScriptを書いておく。これにできてしまう。ポイントは<SCRIPT>と</SCRIPT>とは別にナビゲーター対応の「index2.htm」をの間に書かれた2行だ。

バージョンの自動判別もできる「navigator.appVersion」を使えば、WWWブラウザーのバージョン情報も調べられる。試しに下記のタグを記述してみてほしい。
<SCRIPT LANGUAGE="JavaScript">
document.write（navigator.appVersion）;</SCRIPT>
また、括弧の中を「navigator.appName」に変えれば、前述のWWWブラウザー名も確認できるぞ。

作る。これで「index.htm」にアクセスすると、それぞれのWWWブラウザー対応のページに自動navigator.appName的に振り分けられることになる。これさえあればと記述すれば、WWWブラウザーがナビゲーター
なら「Netscape」という答えを、エクスプロー最新のHTMLが自由に使えるぞ。
◆◆◆

ラなら「Microsoft Internet Explorer」という答
WWWブラウザーのバージョン情報が表示されるえをそれぞれ返す。
location = "index2.htm";
は「index2.htm」にジャンプするようにWWWブラウザーに命令する。この2つを「if」で結び付けて「もしWWWブラウザーがナビゲーターならindex2.htmにジャンプする」という処理を行うようにしたわけだ。 エクスプローラ対 応 の「index.htm」を作ったら、このページの<BODY>ページ作成の労力は2倍になるが、楽しみも2倍だ

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

INTERNET magazine 1997/3321

T IPS & T R ICKS

2
画像の上に画像を重ねる（レイヤー）
4.0
ちょっと見ただけでは何がすごいのか分からない左のページには、最新のトリックが隠されている。
実は中央のオブジェは、建物、ツリー、ガラスの入れ物がそれぞれ別々の画像になっていて、これらが1枚ずつ重なってできているのだ。さらにベルの部分を押すと、この上に雪まで降ってくるという演出付きだ。このように複数の画像を重ねて、1枚の絵を作成することを「レイヤー」という。そしてナビゲーター4.0とともに、この「レイヤー」タグがHTMLの世界にやってきた。今月のイチオシ、ページレイアウトがもっと自由にできる、デザイナー待 望 の最 新TIPSを紹介しよう。

jhttp://www.siegelgale.com/holidaycard/card.html

d<LAYER LEFT=20 TOP=100 Z-INDEX=1><IMG SRC="画像ファイル.gif"></LAYER>

文字だって重ねられる「レイヤー」タグは画像の配置を3つの値によ先の画像の「上」に重なることになる。このように、3つの値を操作することで、画像を好きな位って決めている。

置に、好きな順番に何枚でも配置できるわけだ。
・「LEFT」の値はページの左端からの距離。

アイデア次第では、これまで見たこともないよう・「TOP」の値はページの上端からの距離。

な斬新なページが作れること間違いなしだ。

・「Z-INDEX」の値は重なった画像の下からの順番。

◆◆

文字も<LAYER>と</LAYER>の間に記述すれば、画像と同様に3つの値で自由に配置できる。これはスタイルシートでもおなじみのテクニックだが、「レイヤー」のほうがより手軽に使える。さらに画像と組み合わせれば、可能性は無限に広がるはずだ。

◆つまり上記の<LAYER></LAYER>の中の画像は、ページの左端から20ピクセル右に、上端から100ピクセル下に配置される。そしてこのあとにもう1枚別の画像を定義すると、<LAYER LEFT=20 TOP=100 Z-INDEX=2><IMG SRC="画像ファイル2.gif"></LAYER>「Z-INDEX」の値によって、この画像ファイル2は322 INTERNET magazine 1997/3

既製の素材を使って自分だけのコラージュが作れる<FONT>タグと組み合わせればスタイルシート並みのデザインもできる

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

T IPS & T R ICKS

3
左サイドだけに背景画像を使う
ページの背景に画像を使う場
合、指定した画像はページ全体にわたってタイル状に並べられる。
それでは左の画面を見てほしい。
なんと、左サイドの背景だけに画像が並んでいる。「左部に木の葉が描いてあって、残りの部分が無地の細長い画像を並べてある」と思った人もいるだろうが、実は2つのページにはまったく同じ画像を使っているのだ。ということは、背景画像をどのように並べるかを指定できるHTML が存在するのか？ もしこれがあれば、左サイドを別の色に変えるためだけに、フレームや表を使う必要もなくなるわけだ。それではこれを実現する画期的なTIPSを紹介しよう。

d<STYLE>BODY {background:white url (back.gif) repeat-y}</SCRIPT>

これはあまり知られていないが、スタイルシ左部1列にそれぞれ背景画像が並ぶことになる。

ートの中のオプションを使えば簡単にできてしま

あとは、 このスタイル設 定 を< H E A D > とう。ここでのポイントは2点だ。まず、背景は画</HEAD>の間に記述しておけばOKだ。これさえ像の部分と「白色」の部分とに別れている。こあれば、ファイルサイズの大きな「細長い画像」れを同時に指定できなくては意味がない。画像以を使わずにすむ。本当にありがたいTIPSなのだ。

外の部分がグレーでは実用的とは言えないだろ◆◆◆

表の中でも使えるぞ
このテクニックはページの背景だけでなく、表のセルの背景にも使える。
設定は<TABLE STYLE="background: URL（back2.gif）repeat-y">のようになる。下図を見てもらえば分かるが、この組み合わせは強力だ。

う。そこで、
background:white url（back.gif）の部分で色（White）と画像（back.gif）の両方を指定している。次に画像を左1列だけに並べるための設定をする。
repeat-yがこれに当たる。
「y」というのはX軸とY軸のyのことで、「x」ならページの上部1列に、「y」ならrepeat-xなら上1列だけに画像が並ぶ

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

グラフィカルかつ軽いページが簡単に作れる

INTERNET magazine 1997/3323

T IPS & T R ICKS

4
色の名前を使いこなす
3.0

4.0

左図はさまざまな色に対応する「16進数」の一覧表だ。「BLACK」や「WHITE」といったおなじみの色は別として、この表にあるような中間色は「16進数」で指定することが多 い。 そしてこれがHTMLの中で、最も面倒な作業の1つになっている。数字を見ても直感的に色が思い浮かばないうえに、好みの色を見つけるのが難しい。そこで左図の、色の上に書かれた「aliceblue」などの名前を見てほしい。これは「赤」や「青」と同じ色の名前に当たる。実はこ
こに表 示 された色 だけでなく、140以上の色が「名前」で指定できるのだ。そこで、今月の最後のTIPS としてこの便利な色名を一挙に紹介しよう。

d<BODY BGCOLOR=aliceblue>

色を指定する代表的なものとして<BODY>に紹介する「色名」を上記のHTMLにあてはめ「色名」を覚えておけば、これからは簡単に設定タグを挙げてみたが、当然これ以外にもさまざてみて、実際にどのような色が表示されるかを確ができるはずだ。これさえあれば140色のすぐにまな場面での色の指定が可能だ。ここでは以下

かめてみてほしい。好みの色が見つかったらその使える絵の具を手に入れたことになるぞ。

alicebluecyan

dimgraylavenderblushmaroonorangeredseashell

antiquewhitedarkblue

dodgerblue

lawngreen

mediumaquamarineorchidsiennaaqua

darkcyanfirebricklemonchiffon

mediumblue

palegoldenrod

silveraquamarine

darkgoldenrod

floralwhitelightblue

mediumorchid

palegreen

skyblueazure

darkgrayforestgreen

lightcoral

mediumpurple

paleturquoise

slateblue

beige

darkgreenlightcyan
lightgoldenrodyellow

mediumseagreen
mediumslateblue

palevioletredpapayawhip

slategraysnowbisquedarkkhakifuchsiagainsboro

black

darkmagenta

ghostwhitelightgreen

mediumspringgreen

peachpuff

springgreen

blanchedalmonddarkolivegreen

gold

lightgrey

mediumturquoise

peru

steelblue

blue

darkorange

goldenrod

lightpinkmediumvioletred

pink

tan

blueviolet

darkorchid

lightsalmon
lightseagreen

midnightblue
mintcreamplum
powderblue

teal
thistlebrown

darkred

gray
green

burlywooddarksalmon

greenyellow

lightskyblue

mistyrose

purpletomatocadetblue

darkseagreen

honeydew

lightslategray

moccasinredturquoiselightsteelblue
lightyellow

navajowhiterosybrown

violetnavyroyalblue

wheatchartreusedarkslateblue

hotpink

chocolatedarkslategray

indianredcoral

darkturquoise

indigolime

oldlacesaddlebrown

white

cornflowerblue
cornsilk

darkviolet

limegreen

olive

salmondeeppink

ivory
khaki

linen

olivedrab

sandybrownwhitesmoke
yellow

crimsondeepskyblue

lavendermagentaorangeseagreenyellowgreen

324 INTERNET magazine 1997/3

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

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

今月のテーマ

アイコンを制する
画像を多用したページはどうしても表示速度が遅くなる。このHTML TIPS＆TRICKSの読者の方々なら、デザインに凝りつつも限界まで表示速度を上げることにチャ
レンジしてほしい。さて、画像といっても、どうしても必要なものとそうでないものがあるはずだ。そこで今月のこのコーナーでは、画像を使わずにアイコンを作るトリックに挑戦していただく。ただし、「小さな表で代用する」程度の簡単なものではない。トリックが分かったらすぐに解答を送ってほしい。正解者にはダイレクトプラスを発行させていただ
く。なお、正解は来月のこのコーナーの冒頭で発表する。それでは頭をやわらかくして、今月の テーマ アイコンを制する にチャレンジ！

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

ナビゲーターから1 アイコンを呼び出せ！

3.0

左図のページで使われているアイコンを見てほしい。双眼鏡、フォルダー、フィルム、コンピュータ、そしてメールの送信ボタンなど、ホームページで頻繁に使われているものばかりだ。通常ならこのページを作成するのに8枚の画像が必要になる。多くの場合、この手のページにアクセスすると、すべてのアイコンが表示されるまで待たされることになる。さて、それではこのページのどこにトリックがあるのだろうか。なんと「画像を1枚も使っていない」のだ。
「うそーっ」という声が聞こえてきそうだが、本当に1枚も使っていない。さあ、前回の正解者の方々もさらに難解なこのトリックにチャレンジしよう！
ヒン
トQ U E S T I O N

ナビゲーター自身がこれらのアイコンを持っている。
これを呼び出せれば……

2 アイコンの正体を見破れ！
見た瞬間に「なんだか怪しい」と感じるはずだ。アイコンといい、文字といい、いつも見かけるページとは何かが違う。ページ全体が画像のようにも見える。言うまでもないだろうが、当然このページも画像を1枚も使っていない。「それじゃあ、顔のマークやポストの絵は何なんだ？」ということになる。ただし、このページには1つだけ制限がある。現時点では、ウィンドウズユーザーでないとこのようには表示されない可能性があるということだ。実は、これはこのトリックの大きなヒントにもなっているぞ。さて、今月も腕に自慢のチャレンジャーから多くの挑戦があることを期待している。健闘を祈る！
ヒン
ト

画像を使っていないとすれば、文字を使うしかない……

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

INTERNET magazine 1997/3325

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