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

藤井幸孝／大内 勇／高橋登史朗とにブラウザーの対応状況をアイコンで表している（2月10日現在）。これを参考に使用するWWWブラウザーを選んでほしい。

1997年2月号から始まったこの連載もついに50回目を迎える運びとなった。

4

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

5

インターネットエクスプローラ5以上いる。今回も誰でもすぐ応用できるものから、開発中の Mozilla 0.7と5.5

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

XMLによる最新テクニックまで幅広くそろえた。じっくりと堪能してほしい。

4

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

6

ネットスケープ6以上

これまでに紹介したTIPSはパズルも含めるとおよそ300。1つ1つは小さなTIPSだが、その積み重ねがたくさんの達人を生み出してきたものと確信して

CD-ROM収録先 Å Magnavi→Ip0104→Htmltips+CD-ROM 今月号のTIPSをすべてCD-ROMに収録!!

M18

Mozilla3月号「HTMLパズルに挑戦しよう」の解答
いろんなブラウザーでチェックしなければならない問題だったためか、解答者は少なかった。最新版のブラウザーだけではなく、たまには古いブラウザーや違うOSのブラウザーを使ってみることをおすすめしたい。
HTMLに関する知識が今以上に深まるだろう。

A N S W E R

1 6でPNG、3でGIF！

6

HTML 4では、<OBJECT DATA="image.png"> <OBJECT DATA="image.gif"></OBJECT> </OBJECT>のような書き方がすすめられているが、ナビゲーター3は<OBJECT>に対応していないので<IMG>タグを使った。
<OBJECT DATA="puzzle.png" TYPE="image/png" WIDTH="320" HEIGHT="240"><IMG SRC="puzzle.gif" WIDTH="320" HEIGHT="240"></OBJECT>
正解者：Masahiko Murataさん、ENDEさん、山口雅仁さん

A N S W E R2 Lynxにマップを見せろ！

<OBJECT>〜</OBJECT>の間にイメージマップを作る。HTML 4では、<A>タグにもSHAPE属性とCOORDS属性を付けて領域を指定できる。Mozillaでは、<MAP>〜</MAP>の間に<DIV>などを入れないと機能しないようだ。
<OBJECT DATA="puzzle.png" TYPE="image/png" WIDTH="320" HEIGHT="240"
USEMAP="#map1" STYLE="border-style: none;" ><MAP NAME="map1"><DIV><A HREF="……" SHAPE="circle" COORDS="100,110,80">インプレス</A> |<A HREF="……" SHAPE="rect" COORDS="100,120,260,240">インターネットマガジン</A> |<A HREF="……" SHAPE="poly" COORDS="240,0,160,160,320,160,240,0">TIPS &amp; TRICKS</A></DIV></MAP></OBJECT>

326 INTERNET magazine 2001/4

正解者：Masahiko Murataさん、堀江さん、ENDEさん、山口雅仁さん

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

イメージマップ：ウェブページの1枚の画像の中に特定の領域がいくつもあり、その領域をマウスでクリックすることで、別のページへ移動できるようにした仕組み。<IMG>タグ（画像）と<MAP>、<AREA>タグ（領域指定）を組み合わせて作成する。
©1994-2007 Impress R&D

T IPS & T R ICKS

1
点線、破線の枠を作る
5.5
IE 5.5が新 しくサポートした
CSS技術はこれまでにもいくつか紹介してきた。また、影の付いた枠や、額ぶちのような飾り付きの枠など、いままでに登場した枠線についてのTIPSは多数あるので、これらをひととおりマスターしていれば、ページデザインの幅も大きく広がることだろう。さて、今回は新たに、文字の周りに枠線を付ける border系の機能を紹介する。今度の枠は左のような点線や破線による枠線なのだが、意外にも今までなかなか簡単には実現できなかったもの。これがCSSだ
けで手軽に作れるので、ポップなセンスでページを作りたいときにはおすすめだ。
（藤井幸孝）d<DIV STYLE="border-style:dotted;border-color:brown;
font-family:'Comic Sans MS';font-size:24pt;font-weight:bold;border-width:4px;width:480px;padding:1em 1em 1em 1em;
position:absolute;left:120px;top:80px">
border-style:dotted</DIV><DIV STYLE="border-style:dashed;border-color:brown;
font-family:'Comic Sans MS';font-size:24pt;font-weight:bold;border-width:4px;width:480px;padding:1em 1em 1em 1em;
position:absolute;left:240px;top:240px">
border-style:dashed</DIV>

CSSを使うだけあって、HTMLそのものはとという別 のスタイル機 能 を付 け加 えている。

出ていることに気付くだろうか。見ようによっててもシンプルだ。ここでは<DIV>タグにスタイル「padding」はHTMLの<TABLE>タグなどでもは、レンガ造りのようにも見えるかもしれない。

を使い、そこで枠線の形式を指定している。小知られている、文字と枠の間隔を空ける機能だ。

こちらも簡単なトリックで、<DIV>タグを2回ずさな点線の枠を作るには、「1em」が間隔のサイズとなり、指定されているつ使って枠線を2つ重ねているだけだ。<DIV>タ

4つの値は順番に上、右、下、左の間隔を表しグで囲まれた部分の配置を、ている。必要ならば上下のみだとか左右だけ、

border-style:dotted

あるいは上だけや左だけといったように間隔を空と書き、点（dot）ではなくてもう少し長い線けることもできるので、フォントの種類や文字の（dash）の枠を作るには、量に応じて使おう。

position:absolute ; left :120px ; top:80pxと絶対指定しているので、重ねる対象の上端と左端の位置を数ピクセル（px）ずつ変えるだけおまけとして、もう1つサンプルを挙げてみよう。

border-style:dashedで立体的な効果が出せる。フォントの大きさにもよるが、二重にするサンプルでは「dotted」と書けばよい。これで<DIV>内のテキストが、それの場合は 4pxずつ、「dashed」の場合は 6pxずぞれのタイプの枠で囲まれる。サンプルでは文字つずらしている。なお、文字を重ねると見づらくと枠が接近して見づらくなるのを避けるために、なるケースもあるので、2つ目の<DIV>タグの間に「&nbsp;」（空白文字）を入れ、文字のない

padding:1em 1em 1em 1emよく似てはいるが、枠が二重になって立体感が枠だけを作ってみた。

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

em（エム）：CSSで定義されている、基準となるフォントの縦のサイズを1としたときの比率で示した長さの単位。たとえばフォントサイズが12ポイントの親要素があったときに「2em」と設定した要素のサイズは、2倍の24ポイントになる。
©1994-2007 Impress R&DINTERNET magazine 2001/4327

T IPS & T R ICKS

2CSS2を使って画像を書き換える
60.7

HTML 内の画像にマウスで触れると違う画像に書き換わるというのはすでに定番化した仕掛けで、どこかで見たことがある人も多いに違いない。この仕掛けはさほど複雑ではないのだが、これまではFlashやJavaスクリプトを使う必要があった。CSS2にはインタラクティブ性を実現するための擬似クラスが用意されている。 C S S 2 をサポートする
Mozillaやネットスケープ6では、<A>タグ以外でもhoverやfocusといった擬似クラスを使えるようになっているので、CSS の記述だけで画像を書き換える仕掛けが作れるのだ。ここではその方法を紹介しよう。 （高橋登史朗）

d1<STYLE>

2 <SCRIPT>

img#img2:hover {border:dotted;
background-color:#cccccc}</STYLE><IMG ID="img2" SRC="tips.gif">function hoveron12(oj) {oj.style.backgroundColor='#dddddd';
oj.style.border = 'dotted';}function hoveroff12(oj) {oj.style.backgroundColor='#ffffff';
oj.style.border = 'inherit';}</SCRIPT><IMG ID="img12" SRC="tips.gif"
onmouseover="hoveron12(this)"onmouseout="hoveroff12(this)">

ソース1と2を比べてみよう。まずソース2に戻るようになる。border、styleにoutsetやと書けばよい。また、触ると画像の下の背景画のほうだが、これは「触ると画像に点線囲みが付insetを指定すればボタンのような表示もできる。

像を書き換えるようにしたいならば、いて、さらに画像の下に背景色が付き、離れる

CSSの指定だから好きな形や色を持ってくればよと戻る」という動作を現在の一般的な方法で書い。別の画像ファイルで書き換えるのではないかいてみたものだ。一方、これと同じ動作をCSS2

ら処理も速く、操作に対するレスポンスも良好だ。

でやってみたのがソース1だ。ソース2と比べて、

ただし、ここで注意したいことが1 つだけある。と書くわけだ。これは先に挙げた2つのケースと驚くほどシンプルな記述で済んでしまう。

それは、「画像の背景を透明化しておく」ことだ。

違って、書き換えのために画像を読み込むので、これを忘れると、せっかく変わった背景色も透過

ウェブ上で見るときには少し読み込みに時間がか

この仕掛けは簡単だ。画像のID 名「img2」にせずに、見られなくなってしまう。

かってしまうかもしれない。これはJavaScriptのhoverを指定して、ボーダーと背景色をさて、この仕掛けを少し応用してみよう。たとえように先読みをしていないことが原因なのだが、ば、ソース1よりさらに単純に「画像をカーソルそれを補って余りある手軽さは実に魅力的だ。

border:dotted ;で触れると、画像の下の背景色が黒く塗りつぶ

残念ながら、このCSS2はまだネットスケープ6やbackground-color:#cccccc ;される」というだけなら、hoverの指定の中へ書Moziilaにしか実装されていない。本誌CD-ROM

き換えたい背景色をのサンプルには、IEでも使えるJavaScriptバージというふうに書いているだけなのだ。わずかこれだ
けで、カーソルを画像に重ねると背景色がグレー

background-image:url(bg.gif)

ョンも収録したので、参考にしてほしい。
background-color:#000000に変わると同時に点線で囲まれて、離れると元328 INTERNET magazine 2001/4

インターネットマガジン／株式会社インプレスR&DCSS 2（シー・エス・エス・2／Cascating Style Sheets level 2）：W3Cが1998年に勧告したスタイルシートの仕様。高度なパターン定義や内容の自動生成、音声用スタイルの規定などが盛り込まれている。
©1994-2007 Impress R&D

T IPS & T R ICKS

3
数式を表示する
0.7
まずは左のサンプルを見てもらいたい。さまざまな数式が表示されていることがわかるだろう。今まではこのような簡単な数式を扱う場合でも、画像を貼り付けて表示させるくらいしか方法がなかったのだが、Mozilla 0.7の登場によってタグで数式を扱えるようになった。ただしこのMozillaは通常のバージョンではなく、「Mozilla0.7 MathML +SVG版」という特殊なバージョンだ。左のような数式 を 表 示 で き る 「 Mozilla 0.7
M a t h M L + S V G 版 」 は、 現 在Mozilla.orgのサイトで配布されているので、興味のある人はインストールしてサンプルを表示させてみよう。
（大内 勇）

d<?xml version="1.0" encoding="shift_jis"?>html PUBLIC "-//W3C//DTD XHTML 1.0
1 <!DOCTYPE
Transitional//EN" "mathml.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

2 <math xmlns="http://www.w3.org/1998/Math/MathML ><mrow><mfrac><mrow><msup><mi>a</mi><mi>m</mi></msup></mrow><mrow><msup><mi>a</mi><mi>n</mi></msup></mrow></mfrac><mo>"</mo><msup><mi>a</mi><mrow><mi>m</mi><mo></mo><mi>n</mi></mrow></msup></mrow></math>ソースを見るとこれまで見たことのないタグのURLを指定しなければならない。ここまでがブばかりが並 んでいるので戸 惑 うかもしれない。

ラウザーにMathMLの数式を表示させる準備だ。

<mtext>：数式ブロック内で文章を扱うときに用いるMathMLを使っているのだ。ちなみに上に掲げた

ソース2がMathMLの本体部分とも言えるもの

紙面の都合上、使用頻度の高いタグのみを紹介

ソース2はサンプル画面のなかでは、指数の一番で、ここで実際の数式を記述する。

したが、長いソースでも実際には以上に記した

W 3 C で作 成 された数 式 用 マークアップ言 語

1 0 種 類 のタグしか使 っていない。本 誌 の付 属

最後の数式を抜粋したものだ。
ソース1 は文書の先頭に記述する部分で、1 行目ではこの文書がXMLであることを宣言している。 ここで、 文 書 内 に日 本 語 がある場 合 は「encoding」で文字コードセットを指定する必要がある。また、この文書はXMLなので、保存するときには拡張子を「.html」ではなく「.xml」にしておかないと正常に表示されない。2行目のDOCTYPE宣言は、このまま記述してもらいたい。
次の「html」で始まる行はXHTML 文書を扱う場合に必須となる宣言で、xmlnsでソースどおり<math>：数式ブロックのルートタグ。 xmlns
はソースと同じURLを指定<mi>：変数用タグ<mn> ：数値などの定数用タグ<mo> ：+,-,= などの記号用タグ<msup> ：乗数などの上付き文字用タグ<msub>：添え字などの下付き文字用タグ<msubsup>：上付き文字と下付き文字を同時に使うときに用いるタグ<mfrac>：分数用タグ<mrow>：内側に含む要素を、水平方向に1つのブロックとして扱うときに用いる

CD-ROMに本ページの全ソースを収録したので、そちらも参考にしてほしい。
ここで説明したタグの中には平方根や立方根を表 すものがない。 これらは本 来 < m s q r t > や<mroot>といったタグで指定するのだが、現時点のMozilla0.7 MathML+SVG版ではサポートされていない。一刻も早い対応が望まれる。

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

ftp.mozilla.org/pub/mozilla/releases/
mozilla0.7/mozilla-win32-0.7-MathML-SVG.zip

XHTML（エックス・エイチ・ティー・エム・エル／eXtensible HyperText Markup Language）：次世代のHTMLとして2000年1月に勧告されたマークアップ言語。HTML
4.0をXMLに適合するように修正したもの。モバイル機器用に必要なタグだけを使ったり、ほかのマークアップ言語を埋め込んで拡張したりできる。
©1994-2007 Impress R&D

INTERNET magazine 2001/4329

T IPS & T R ICKS

4自動的に目次を作る
55.5

先月紹介したIEのダイアログ作
成機能の応用例として、左のサンプルを紹介しよう。長い文章を1つにまとめたページでは、ユーザーは目的の部分を探すのに手間がかかる。一方ページの作者にとっては、ページ内リンクのようなナビゲーションの仕組みをいちいち作るのは面倒だ。そこで、ページを開くとそのページの内容を解析し、小さなダイアログの中に目次のリンクを自動的に作成するスクリプトを用意した。ページに文章を次々に追加していっても、見出しに適当な印を付ければ、スクリプト自 体 は書 き換 えなくてもよい。自分の日記ページで使ってみてはいかがだろう。 （編集部）

d1<BODY onload="
showModelessDialog('MOKUJI.HTM',
window, 'status:no;dialogLeft:0px;dialogTop:0px;
dialogWidth:200px;dialogHeight:240px')">2<BODY onLoad="make_mokuji ( );"><SCRIPT LANGUAGE="JavaScript">function make_mokuji ( ) {h2array = dialogArguments.document.body.all.tags ("H2");
for (i = 0; i < h2array.length; i++) {li = document.createElement ("LI");li.innerHTML = "<A HREF=' ' " +"onclick='return click_mokuji ("+h2array[i].id + ")'>" +h2array[i].innerText + "</A>";
mokuji.appendChild (li);}}function click_mokuji ( id ) {h2 = dialogArguments.document.getElementById (id);h2.scrollIntoView ( ); return false;}</SCRIPT>

まず、目次の自動作成を行わせたいHTMLにほかのページに移 ると自 動 的 に消 えるので、ィンドウ本体のwindowオブジェクトを扱っていは、適当なID属性を付けた<H2>タグで次のようopenメソッドで開いたウィンドウよりも親切だ。

るのだ。forループでウィンドウ本体の<H2>タグな小見出しをいくつも入れておく。

showModelessDialogメソッドの2番目の引数を1つずつ調べ、次のように関数「click̲mokuji」「window」に注目。この引数がダイアログに渡を呼び出すリンクを生成する。

され、ダイアログ側でそのデータを利用できるよ<H2 ID="010210">2月10日</H2>

うになるのだ。ここではwindowオブジェクトを<A HREF='' onclick='return click_mokuji

これだけでスクリプトが見出しを拾い出し、「2月まるごと指定しているが、渡すデータは数値でも(見出しのID属性)'>見出しの文字列</A>

10日」のリンクを作って、クリックするとそこへ文字列でもかまわない。
関数click̲mokujiでは、またdialogArgumentsジャンプするようになる。
ソースの2がダイアログの中身になるHTML（サ（つまりwindowオブジェクト）を使ってID属性かソースの1はページを読み込んだときにダイアロ

ンプルでは m o k u j i . h t m ） のスクリプトだ。

ら目的の<H2>タグを見つけ、「scrollIntoView」

グを表示させるスクリプトだ。先月号で紹介した<BODY>タグのonLoadイベントで目次を作成

メソッドでその<H2>タグの場所へスクロールさs h o w M o d a l D i a l o g メソッドではなくs h o wする関数「make̲mokuji」を呼び出す。関数せる。これでスクリプトは完成だ。

ModelessDialogメソッドでダイアログを表示さmake̲mokujiの1行目では、「h2array」にウィせている。showModelessDialogで表示させたンドウ本 体 の< H 2 > タグをリストアップする。

文章中心のページを多く作っている人は、このスダイアログは、常にブラウザーの前面に表示され「dialogArguments」はダイアログを呼び出したクリプトを組み込んで、ナビゲーション機能をパ続けるが、ブラウザー本体の操作には影響しない。

ときの第2引数とイコールだ。つまりここではウワーアップさせてみよう。

330 INTERNET magazine 2001/4

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

ダイアログ：各種の設定を行なうために表示される「ダイアログボックスウィンドウ」の通称。語源の「dialogue」には「対話、対談」という意味があり、ウィンドウ画面で対話的に設定ができることからこの名前が付いた。 ©1994-2007 Impress R&D

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

今月のテーマ枠 線 を制する

大好評発売中！

今月最初のTIPSで紹介したとおり、スタイルシー
トの枠線機能を使えば、単純に文字を囲むだけではなく、ページのデザインに魅力的な効果を加えることもできる。枠線
は中身のテキストを強調するものという発想から離れて、眺めるだけで「HTMLパズルに挑戦しよう」
宛 先も楽しくなるような模様を枠線で描いてみよう。スタイルシートの仕様

Dをじっくり調べれば、だれも見たことのない使い方を思いつくはずだ。

正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！

今月は、さまざまなアイデアで枠線を描くパズルに挑戦していただく。
正解者には抽選で1名にオリジナルバインダーをプレゼント。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ 枠線を制する にチャレンジ！

m im-html@impress.co.jp
なお、締め切りは3月10日とさせていただく。

Q U E S T I O N

1 水玉模様を描け!

5.5

まずは基本問題。今月の1番目のTIPSを応用して、左のような水玉模様を作ってみよう。これも枠線の一種なのだが、上下左右で別の色を使うのがポイントだ。CSS 1の仕様では、枠線は上下左右のスタイルをそれぞれ指定できるはずだが、ブラウザーの対応が進まなかったせいで、このサンプルのような使われ方はあまり見かけない。最新のブラウザーで枠線を100%使いこなせるようになれば、ホームページのタイトルロゴを飾るのにいちいち画像を作る必要もなくなる。ちょっとした工夫でさまざまな効果を生み出せるのだ。なお、ネットスケープ6とMozillaでもこのサンプルは表示できるが、丸い点ではなく四角い点になる。
ヒント

Q U E S T I O N

border-何々-color……

2 幾何学模様を描け!

55.5

2問目では、テーブルの枠線を使って遊んでみよう。左のサンプルは、2行×2列のテーブルにいろいろなスタイルシートやテーブル関連の属性を加えていった結果でき上がったものだ。小さなセルをたくさん作って背景を1つ1つ塗り分ければできるかもしれないが、スタイルシートを活用すればそんな苦労をする必要はない。あくまで2行×2列のテーブルでこれと同じページを作るのが条件だ。よく使われるプロパティーや属性を組み合わせていくだけだが、この連載でも取り上げたことのないものを1つだけ使っているので要注意。なお、残念ながらマッキントッシュ版のIE 5では、このサンプルはうまく表示できなかった。
ヒントborder-collapseとその他の組み合わせ……

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

プロパティー：プログラミング言語において、ある機能が持っている設定可能なオプションや属性のこと。スタイルシートでは「color」のようにスタイルの種類をプロパティーと呼び、Javaスクリプトでは「document.bgColor」の「bgColor」のようにオブジェクトが持っている変数をプロパティーと呼ぶ。
©1994-2007 Impress R&D

INTERNET magazine 2001/4331

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