新 連 載

誰よりも早く最新のHTMLを使ってみたい
新しいWWWブラウザーが発表され解説本などが出版される半年後になたと聞いて、何を最初に思い浮かべってやっと使い始めるというのが現誰よりも早く最新のHTMLを使うとなると、るだろう。「どんな機能が増えたの状だった。でももう安心してほしい。

どうしても避けて通れないのがWWWブラかな？ 」「インターフェイスは？ 」

このコーナーでは、次々と登場するウザーの互換性の問題だ。そこでこのコーなどなど、楽しみな点は人それぞれホットなHTML を使 った便 利 なかもしれない。でも、そこで「どんTIPSを、誰よりも早くお届けする。

なHTMLが使えるようになったのか

さらに、「HTMLパズルに挑戦しよな？ 」と考 える人 なら、ぜひこのう」のコーナーでは、最新HTMLをHTML TIPS＆ TRICKSを読 んで使いこなすための奇問難問にチャレほしい。今月からスタートするこのンジしていただく。「HTMLならおコーナーは、最新のHTMLを誰よりまかせ」という人はもちろん、これも早く使ってみたいという「新し物からHTMLをものにしたいと考えて好き」のあなたのためにある。これいる人も、ゲーム感覚でこのコーナまでは新しいHTMLが登場しても、ーを楽しんでほしい。

306 INTERNET magazine 1997/2

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

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

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

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

T IPS & T R ICKS

1
文字にマーカーを付ける
ページの背景に好みの色を使うのは、HTMLでは基本的なテクニックだ。このコーナーの読者なら、ページの背景がグレーのままなんてことはまずないだろう。それでは左の画面を見てほしい。なんと丸で囲んだ部分の文字の背景だけが黄色になっている。マーカーを塗ったような面白い効果だ。画像や表を使えばできそうな気がするが、ユーザーがフォントサイズやウィンドウの大きさを変えたらもうアウトだ。となると「ここの背景だけこの色で」と指定するHTMLを使うしかない。「そんなのあったかなぁ？」という人のために今月のTIPS＆TRICS第一弾を紹介しよう。

jhttp://www.microsoft.com/workshop/author/newfeat/samples/style_ex.htm

d<SPAN STYLE="background: yellow">
These letters' back ground is Yellow!
こんな風に使ってみよう</SPAN>

せっかく文字列の背景色を変えられるのだから、マーカー以外の効果も工夫してみたい。タ
イトルと組み合わせた「ラベル」のような効果や、短い線と組み合わせた「プラカード」のような効果と、用途はさまざまだ。

黄色のマーカーの秘密は今話題の「スタイルくない場合は<SPAN>を使う"、と憶えておこう。

シート」だった。スタイルシートは、文字のスタこれで黄色のマーカーの謎は解けた。このテクニ

イルを自由に定義できるだけでなく、このTIPSックは、アイデア次第でいろいろな場面で使える。のように背景の色も思いのままに指定できる。基

マスターすれば、画像を使う機会がぐんと減るか本の記述の仕方は次のとおりだ。

も？
◆◆

◆

<STYLE="何を: どうする">「何を」の部分を「アトリビュート」といい、フォントの大きさなら"font-size"､行間なら"lineheight"など、定義する内容を記述する。
「どうする」の部分は「値」と呼ばれ、アトリビュートの具 体 的 な数 値 などを指 定 する。この例 では"background"（背景）を"yellow"にするように定義しているわけだ。<SPAN>タグは文字列の一部分だけにスタイルを定義するときに使う。文
脈の中で、"文字のサイズも変えず、改行もした<SPAN STYLE>のあとの文字列に黄色のマーカーが付けられる。

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

バナーとして、画像の代わりとしてなど、用途はさまざまだ。

INTERNET magazine 1997/2307

T IPS & T R ICKS2表を使わずに段組を作る
ページに段組を使うと、雑誌や新聞のようなレイアウトができる。文章が多い場合などはできるだけ使っておきたいテクニックだ。
段組を作成するのに、通常は枠なしの表を使うが、これがなんとも面倒な作業だ。段の幅を調整したり、段と段の間のスペースを計算したりと、考えただけで「段組はやーめた」といいたくなる。
そこで左の画面を見てほしい。正真正銘の2段組のページだ。なんとここでは表 は一 切 使 っていない。段の数や段の幅を簡単に設定できる最新のHTMLが使われている。情報量の多いページのオーナー必見の「一度使うとやめられない」便利なTIPSを紹介しよう。

jhttp://home.netscape.com/comprod/products/navigator/version_3.0/
layout/examples/investment/content.htmld<MULTICOL COLS=2 WIDTH=90% GUTTER=50>
ここに文章が入ります</MULTICOL>「たったこれだけで段組が！」と驚いてしまう。と指定すると、「SIZE」の値の行間が空けられる。

<MULTICOL> は段組を設定するための便利な

さらに「 T Y P E = H O R I Z O N T A L 」 とするとHTMLタグだ。記述の仕方は次のとおりだ。

「SIZE」の値だけ右にインデントされる。段落や文章の区切りに使おう。以上、これだけあればもう段組の作成は思いのままだ。

・「COLS」の数値は段組の数を表す。
・「WIDTH」はすべての段組を合わせた広さが◆◆<MULTICOL>応用編<MULTICOL>タグは「入れ子」にして使える。たとえば、段組の中で<MULTICOL>を指定すると、段の中にさらに小さな段組が作られる。使い方によっては面白い効果が出せるぞ。

◆

ページの何パーセントを占めるかを表す。
・「GUTTER」は段と段の間を何ピクセル空けるかを表す。何も指定しないと10ピクセルの間隔が空けられる。
上記の3つの数値さえ決めてしまえばOKだ。また、<MULTICOL> とセットで使いたいタグに<SPACER>があるが、これは<SPACER TYPE=VERTICAL SIZE=20>
レイアウトの修正も3つのオプションを変えるだけだ。

308 INTERNET magazine 1997/2

段組の中に「入れ子」の段組ができる。

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

T IPS & T R ICKS

3
オートインストール対応のページを作る
インターネットエクスプローラ
でアクティブX コントロールを使ったサイトにアクセスすると、いわゆるオートインストールが始まる。最近ではVivoアクティブやフューチャースプラッシュなど、意外と手軽に使えるコントロールが発表され、自分のページにこれらを使う機会が増えてきた。となると、やはり自作のサイトもオートインストール対応にしておきたい。
ページの作成はアクティブXコン
トロールパッドを使えばいいが、これだけではオートインストール対応にはならない。というわけで「コンポーネントをインストールしています」のメッセージを出 す
COOLなTIPSを紹介しよう。

jhttp://www.vivo.com/ie/sample.htm

d<OBJECT CLASSID="clsid:02466323-75ed-11cf-a267-0020af2546ea#Version=1,0,0,0"
WIDTH=176 HEIGHT=144
CODEBASE="http://www.vivo.com/ie/vvweb.cab"><PARAM NAME="URL" VALUE="../videos/msoft.viv"><PARAM NAME="AUTOSTART" VALUE="TRUE"><PARAM NAME="VIDEOCONTROLS" VALUE="ON"><EMBED SRC="../videos/msoft.viv" width=176 height=144 autostart=true></OBJECT>

難解なタグが並んでいるが、先程も述べたよ

この中から「CODEBASE」探せば、セットアッうにアクティブX コントロールパッドを使えば、プファイルの場所が見つかるはずだ。アクティブ

これらのタグのほとんどが自動的に入力される。

Xコントロールパッドで作成したら「CODEBASE」

ここでのポイントはを探しに行こう。
◆◆◆

CODEBASE="http://www.vivo.com/ie/vvweb.cab"

ネットスケープのためにここでもう1つ、アクティブXコントロールを使う際の気の利いたタグを紹介しよう。上図のタグの<EMBED SRC>の部分に注目してほしい。これを書いておくとネットスケープでもこのページのコンテンツが見られるようになる。の部分だ。
「CODEBASE」のあとにアクティブXコントロールのセットアップファイルの場所を指定する。インターネットエクスプローラはこの情報をもとにオートインストールを行っていたのだ。
この例では「vvweb.cab」がセットアップファイルにあたる。さて問題はこの情報をどこで入手するかである。実は、これはそれほど難しい作業ではない。まず、使いたいアクティブXコントロー
ルに対応したサイトにアクセスする。そこで「ソースの表示」を選択してHTML を表示させる。

ぺージの上で右クリック、「ソースの表示」でHTMLが見える。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D<OBJECT>を使うなら<EMBED>も忘れずに。

INTERNET magazine 1997/2309

T IPS & T R ICKS

4
好みの色で表の陰影を付ける
まずは左の画面を見てほしい。
色とりどりの表が並んでいる。セルに色を付けるためのHTMLは以前からあって、今では多くのページで見かける。さて注目は一番下の表だ。外枠の部分が青と緑の2色になっている。通常は、この部分は銀色と灰色の2色を使って立体 的 に見 せている。これまでのHTMLではこの色を変えることはできなかったはずだ。そのため、ページのデザインによっては、この銀色の枠が「野暮だなぁ」と感じることも少なくなかった。もしこの陰影の2色が自由に決められたら。考えただけでもワクワクするこのテクニックが今月のラストTIPSだ。それでは紹介しよう。

jhttp://www.3rdplanet.com/~nivek/tblfrm.htm

d<TABLE BORDER=1BORDERCOLORLIGHT="green "BORDERCOLORDARK=" blue">
ここに通常の表を定義します。
</TABLE>

このTIPSのポイントは次の2行に集約されてこんな使い方もできるだろう。
もう 1 つ、 このテクニックを使 う場 合 は、いる。

「BORDER」の値が大きな決め手となる。立体
BORDERCOLORLIGHT="green"

感を出すなら「3」以上を指定しよう。これで好BORDERCOLORDARK="blue"

みの色で表の陰影を付けるテクニックも自由自在だ。

先に述べたように、表の外枠は2つの色を使って立体感を出すようになっている。通常は明るい部◆◆

表はセルの中に文字を入れないと、ピラミッド型のボタンのようになる。これに色を付ければ、カラフルなアイコンの出来上がりだ。上図の 例では「CELLSPACING」を3に「BORDER」を15にそれぞれ指定した。文字を右に配置するための「ALIGN=LEFT」を忘れずに。

◆分が銀色で、影の部分が濃い灰色だ。上のタグにあてはめると、「BORDERCOLORLIGHT」で明るい部分の色を、「BORDERCOLORDARK」で暗い部分の色をそれぞれ定義することになる。
この2つにどんな色を指定しても構わないが、上の例のようにまったく違う色を使うと立体感はなくなる。反対に明暗それぞれの色に同系の色を指定すると、ページからぐんと浮き上がって見えるはずだ。デザインによって、使い分ければいい

310 INTERNET magazine 1997/2

2つの色に何を選ぶかがこのTIPSの決め手だ。

色付きの枠線で作ったカラフルなボタン。

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

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

今月のテーマ

空間を制する
HTMLはイマジネーションが勝負だ。頭の中で「こんなページを作りたい」と思い浮かべたことを、具体的にどのタグをどう使って実現していくか。なんといってもここ「HTMLパズルに挑戦しよう」
宛 先が一番面白い。タグ本来の用途に縛られず、柔軟な発想を持つこと、これはもう「パズル」の世界といってもいいだろう。そこでHTML

D

TIPS ＆TRICKSでは毎回いくつかのHTMLパズルを出題して、皆さ正解が分かった人も、分からなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ず「HTML TIPS＆TRICKS」の1行を忘れずに。あなたの挑戦を待つ！

んになぞ解きに挑戦していただくことにした。トリックが分かったらすぐに解答を送ってほしい。正解者にはダイレクトプラスを発行させていただく。なお、答えは来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ 空間を制する にチャレンジ！

Q U E S T I O N

mip-cdrom@impress.co.jp

行間を自由自在に

1 あやつるにはHTMLでページを作成する際に、「行間」を気にしたことはあるだろうか。実は読みやすいページと読みにくいページの分かれ目はこの「行間」にあるといっても過言ではない。びっしりと隙間なく文字の詰まったペー
ジは、ちょっと見ただけで読みたくなくなる。とはいっても<BR>や<P>タグで1行空けると、行間が広くなりすぎて体裁が悪くなる。そこで問題だ。 行間を自由自在にあやつるには？ 左図では上から下に行くに従ってだんだんと行間が詰まっていて、最後は文字のサイズの半分以下まで縮まっている。ブラウザーはネットスケープだからスタイルシートは使っていないはずだ。さて、このトリックは何だろう？
ヒン
トそれぞれの行間には空白の1行が挿入されている。
この1行のサイズを変えられたら……

図A

Q U E S T I O N

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

1問目はいきなり難問が登場したので、2問目はちょっと簡単な問題でいこう。左の2枚の図を見てほしい。図Aと図Bの違いはどこだろう。見て分かる
とおり左上のイメージマップの位置だ。Aは普通に画像を貼り付けた例だが、これでは上部と左部にわずかな隙間が空いてしまう。気にならないといえばそれまでだが、図Bではこの隙間がまったくない。こっちのほうがかっこいいぞ。ではどうやって？ フレー
ムの隙間を埋めろ！ 次はこの問題にチャレンジだ。
ヒン
ト

あるタグを使って、その値を「0」にすると……

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

INTERNET magazine 1997/2311

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