第 3 回

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

誰よりも早く最新のHTMLを使ってみたいの問題だ。そこでこのコーナーでは、TIPSごとにブラウザーの対応状況をアイコンで表している（2月10日現在）。これを参考に、使用するWWWブラウザーを選んでほしい。

このコーナーもスタートしてから3回目を迎えた。この間に多くのHTMLファン
インターネットエクスプローラ3.0以上の方々から励ましのメールをいただいた。中には「さっそくTIPSを自分のホームページで使ってみた」と言って、URLを送ってくれた方もいる。ますます増え続

ネットスケープナビゲーター3.0以上ける「TIPS＆ TRICKERS」のために、今月もあっと驚くCOOLなTIPSと3.0

TRICKS満載でお届けする。

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

3月号「HTMLパズルに挑戦しよう」の解答
第2回はかなりの難問だったにもかかわらず、多くのチャレンジャーから解答が寄せられた。さすがに正解者の数は前回ほどではなかったが、それぞれに工夫を凝らしたユニークなHTMLに、編集部では「これも正解でいいのでは」と頭を悩ませている。それでは、3月号 アイコンを制する の解答を発表しよう。

A N S W E R

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

ナビゲーターでFTPサイトにアクセスすると、フォルダーやファイルのアイコンが表示される。これがナビゲーター自身が内部に持っているアイコンなのだ。これを呼び出すには、<IMG SRC="internal-gopher-index">と記述する。「" "」の中を変更することでさまざまなアイコンが呼び出せる。以下の文字列を入力してみよう。これらがこのパズルの答えだと分かるはずだ。
「internal-gopher-menu」、「internal-gopher-sound」、「internal-gopher-movie」、「internal-gopher-telnet」、「internal-gopher-text」、「internal-news-followup-andreply」、「internal-news-subscribe」

A N S W E R

正解者の方々： Masaya Ishibashiさん、白畑真さん、Jun Katayamaさん、市川徹さん、ほか

2 アイコンの正体を見破れ！

このアイコンの正体は、絵文字のような「Wingdings」というフォントだった。右図のようにアイコンとして使うためには、これを巨大に表示させ、かつWWWブラウザーの設定に左右されないようにサイズを固定する必要がある。スタイルシートで次のように定義する。
<SPAN STYLE="color: red; weight: medium;
font-size: 40pt; font-family: Wingdings;">
J</SPAN><FONT>タグを使った解答が多かったが、これではアイコンのサイズを固定できないことと、問題にエクスプローラのアイコンだけが付いていたことを考えると正解は<STYLE>となる。

308 INTERNET magazine 1997/4

正解者の方々：臼井理浩さん、Koji Hattoriさん、古澤祐治さん、佐崎正幸さん、ほか

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

T IPS & T R ICKS

1
リンクのアンダーラインを消す
Webページになくてはならいものの1つに「リンク」がある。ところが、ページのデザインを考える際に、この「リンクの下に引かれる線」がとても邪魔だと感じたことはないだろうか。WWWブラウ
ザーの設定項目には「リンクの下線を消す」などの項目がある。ページを見る側のユーザーが、すべてこの項目にチェックを付けていれば問題はないが、これはほとん
ど期待できないだろう。そこで左の図を見てほしい。
「email form」という文字は、間違いなくリンクだ。それなのに、なんと「アンダーライン」がないではないか。では、どうやって？ これが今月のTIPS第一弾だ。

jhttp://www.tucows.com/

d<STYLE type="text/css">
A { text-decoration: none; }</STYLE>

色も変えてみよう
リンクのアンダーラインを消すには、スタイルシートを使えばよい。何種類かの設定方法があるが、<A href="URL"
style="text-decoration: none">文字列</A>

上記のHTMLは、<HEAD> </HEAD>内にスタイル指定して、ページ全体にこれを反映させるやり方とする。これだけで驚くほどページがすっきりしを使っている。これを書いておけば、ページの中でて見える。ぜひ、一度試してみてほしい。

<A>タグで囲まれたすべての文字列（リンク）から◆◆

この際リンクの「色」も好みに合わせて変えてみよう。スタイルシートも使えるが、<BODY LINK=（色名）VLINK=（色名）>が最も簡単な設定方法だろう。
「LINK」はリンクをクリックする前の色、「VLINK」はクリックした後の色をそれぞれ表す。

◆

下線が消える。定義している内容は次のとおりだ。
A { text-decoration: none; }「 A 」 はリンクを設 定 する< A > を指 す。 次 の「text-decoration」とはまさに「下線」のことだ。
「none」は「なし」という意味になる。これらをまとめると、「<A>タグで囲まれた文字列に下線をつけない」という指定をしたことになるわけだ。
なお、ページ内のある特定のリンクだけにこの指定をしたい場合は、下線がないとこんなに文字が読みやすくなる

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

これでリンクのデザインは思いのままだ

INTERNET magazine 1997/4309

T IPS & T R ICKS

2
第二のウィンドウを開く
3.0

4.0

このTIPSは、解説を読む前にまず左のページにアクセスしてみてほしい。「AudioNet」というリアルオーディオサイトだ。リンクになっている曲目をクリックすると音楽の再生が始まる。これだけならよくあることだが、このページのすばらしい点は、音楽の再生と同時にもう1 つの小さなウィンドウが開き、ここにレコードジャケットや再生中の曲目リストなどが表示されるということだ。つまり、一度リンクをクリックするだ
けで「リアルオーディオファイル」と「ガイド画面」の2つのURLにアクセスすることになる。それでは、COOLで不思議なこのTIPSを紹介しよう。

j http://ww2.audionet.com/jukebox/jazz30.htm

1d<SCRIPT LANGUAGE="JavaScript">

2<A HREF="ファイルのURL" onClick ="WindowOpen( )">function WindowOpen( ) {open("guide.htm", "window1","toolbar=no,height=250,width=300");}

文字列
</A>

</SCRIPT>

この画期的な仕掛けは、Java スクリプトを中に記述する。まず、「open」でウィンドウが開いる。つまり、先に定義した「Window Open( )」使えば実現できる。AudioNetのページではもうく。次に「( )」の中にある「guide.htm」を読み込を呼び出すことになる。これで、小さなウィンド少し複雑なスクリプトを使っているが、ここではむ。
「window1」はこのウィンドウの名前で、フウに表示される「guide.htm」というページと、これをできるだけ簡略化してみた。まず、1のタレームなどで参照するターゲットウィンドウと同リアルオーディオファイルなどのコンテンツにあグを見てみよう。これは<Head>じ意味を持つ。
「toolbar=no」によって、ウィンたる「ファイルのURL」に同時にアクセスできる。

ドウからツールバーが消える。その後の記述はウ

ちょっと難しいが、ぜひ試してみてほしい。

ィンドウのサイズを決めるものだ。それでは、2◆</Head>内に記述する。ポイントは、
function WindowOpen( ) {◆◆を見てみよう。

open("guide.htm", "window1","toolbar=no,height=250,width=300");<A HREF="ファイルのURL"}

onClick="WindowOpen( )">の部分だ。ここで「WindowOpen( )」という名前<A>タグは通常のリンクを表す。このあとの文字の、HTMLの中で呼び出して使うスクリプトを定列をクリックすると、「ファイルのURL」にアクセ義している。この名前は好きなものを付けてよい。

スする。さらに「onClick」があることで、「リンクこれを呼び出したときに何が起こるかを「{ }」のをクリックすると" "が起こる」という定義をしてコンテンツのガイドを表示させてみた

310 INTERNET magazine 1997/4

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

T IPS & T R ICKS

3
オールマイティーなマージン設定
4.0
まずは左の2つのページを見てほしい。エクスプローラのユーザ
ーなら一度は見たことがあるはずの、米国マイクロソフト社のホームページだ。このページをエクスプローラとナビゲーター4.0でそれぞれそれぞれ表示させてみた。どこが違うかはもうお分かりだろう。
ナビゲーターではページの左部と上部にそれぞれ空白ができてしまうのだ。2月号のHTMLパズルでも紹介したように、エクスプロー
ラにはページの余白をなくすための独自のHTMLがある。そこで、ここでは、どちらのWWWブラウザーでも同じようにこの効果が出せる、画期的なHTMLを紹介しよう。これは便利だぞ。

j http://www.microsoft.com/

d<BODY TOPMARGIN=0 LEFTMARGIN=0><LAYER LEFT=-1 TOP=-1>
本文</LAYER>

ナビゲーター4 . 0 のレイヤータグを使 えば、端からの距離を、「TOP」はページの上端からの</LAYER>で囲まれた文字や画像を距離をそれぞれ表す。これをマイナスに指定するページの好 きな場 所 に配 置 できるのだ。 このことで余白がなくなるわけだ。そして、こちらはHTMLのポイントはまず、エクスプローラでは無視される。結果として、ど<LAYER>

ちらのWWWブラウザーでこのページを見ても結<BODY TOPMARGIN=0 LEFTMARGIN=0>

残念ながら、ナビゲーター3.0では、マイナス指定が必要なこのTIPSは使えないが、余白を広げるだけなら<SPACER>タグを使えば、マージン設定をエクスプローラと同じにできる。

果はまったく同じことになる。このような工夫が、これから最も重要なポイントになるはずだ。の部分だ。これは先にも述べたように、エクスプ

ナビゲーター3.0の場合◆◆◆ローラのためのマージン設定だ。
「TOPMARGIN」
はページの上端からの距離を、「LEFTMARGIN」<BODY TOPMARGIN=50
LEFTMARGIN=50><SPACER HORIZONTAL SIZE=50><SPACER VERTICAL SIZE=50>

は左端からの距離をそれぞれ表す。両方の値が0としておけば、どちらのWWWブラウザーでこのページを表示させても、上端から50ピクセル分、左端から50ピクセル分の余白ができる。
これでWWWブラウザーの種類を問わず、マージン設定が自由にできる。

なら上図のように余白がなくなる。当然このタグはナビゲーターでは無視される。次に、<LAYER LEFT=-1 TOP=-1>
でレイヤーの指定をする。
「LEFT」はページの左ナビゲーターでもページの余白がなくなった

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

INTERNET magazine 1997/4311

T IPS & T R ICKS

4
リンクドスタイルシートを使う
左図はスタイルシートを駆使してデザインされたページだ。ざっと見ただけでも4種類の書体が設定されている。これだけのスタイルをそれぞれ定義していくとなると、この1 ページの作成だけでもかなりの労 力 を必 要 とするはずだ。もちろんWebサイト全体を作るとなると、ページはどんどん増えていく。デザインには凝りたいが、手間を考えると「スタイルシートはやめた」と言 いたくなる。
でも、ちょっと待ってほしい。実はこのページには<STYLE> の記述はないのだ。その代わりに、どのページからも参照できるテンプレートのようなものを使っている。
ではどうやって？ これが今月最後のTIPSだ。

j http://www.microsoft.com/workshop/author/other/linkedcss-f.htm

d1

H1 { font-family: Times New Roman;font-size: 70pt;
color: white; }H2 {font-family: Arial;
font-size: 40pt;
margin-top: -120pt;
color: crimson }P {font-size: 30pt;
text-indent: 50pt;
color: blue }2<LINK REL=STYLESHEET HREF=" style.css " >この機能は「リンクドスタイルシート」と呼P {font-size: 30pt;

ルさえ作っておけばあとは2のタグ1行を挿入すばれる。まず、スタイル設定だけを記述したフ

text-indent: 50pt;るだけで済むことになる。もうスタイルシートはァイルを「CSS」の拡張子をつけて保存する。そcolor: blue }怖くないぞ。

れぞれのページはこのCSSファイルにリンクを張れば、スタイルを参照できる。それでは実際に内これだけを記述したら、「style.css」などの名前容を見てみよう。

を付けて他のページと同じフォルダーに保存する。中身はいくつ指定しても構わない。次にH1 { font-family: Times New Roman;font-size: 70pt;<LINK REL=STYLESHEET HREF="style.css">

color: white; }H2 {font-family: Arial;をそれぞれのページの<HEAD>

font-size: 40pt;

記述する。こうしておけば、ページの中で<H1>

margin-top: -120pt;

や<H2>または<P>を使った際に、CSSファイル

color: crimson }の内容が反映される。つまり、1つのCSSファイ

312 INTERNET magazine 1997/4</HEAD>内にCSSファイルの設定が反映された

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

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

今月のテーマ

表を制するHTMLの中でも「表」ほどさまざまな用途に使えるものはない。段組、レイアウト、アイコン、メニューバーなど、これこそアイデアが生きるHTMLなのだ。さらにエクスプロー
ラの表拡張機能を使えば、グラフィカルで不思議なデザインのページがいくらでも作れてしまう。そこで今月のこのコーナーでは、この「エクスプローラ表拡張タグ」に挑戦していただく。ナビゲーターユーザーもこの機会にこの機能を調べてみよう。トリックが分かったらすぐに解答を送ってきてほしい。正解者にはダイレクトプラスを発行させていただく。なお、正解は来月のこのコーナーで発表する。それでは 頭をやわらかくして、今月のテーマ 表を制する にチャレンジ！

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

Q U E S T I O N

1 背景画像付き枠線の謎を解け！
煉瓦作りの壁に、木枠の窓を付けたようなデザインのページだ。当然ページの背景には画像を使っている。さて、問題の表だが、この「木枠の窓」全体が1つの表でできている。2行2列の表のセルには水色の背景色を付け、それぞれの文字を書き込んだ。さて、問題は「木目の付いた枠線」なのだ。エクスプローラでは、確かに個々のセルに背景画像を使える。また、枠線の色も自由に指定できる。でも、どうすれば枠線の背景に画像を使えるのだろうか？ 左の図をよーく見て考えてほしい。腕に自慢のチャレ
ンジャーは、回を重ねるごとに増え続けている。答えが分かっているのに解答を送っていないあなた、今月こそ思い切ってメールを出してみよう。
ヒン
トQ U E S T I O N

はっきり言ってこの表を作るには「根気」がいるぞ……

2 横線はあり、縦線はなしの謎を解け！
さて、次はセルにさまざまな色を付けたカラフルな表だ。
「でもこれのどこがパズルなんだ」という声が聞こえてきそうだが、よく見てほしい。
まず、外枠には太目の黒い線が引かれている。そして1列目のセルを横に見ていくとそれぞれの色の境界には線は見えない。2列目も同様だ。ところが、1列目と2列目の境目に、1本の細い線が入っている。つまり、この表の中には「縦の線」はなく、「横の線」だけがあるのだ。おかしいなと思ったら、さっそくこの表を作ってみよう。おそらく、難度はかなり高いはずだ。これが分かったら本当に「脱帽」だ。今月もあの手この手のユニークな解答を期待して、健闘を祈る！
ヒント

ある、エクスプローラ表拡張タグが必要だ。
これさえ分かれば……

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

INTERNET magazine 1997/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.