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

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

ついにネットスケープ6が正式版になった。多くの人が新しいバージョンに乗4

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

5

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

Mozillaは、終わることなく進化を続けている。それでは今月の最初のTIPS

5.5

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

でネットスケープ6の新機能をさっそく味わってみよう。

4

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

6

ネットスケープ6以上り換えるようになれば、サイト制作者はバージョン4のスタイルシートのバグにもう悩 まずに済 みそうだ。一 方 でネットスケープ 6 の元 になっている

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

M18

Mozilla（数字はMilestoneの番号）

12月号「HTMLパズルに挑戦しよう」の解答
今月の挑戦者はやや少なめだった。英語のサイトを参照するのはきつかっただろうか。SVGの仕様はとにかく膨大なので、テキストエディターだけで記述するのは面倒だが、W3Cやアドビのサイトをざっと眺めるだ
けでも興味深い機能がいくつも見つかるはずだ。

A N S W E R

1 星を描け！

6

第1問では<polygon>タグを使い、points属性に頂点の座標をスペースで区切って順番に並べていくと星が描ける。SVGで線を引くには、<polygon>のほかに、今月の2番目のTIPSで紹介する<path>タグを使うこともできる。
<svg><polygon style="fill:none; stroke:#4444CC; stroke-width:10"
points="150,50 50,300 230,100 30,130 200,280" /></svg>
正解者：坂部和久さん、ENDEさん、Masahiko Murataさん、冨園慎一郎さん、山口雅仁さん、よしともさん、sionさん

A N S W E R

2 星を回転させろ！

<polygon>〜</polygon>の中に<animateTransform>タグを置く。星の真ん中が回転の中心になるように、<g transform="translate(……)">で原点をずらす。
<svg><g transform="translate(150 150)"><polygon style="fill:none; stroke:#4444CC; stroke-width:10"
points="0,-100 -50,150 80,-50 -120,-20 50,130"><animateTransform attributeName="transform"
type="rotate" values="0;360" dur="2s" repeatDur="indefinite"/></polygon></g></svg>

342 INTERNET magazine 2001/1

正解者：坂部和久さん、ENDEさん、Masahiko Murataさん、冨園慎一郎さん、山口雅仁さん、sionさん、うおまさ＠homeさん

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

属性：HTMLやXMLの開始タグの中で、要素が持つ性質などを指定する部分。たとえば、<A HREF="index.html">では、A要素にHREFという属性を指定して、その値を「index.html」とすることで、「リンク先はindex.htmlである」ことを表している。
©1994-2007 Impress R&D

T IPS & T R ICKS

1
角の丸い囲みを作る
6

M 18

テーブルを使って囲みを作っているページはよく見かける。なかには、4つの角に画像を使って囲みを丸く見せているページもある。
しかし、そんなテクニックを使うと意味のない画像を乱用した重たいページになってしまいがちだ。
意味のない画像にはアクセシビリティー上の問題も多い。左のサンプルを見てほしい。角を丸く見せた囲みがたくさんある。それなのに、このページでは画像を一切使っていない。Mozillaとネットス
ケープ6で用意された新しい技なのだ。ページデザインに新しい可能性をもたらすこのテクニックをさっそく紹介しよう。 （編集部）

d<STYLE TYPE="text/css">.kakomi {border-style: solid; border-width: 4px;
border-color: #FFFF99; background-color: #FFFF99;-moz-border-radius: 10; }</STYLE>

この技は、先月号の「文字や画像を半透明にする」と同じく、Mozillaやネットスケープ6のこの3つは、「border」プロパティーで1つにまとINPUT [type="submit"] {められることは、ご存知のとおり。

-moz-border-radius: 5; }スタイルシート拡張機能を使ったものだ。先月は「-moz-opacity」というプロパティーで透明

border: solid 4px #FFFF99;

この [ 〜 ] という指定は、CSS 2で導入された「属 性 セレクター」という新 機 能 で、「t y p e =度を指定したが、今回は「-moz-border-radius」を使う。このプロパティーの値に数値を指定する

枠 線 だけを引 いてもいいが、「b a c k g r o u n d -"submit"」という属性を持つ<INPUT>タグに限と、角の丸みの半径になる。数値を大きくすれcolor」を使って枠線と背景色を同じにしておけってスタイルを変更できる。こんなところからも、ばするほど、丸みの部分が大きくなる。

ば、違った雰囲気のある囲みが作れる。

Mozilla やネットスケープ6 がIE よりもはるかにCSS 2対応が進んでいることがわかるだろう。とはいっても、まずは囲みの線が引かれるようにしておかないと角の丸みを指定しても意味がない「-moz」で始まるプロパティーは、Mozillaやネので、これまで何度も使ったことのあるプロパテットスケープ6全体のインターフェイスをスタイ

なお、ここでMozillaやネットスケープの新バー

ィーで枠線を指定しておく。
「border-style」でルシートで設計できるように作られたものだ。サジョンに関する注意。1999年9月号から11月号

線の種類を、「border-width」で線の太さを、ンプルのように<H1>や<TD>などのタグに指定のXULのサンプルにあった「openDialog」メソ「border-color」で線の色を指定するのだ。

できるだけでなく、フォームの部品に指定して、ッドは、セキュリティー強化のために使えなくなボタンやテキストボックスの角も丸くできる。たった。XULファイルを開くときのスクリプトは、

border-style: solid; border-width: 4px;

とえば、<STYLE>タグに次のようなスタイルを「 window.open("01.xul", 'x1', 'width= 200,

border-color: #FFFF99;

追加すると、送信ボタンの角がすべて丸くなる。

height=200')」のように書き換えてほしい。

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

アクセシビリティー：障害の有無や、使用している機器の種類にかかわらず、コンテンツがあらゆる人にとって利用しやすいものになるように配慮すること。W3Cによってウェブのアクセシビリティーのガイドラインが策定されている。
©1994-2007 Impress R&D

INTERNET magazine 2001/1343

T IPS & T R ICKS

2SVGで魚をくねくね泳がせる
4

55.5

4

前回はSVG で文字をぐるぐる回したが、今回は移動させてみよう。顔文字の要領でテキストで描いた魚を好きな曲線に沿って自由に泳がせてみる。こうした動きはSVGではいろいろな方法で書けるのだが、今回もなるべくシンプルな方法で書いてみることにした。
ソースを見れば分かるが、<xml>と<svg>タグを含めてもわずかに6個のタグしか使っていない。ス
クリプトを使わずに、これだけでページ全体をくねくねと動き回るお魚さんが描けてしまうのだから驚異的だ。もちろん、サンプルと同じ絵文字である必要はないか
ら、自分の好きな文字に変えて動かしてみよう。 （高橋登史朗）

d<?xml version="1.0" ?><svg><path id="p" style="fill:none"d="M 10 200
C 500 200 500 200 300 100
C 10 10 100 200 200 100
C 300 10 400 300 500 200 "/><text id="test" style="font-family:Arial; font-size:40px; fill:#000000"><textPath xlink:href="#p">>' ))))))))))))x&lt;<animate attributeName="startOffset" attributeType="XML"begin="0s" dur="3s" fill="freeze" from="100%" to="0%" /></textPath></text></svg>

このアニメーションの仕組みは、<text>タグのくことで、パスが書き出す図形の基点のx座標を中に文字で書かかれた「>' ))))))))))))x<」の絵を、1 0 、y 座 標 を2 0 0 にするという意 味 になる。C< p a t h > タグで 指 定 した曲 線 に沿 って、< a n i（curveto）
は「C 300 10 400 300 500 200」のよ

d="M100 200 C300 100 400 300 500 200"で描いたベジェ曲線

うに使って、ベジェ曲線（x1 y1 x2 y2 x y）を定義mate>タグで動かすというものだ。

300 100する。Mで指定した点や前のCの終点が基点にな
最初の<path>タグの中の "fill: none"は、塗りつり、x yを終点、x1 y1とx2 y2を制御点としたカーぶしのスタイルだ。
「none」は塗らないという意味

ブが描かれる。ベジェ曲線はグラフィックソフトのになるので、指定したカーブは見えなくなっている。

曲線を描くツールを想像すると分かりやすい。基

試しに「red」などの色を指定してみよう。曲線の点の間に置かれたいくつかの点（制御点）を元に内側が塗りつぶされて現れるはずだ。

して滑らかな曲線を求める方法だ。

「d」属性はパスのカーブを指定している。

500 200
100 200<textPath>タグでは、属性に「xlink:href="#p"」
400 300と書くことで、「p」というID の<path>タグで定義
d="M 10 200 ……"するカーブに<text>タグをリンクさせている。
<animate>タグでは魚の絵文字を動かすわけだ<path>タグのd属性のコマンドには、ほかにもL

d属性は「パスデータ」と言って、<path>タグが描が、「from="100%" to="0%"」は<path>タグで（直線）、H（水平線）、V（垂直線）、A（円弧）など

く図形 のデータを定義する。英文字のMやCはコ

指定した最後 の点からMで指定した最初の基点いろいろあるので、仕様を確認しながら動きをいマンドで、M（moveto）
を使って「M 10 200」と書まで動かすという意味だ。

ろいろに変えてみると楽しいぞ。

344 INTERNET magazine 2001/1

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

ベジェ曲線：コンピュータで滑らかな曲線を描画する方法の1つ。2つの端点を結ぶ線を、制御点を使って湾曲させる。アドビイラストレーターなどのグラフィックソフトで採用されている。
©1994-2007 Impress R&D

T IPS & T R ICKS

3
ページ上にごみ箱を作る
6

M 18

ウィンドウズやマッキントッシ
ュのユーザーなら、ファイルの移動などの作業で「ドラッグアンドドロップ」操作はお馴染みだ。ここで紹介するTIPSは、この操作をブラウザー上で実現するスクリプトだ。左のサンプルは、デスクトップでよく使われる「ファイルをごみ箱に捨てる」作業をブラウザーの画面上でまねしたもので、枠付きの文字をごみ箱の上にドラッグアンドドロップすると、その文字が画面上から消えるようにしてある。スクリプトは多少長めになっているので、尻込みしてしまうかもしれないが、ポイント欄の説明をよく読んでチャレンジしてほしい。
（大内勇）

d<SCRIPT TYPE="text/javascript">
var g_obj;
function beginDrag (e, id) {Àx = e.clientX, y = e.clientY;
g_obj = document.getElementById (id);window.onmousemove = doDrag;window.onmouseup = endDrag;}
B̀
function doDrag (e) {var dX = e.clientX - x, dY = e.clientY - y;var newX = parseInt (g_obj.style.left) + dX+"px";var newY = parseInt (g_obj.style.top) + dY+"px";g_obj.style.left = newX;
g_obj.style.top = newY;x = e.clientX, y = e.clientY;}

function endDrag (e) {C̀window.onmousemove = null;if (((e.clientX > 50) && (e.clientX < 200)) &&((e.clientY > 240) && (e.clientY < 340)))g_obj.style.display = "none";}</SCRIPT>：<DIV STYLE="position: absolute;D̀
top: 300px; left: 100px"><IMG SRC="trushbox.gif"></DIV><DIV ID="obj1"
onmousedown="beginDrag (event, 'obj1');"STYLE="position: absolute; left: 70px; top:80px; width: 120px">
iNET-MAG の<BR>バックナンバー</DIV>

D から説明し順番が逆になるが、先にソース`（ドロップ）は関数「endDrag」を呼び出すようトがマウスに追従するようになるのだ。

よう。最初の<DIV>タグはごみ箱の指定で、次にしている。なお「対象オブジェクト」とは、ID

C の関数「endDrag」ではドロップしたときの`の<DIV>タグは枠付き文字の指定だ。それぞれ、名を「obj1」や「obj2」と付けた<DIV>タグで動作を行う。
「window.onmousemove=null」

スタイルシートによって位置を指定している。ま囲った要素全体のことだ。とは、マウスが動いていても何もさせない処理。

た枠付き文字のほうはマウスを押したときのイベB の関数「doDrag」はドラッグ中の動作を行う。
`

次のif文ではマウスの位置によって条件を分岐さント「onmousedown」を設定して、関数「be変数「dX」と「dY」はマウスの移動量を表し、せている。その条件とは、ごみ箱の領域の座標ginDrag」へマウスの位置情報（event）とID名

移動量に移動前の対象オブジェクトの左上座標で、「マウスポインターの横方向の座標が50からの2つの引数を渡すようにしている。の値を加算したものが変数「newX」と「newY」

200ピクセルで、縦方向の座標が240から340ピになる。ここで「parseInt」に注目してほしい。

クセルの場合」だ。この条件が成立しているとき

A 〜`
A の関 数C のスクリプトの説 明 だ。 `次 に`「g̲obj.style.left」と「g̲obj.style.top」の値にif文の中が実行され、対象オブジェクトはディ

D のマウスを押したときの「beginDrag」では、`は数字で得られるが、これは "100px" のようなスプレイ上から消えてしまう。消えてしまうと言イベントで渡された2 つの値を使い、変数「x」文字列であって数値ではない。ここでは加算や減っても、スタイルシートで対象オブジェクトを表（マウスポインタの横座標）と「y」（同縦座標）算をするので文字列だと都合が悪い。そのため示させないようにしているだけだ。

そして「g̲obj」（対象オブジェクト）を設定し「parseInt」を使って文字列を整数として扱ってている。変数を設定したあとに、マウスを動かしいるのだ。この変数「newX」と「newY」の値以上で今回のスクリプトは完成だ。CGIと組み合ているとき（ドラッグ中）は関数「doDrag」をを対象オブジェクトの左上座標の値にするので、わせれば、実際にサーバーにあるファイルを消去

呼び出し、マウスのボタンから指が離れたときマウスボタンを押している間は、対象オブジェクもできるので、興味のある人は試してみよう。

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

イベント：ウェブページ上でマウスを動かしたときやクリックしたときのように、「何々した場合」を表す。JavaScriptはイベントに合わせて動き出すように記述できる。

©1994-2007 Impress R&D

INTERNET magazine 2001/1

345

T IPS & T R ICKS

4
フレームを自在に動かす45

5.5

タイトル、目次、ニュース、リンク、それに広告。ウェブを作り始めてしばらく経つと、トップページに次々と増える情報をどうやって整理して表示するか、それが問題になる。これまでにもプルダウンメニ
ューやポップアップメッセージなど、狭 い画面を広く使うTIPSをいくつも紹介してきたが、新たに「自在に動かせるフレーム」を作ってみよう。ブラウザーの中に別のウィンドウがあるかのように位置を自由に変えられるフレームだ。たとえばフレームに最新ニュースを表示して、画面全体にある普段のコンテンツを読みたいときには、フレームをドラッグする、といった使い方ができる。
（藤井幸孝）

d1<BODY bgcolor=indigo onLoad="pageLoad()"><DIV ID="movingframe" STYLE="position:absolute;height :128px; width: 348px; top: 256px; left: 256px;
border: 4px solid #CCCCCC;
cursor: move; z-index:2;"
onmousedown="checkMousedown ( )">……

2<SCRIPT Language="JavaScript1.2">
var m = 0, mx = 0, my = 0;function pageLoad ( ) {document.onmousemove = moveFrame;
document.onmouseup = checkMouseup;}function moveFrame ( ) {if (m) {movingframe.style.pixelTop = event.y - my;movingframe.style.pixelLeft = event.x - mx;
return false;}}function checkMousedown ( ) {if (event.srcElement == movingframe) {m=1;
my = event.y-movingframe.style.pixelTop;
mx = event.x-movingframe.style.pixelLeft;} else { return true; }}function checkMouseup ( ) {m=0;}</SCRIPT>

フレームといっても<FRAME>タグは使っていス2 の関数「pageLoad」では、このページ中でmovingframe.style.pixelTop」は、フレームの上ない。1 のように<DIV>タグにスタイル「border:

マウスが動かされたときにはいつも関数「move端とカーソル位置の垂直方向の距離だ。水平方

4px solid #777777」を当てはめ、フレームのようframe」が起動し、マウスボタンが離されたときに向も計算しておく。に見せかけている。またこの<DIV> には、「ID=は「checkMouseup」関数が動作するように仕掛

このあとでカーソルが動かされると、最初の仕掛"movingframe"」と名前が付けてあり、スクリプけがしてある。checkMouseup関数では、変数けによって関数moveFrameが起動し、mが1のトで操作できるようになっている。注意するのは「m」を0にセットしているが、このmはマウスボタとき、つまりボタンが押されっぱなしの間、フレー位置指定のスタイルだ。
「position: absolute」とンの状態を記憶するためのもので、0ならボタンがムの位置を、現在マウスがある位置に移動させる。

絶対指定にしておこう。
「z-index: 2」は、重なり合クリックされていない状態を、1ならクリックされて関数checkMousedownで計算しておいた「my」

った複数の<DIV>の中で、この<DIV>が2番目にボタンが押されている状態を表している。

や「mx」を使っているのは、フレームの中でのカーあることを表している。ついでだが、通常のウィン

1 の<DIV>タグの中に「onmousedown = "chek

ソルの位置を一定に保って、ドラッグの動きを自ドウに似せて、ドラッグ中はマウスカーソルが十字Mousedown ( )"」と書いておき、右マウスボタン然に見せるのに役立っている。

マークになるように、「cursor: move」としておくとを押 すと、関数「checkMousedown」が起動することに注目しよう。checkMousedownでは、マ適当なところでマウスボタンを離すと、関数check

ウスボタンが押された場所がmovingframeオブジ

Mouseupによってmが0にセットされるので、関数スクリプト部分は、マウスボタンの上下とドラッグェクト（<DIV>タグ）かどうかを確認し、そうであれ

moveFameはフレームを動かさなくなり、ドラッグ動作という「イベント」を感知して動くように作っばmを1にセットして、カーソルがフレームの中のどアンドドロップが完了するわけだ。どうだろう。普てある。ページを読み込んだときに呼ばれるソーのあたりにあるかを 算 出している。
「 event.y -段のウィンドウ操作とまったく同じに扱えるはずだ。

面白いだろう。

346 INTERNET magazine 2001/1

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

関数：プログラミング言語で、一定の処理を独立させて記述した部分。言語によっては「プロシージャー」や「メソッド」などとも呼ばれる。引数を計算して値を返したり、何度も行われる処理を1つにまとめたりするのに使われる。
©1994-2007 Impress R&D

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

今月のテーマインラインフレームを制する

大好評発売中！

ページの中に別のページを埋め込むインラインフレームは、IEの独自機能だったが、HTML 4.0に採用され、Mozillaとネットスケープ6でもサポートされた。今まであまり使う機会のなかったインラインフレームだが、2大ブラウザーの標準機「HTMLパズルに挑戦しよう」
宛 先能となったことで、いろいろ工夫してみると便利な使い方が見つかるだ

Dろう。特にページ中の部品の再利用に役立ちそうだ。そこで今月はイン

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

ラインフレームを活用したパズルに挑戦していただく。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ インラインフレームを制する にチャレンジ！

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

Q U E S T I O N

1 メニューを埋め込め！

45

5.5

6M18

まずは基本的な使い方から。インラインフレームで何と言っても便利なのは、一度書いたHTMLを複数のページで何度も使い回せることだ。
たとえば、共通するメニュー部分を1つのHTMLファイルに書いて、インラインフレームで埋め込めば、メニューを変更するときにはファイル1個を変更するだけで済む。しかも普通のフレームと違ってページごとのタイトルやURLがはっきりするので、訪問者にとって使いやすいページになる。そこで左のサンプルのようなリンクメニューを作ってみよう。単純にインラインフレームを指定するだけでなく、サンプルのようにサイズを固定させて、平べったい枠線を付けるのが問題だ。
ヒント

Q U E S T I O N

お馴染みのスタイルシートを使う……

2 背景を連続させよ！

5.5

第2問は、第1問で作ったインラインフレームのメニューにIE 5.5の独自機能を追加して、面白い効果を出してみようというものだ。左のサンプルを見てほしい。枠に囲まれた部分はインラインフレームなのだが、なぜかウィンドウ全体の背景画像が透けて見えている。親となるHTMLとフレーム内のHTMLの両方に同じ画像を指定しているわけではない。親となるHTMLの背景画像がフレームの中にも連続しているのだ。さていったいどうやればいいのだろう？ 2つのHTMLにちょっとした仕掛けをすればいいだけだ。あれこれ悩まずに、マイクロソフトのWeb Workshopに直接あたってみよう。
ヒント

msdn.microsoft.com/workshop/author/dhtml/
overview/inlinefloatingframes.asp ……

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

フレーム：WWWブラウザー上で、複数のHTMLファイルを一度に表示する方法、およびそのタグ。ネットスケープナビゲーターとインターネットエクスプローラ以外のブラウザーでは対応していない場合が多い。
©1994-2007 Impress R&D

INTERNET magazine 2001/1347

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