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

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

ネットスケープ6のPreview Release 3が発表され（残念ながらCD-ROM

4

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

5

インターネットエクスプローラ5以上した動作をしているので、今まで敬遠していた人も試してみるといいだろう。

5.5

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

今月もSVGやIE 5.5、Mozillaなどの最新テクニック満載でお届けしよう。

4

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

6

ネットスケープ6以上

収録には間に合わなかった）、正式版に向かって着々と進化しているようだ。
CD-ROM Bに収録したMozilla Milestone 18は、以前に比べてかなり安定

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

M18

Mozilla（数字はMilestoneの番号）

11月号「HTMLパズルに挑戦しよう」の解答
今月は多くの方から正解を寄せていただいただけでなく、SVGに対する大きな期待をメールで語ってくれた方が多かった。まだ日本語で解説した文献は少ないが、SVGはウェブ上の表現技術の中で今もっとも注目を集めているのかもしれない。それでは正解を見てみよう。

A N S W E R

1 図形と文字を描画せよ！

6

四角を描くタグは<rect>、テキストは<text>、楕円は<ellipse>だ。パズルの問題にはしなかったが、四角の角を丸くするには、rx属性とry属性を使う。
<svg><rect style="fill: #AA66EE; stroke: #EE44CC; stroke-width: 5;"x="40" y="10" width="140" height="100" rx="10" ry="10" /><text x="120" y="70" style="font: bold 20pt 'Comic Sans MS'; color: red;">SVG TIPS &amp; TRICKS</text><ellipse style="fill: #40DD90; stroke: #FF8844; stroke-width: 5;"
cx="200" cy="115" rx="100" ry="50" /></svg>A N S W E R

正 解 者：E N D E 、坂 部 和 久 、よしとも、M a s a h i k o
Murata、山口雅仁、堀江、なるる、冨園慎一郎、てらす、うおまさ@home（敬称略）

2 図形を透明化せよ！

第1問の<rect>タグと<elliipse>タグに、透明度を指定するスタイルシートを加えるだ
け。opacityプロパティーで0.0〜1.0の数値を指定する。
<svg><rect style="fill: #AA66EE; stroke: #EE44CC; stroke-width: 5; opacity: 0.6"
x="40" y="10" width="140" height="100" rx="10" ry="10" /></rect><text x="120" y="70" style="font: bold 20pt 'Comic Sans MS'; color: red;">SVG TIPS &amp; TRICKS</text><ellipse style="fill: #40DD90; stroke: #FF8844; stroke-width: 5; opacity: 0.6"
cx="200" cy="115" rx="100" ry="50" /></svg>

330 INTERNET magazine 2000/12

正 解 者：E N D E 、坂 部 和 久 、よしとも、M a s a h i k o
Murata、山口雅仁、堀江、なるる、冨園慎一郎、てらす、うおまさ@home（敬称略）

インターネットマガジン／株式会社インプレスR&DSVG（Scalable Vector Graphics）：XMLに基づいたウェブ用ベクターグラフィックスの標準規格。タグで図形や文字、アニメーションや表示効果を指定することで、高度なグラフィックスが表現できる。2000年8月2日にW3Cが勧告候補を発表している。
©1994-2007 Impress R&D

T IPS & T R ICKS

1
SVGで文字をぐるぐる回す
45

5.54

先月はSVGで図形を動かしてみた。だが、SVGでできるのは四角や丸で絵を描くことだけではない。<text> タグを使って画像の中 へ文 字 を入 れることもできるし、その文字を動かしたり、変形したり、色を変化させたりすることも簡単だ。今月は文字を立体的にぐるぐる回す方法を紹介しよう。本誌の付録CD-ROMの中には、文字を表示するところから始めて、ぐるぐる回すソースが完成するまでの手順をサンプルにしてある。動きを確認しながら試してみよう。今回もスクリプトをあえて使わずにシンプルなタグだけで動いているぞ。 （高橋登史朗）

d<?xml version="1.0" ?><svg><g transform="translate(200 200)"><g transform="skewX(10)"><g transform="skewY(40)"><text style="font-size:70px;color:lightblue"><animateTransform attributeName="transform"
type="rotate" values="0;360"
dur="1s" repeatDur="indefinite"/>TIPS &amp; TRICKS</text>
</g>
</g>
</g>
</svg>

このソースの中心は<text>タグで、それ以外

transform="skewY(40)"values="0;360"0度から360度まで（つまりぐるっと一回り）の< g > タグや< a n i m a t e T r a n s f o r m > タグは<text>タグの中の「TIPS & TRICKS」という文字3つ目の<g>タグで、Y軸方向へも40度歪めていdur="1s"列の位置や回転の仕方などを指定している。

る。その次の<text>タグの属性を見てみよう。

repeatDur="indefinite" 無限に繰り返し

１秒間隔

まず、最初の<g>タグの属性を見てみよう。

style="font-size: 70px; color: #0000AA"

5 秒間隔で動かしたければ「dur="5s"」にすればtransform="translate(200 200)"

これは、おなじみのスタイルシートの指定だ。フォCount="1"」を追加で指定すればいい。5回転なントサイズと文字の色を指定している。文字列のら「repeatCount="5"」というわけだ。

いいし、1回転だけで終わらせたければ「repeat

これは、左から200ピクセル、上から200ピクセル

位置や歪み、色やサイズは、ここまでの指定で終の場所を基点として、文字列が置かれるように指了だ。

transform="skewX(10)"そして、いよいよ次の<animateTransform>タグ

りする加工をしている。これらはSVGの表現力ので文字列をダイナミックに回転させている。各属ほんの一端にすぎない。その高品質かつ軽量なグ性の意味は次のとおり。

ラフィックスを使えば、豪華な印刷パンフレットと同じ画質のプロフェッショナルなデザインをウェブ

次の<g>タグでは、X軸方向へ文字列を10度歪めている。

CD-ROM収録のサンプルではさらに、文字列の上に別の文字を移動させたり、フェードインさせた定している。

type="rotate" 回転する上で提供することも夢ではないのだ。

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

ピクセル：コンピュータの画面に表示できる最小の大きさ。
「ドット」ともいう。
「幅320ピクセル、高さ240ピクセル」のように、コンピュータで扱う画像の大きさはピクセルの数で計られることが多い。
©1994-2007 Impress R&D

INTERNET magazine 2000/12

331

T IPS & T R ICKS

2
グラデーションフィルターを使う
5.5
背景や文字などにグラデーション効果を付ける場合、今までのブラウザーではグラフィックソフトで作成した画像を使って表現するしか方法がなかった。インターネ
ットエクスプローラ5.5では、スタイルシートを使ってHTMLファイルだけでグラデーションをほどこせるようになった。左のサンプルを見ると、背景全体と見出しの部分にグラデーションがかかっているのがわかるだろう。これはIE5.5 で登場したスタイルシートのDirectXフィルターを使うことで可能になるのだ。指定方法はスタイルシートだけなので非常に簡単だ。それではさっそくソースを見てみよう。
（大内 勇）

d<BODYSTYLE="font-size: 12pt;
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#99CCFF',endColorstr='#ffffff');">

上記の<BODY>タグが背景にほどこしたグラす場合は、スタイルシートで「width」も併せて■下のレイヤー

デーションのソースだ。スタイルシートのfilterプ指定しなければいけない。この点を忘れずに覚え<H1 STYLE="position: absolute; top: 10px;

ロ パ テ ィ ー に 指 定 し た 「 progid: DXImageておこう。

height: 58px; width: 100%;
filter: progid:DXImageTransform.Microsoft.

Transform.Microsoft.Gradient」は、IE 5.5から追加されたDirectXフィルターの1つであるグラ

もう一度上のサンプルを見てもらいたい。よく見Gradient(gradientType='0',デーションフィルターの適用を表す。ホームペー

ると見出し部分の文字にもグラデーションがほど

startColorstr='orange',ジ制作者が操作できる部分は、( 〜 ) の中になる。

こされていることがわかるだろう。これはスタイ

endColorstr='green')";z-index:1></H1>「gradientType」には0または1の値を指定でき、ルシートレイヤー（positionプロパティーを指定

0を指定した場合は上下方向、1を指定した場合したタグ）を重ねて、下のレイヤーにグラデーシ■上のレイヤーは左 右 方 向 のグラデーションになる。

ョンフィルターをほどこし、上のレイヤーには<H1 STYLE="position: absolute; top: 10px;「startColorstr」と「endColorstr」は、それぞMaskフィルター（透明化）を使っている。文字

height: 58px; width: 100%;

れ始端と終端の色の指定になる。今回は16進数の部分だけが透明化されて、下のレイヤーにある

filter: Mask(Color=lemonchiffon);で指定したが、色の名前（blackやwhiteなど）グラデーションが表に見えているのだ。この部分

z-index:2">HTML TIPS&amp;TRICKS</H1>で指定することも可能だ。のソースは次のようになる。なお、z-indexとは背景にグラデーションをほどこす場合はこのとおレイヤーを重ねる順番のことで、数値が大きいほ

このように他のフィルターと組み合わせることで、りでいいのだが、 < D I V > や< S P A N > などのど上に重なる。

グラデーションを使ったさまざまな演出が考えら<BODY>以外の要素にグラデーションをほどこ

332 INTERNET magazine 2000/12

れる。興味を持った人はぜひ試してみよう。

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

フィルター：IE 4以降の独自機能で、スタイルシートを拡張して画像や文字にさまざまな視覚効果を与えるもの。反転や半透明化を行ったり、スポットライトや陰影、炎、波型のような効果をHTMLだけで表現できる。スクリプトと組み合わせれば高度なアニメーション効果も可能。
©1994-2007 Impress R&D

T IPS & T R ICKS

3
文字や画像を半透明にする
4

5

5.5

M18

この連載の読者なら、文字や画像の半透明化と言えば、すぐにIEのフィルター機能を思い出すだろう。IEではスタイルシートで指定するだけで、自由自在に透明度を変えられる。しかしこの機
能はナビゲーターでは使えないし、同じIEでもマッキントッシュ版ではまったくサポートされていない。
ところが、現在開発中で、ネットスケープ6 の元 になっている
Mozilla には、裏技ではあるが、半透明化のスタイル指定が存在するのだ。ネットスケープ6 が正式版になれば、どんなOS でも自由に透明度指定を使えるようになるに違いない。この裏技をさっそく試してみよう。
（編集部）

d<STYLE TYPE="text/css">
H1 { font-family: Verdana; font-size: 40pt;-moz-opacity: 0.5; filter: Alpha(Opacity=50); width: 90%; }</STYLE>

フィルターはIEの独自機能で、W3Cが勧告に近づき、大きくすればだんだん不透明になる。

するDOMのプロパティーは、「MozOpacity」としているCSSの規格の中には透明度の指定は含<DIV>や<SPAN>などのタグに透明度を設定すなる。たとえば、文字の上にマウスを載せたときまれていない。それでもやっぱりこの機能をほかれば、背景画像が透けて見えるようになる。このに透明度を変えるには、次のようにすればいい。のブラウザーやO S でも使 ってみたいものだ。

サンプルのように、スタイルシートで文字の位置

Mozillaはそんな願いに応えて、こっそり透明度をずらして重 ね合 わせてみるのも面 白 い。

<DIV onmouseover="this.style.

指定のスタイルシートを用意してくれた。どんな<IMG>タグにも指定できるので、文字だけでは

MozOpacity='0.3' ">OSでも同じ機能を提供することを目指しているなく画像を重ね合わせてフォトレタッチのようなHTML TIPS & TRICKS</DIV>

Mozillaだから、もちろんマッキントッシュ版で効果を工夫してみるのもいいだろう。

も半透明効果は機能する。残念ながらCD-ROM

Mozilla用の透明度指定と同時にIE用の指定もこの連載で紹介したような、DOMを使ってスタに収録したネットスケープ6 Preview Release 2

行えば、2つのブラウザーで同じような半透明効

イルシートを操作するテクニックは、そのまま透では効果が出ないが、最新のPreview Release 3

果が出せる。IEではご存知のとおり、filterプロ明度にも使えるのだ。

ではサポートされている。

パティーに「Alpha (Opacity=50)」のような値を指定して、0から100の数値で透明度を決める。

「-moz-」というのは、Mozillaの独自機能を表しているらしい。Mozillaがインストールされたフ

上記のソースの中にある「-moz-opacity」というプロパティーがそれだ。値には、「0.5」のよう

MozillaはDOMでスタイルシートを操作できるのォルダーの中で、「-moz-」という文字列が含まな少数か、「50%」のようなパーセントで透明度で、当然透明度をJavaScriptでダイナミックにれたCSSファイルやHTMLファイルを探してみよを指定できる。数字を小さくすれば完全な透明変えることもできる。
「-moz-opacity」に対応う。何か新しい発見があるかもしれない。

インターネットマガジン／株式会社インプレスR&DCSS（シー・エス・エス／Cascading Style Sheets）：ウェブページの表示方法を決めるスタイルシートの1種。HTMLやXMLのタグに対し、色やフォント、枠線や余白などを指定できる。W3Cにより、CSS level 1とCSS level 2の標準勧告が策定されている。
©1994-2007 Impress R&DINTERNET magazine 2000/12333

T IPS & T R ICKS

4
渦巻きを描くウィンドウ
455.5

46M18

先月紹介した回転するウィンド
ウで遊んでみてくれただろうか。ネットには遊び心が欠かせないと思っている読者はきっと気に入ってくれただろう。今回は「ぐらぐら」「ぐるぐる」に続く第3弾として、もう少し実用的なサンプルを紹介してみよう。仕組みは先月の「ぐるぐる」と同じ。ただし、真面目にウェブを見ている人を困らせないように、少し工夫を加えてみた。ページを開くと突然ウィンドウが動き出すのではなく、サンプルのようにページ中のリンクをクリックすると、小さなウィンドウが開いてぐるぐる回るという形だ。しかも単純な回転ではなく、渦巻きのような動きをするのだ。（藤井幸孝）

d1<SCRIPT LANGUAGE="JavaScript1.2">
var i = 0, j = 0;function startScrew ( ) {for (j = 50; j >= 0; j = j - 0.2) {i = i + 0.2;
leftwin = j * Math.sin (i);topwin = -j * Math.cos (i);window.moveBy (leftwin, topwin);}}</SCRIPT>

2<A HREF="#"
onClick="newWin = window.open ('screw.html', 'screw', 'width=320,height=240')">next window ?</A><A HREF="#" onClick="newWin.close ()">close</A>+ 0.2」の数字をいろいろと変えて試してほしい。

先月の回転するウィンドウは、ひたすら円を描

回は円をだんだんと小さくするので、このjを徐々いて回り続けるもので、訪問者が困らないように、に小さくしよう。関数「startScrew」の最初にあ回転をストップさせるリンクを置いていた。それでるfor文では、変数 jは最初は50にしておき、0.2

今回のサンプルでは、前回のようなウィンドウ本も初めて見た人は、どうしていいやら分からないかずつ小さくする。jが0より大きい間は、だんだん体の回転ではなく、新しいウィンドウを開いて回もしれない。そこで今回は、自動的に回転をストッと半径を縮めながら回転を続け、jが0になると止転させるようにしてみた。注目を引きたいウィンドプさせるようにしてみよう。ただ止めるのではつままる。このとき円の半径が0になるので、回転が中ウ（お知らせや広告）に使うといいかもしれない。

らない。同心円ではなくて、渦巻き状の回転にし央に吸い込まれたように止まるわけだ。
「j = 50」

ウィンドウを開いたり閉じたりするソース2では、て、徐々に円を狭めながら最後にはぴたっと止まの50は円の大きさ、「j = j + 0.2」の0.2は回転がおなじみの方法を使っている。

る。そんなウィンドウを作ってみよう。

止まるまでの時間に関係してくる。
いろいろと変えて試すのに一番面白いのは、「i = i

もう1つ前回への追加として、「-j * Math.cos (i)」ソース1での回転の原理は前回と同じ、サインと+ 0.2」の部分でiに加えている0.2の値だ。iに加について説明しておこう。サインかコサインのどちコサインだ。変数「i」の値を徐々に大きくするこえる値が小さいとゆっくり大きなうずを描き、大らか一方の頭に「-1」を掛けると、回転の方向をとで、円運動のタネとなる-１から１までの数値をきいと高速で小さなうずを描く。この値を0.1や逆にできる。
「-1」を使わないと時計と逆回り、使作り出す。ポイントは新たに追加した変数「j」だ。

0.2にしておくと、回転をじっくり眺められるのうと時計周りになるので試してみよう。

jはMath.sin (i)とMath.cos (i) にそれぞれ掛けてで面白い。0.5やもっと大きな値だと、すばやい

最後 に注意。ウィンドウの回転速度や描画速度いる。前回はサインとコサインに掛ける定数が、円動きでびっくりはするが何が起きているのか分かはパソコンの性能によって違ってくる。なるべく多の大きさを表していたのを覚えているだろうか。今らないかもしれない。
「j = 50」「j = j + 0.2」
「i = i

くの人と似たような環境で実験するといいだろう。

334 INTERNET magazine 2000/12

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

リンク：ウェブページ上で別のページやファイルなどの場所（URL）を指し示す部分。マウスでクリックするとそのページが表示される。HTMLで<A>（アンカー）タグを使いHREF属性
でURLを指定すればリンクが作成できる。©1994-2007 Impress R&D

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

今月のテーマSVGの初歩を制する 2

大好評発売中！

先月に引き続き、SVGパズルの第2弾。仕様書を見た人は気づいたと思うが、SVGの規格は長大で、そのすべてをこの連載だけで伝えるのは不可能だ。しかし先月のTIPSとパズルでSVGの基本的な感じはつかめたことと思う。SVGの奥は深「HTMLパズルに挑戦しよう」
宛 先

いが、簡単な図形程度なら、誰でも手軽にテキストエディターで書いてDウェブページを飾ることができる。今月は、一歩応用に踏み込んだSVG

正解がわかった人も、わからなかった人も、ご意見、ご感想など何でもOK、次の宛先にメールしよう。用件の欄には必ずHTML TIPS＆TRICKSの1行を忘れずに。あなたの挑戦を待つ！の書き方に挑戦していただく。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ SVGの初歩を制する 2 にチャレンジ！

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

Q U E S T I O N

1 星を描け！

455.5

4

ウェブページにちょっとしたグラフを載せたいと思ったときに困るのが、いちいちGIFファイルを作成しなければならないことだ。見せたいデータは小さいのに、サイズの大きな画像サイズを使うことになってしまう。そんなときに役立つのが、ベクターグラフィックスのSVGだ。第1問では、練習としてSVGで5つの点を結んで星型を描画してみよう。これが分かればSVGで線グラフも作成できるようになる。星の各頂点の座標は、正五角形のものではなく、適当なものでかまわない。なお、解答には<embed>タグを記述したHTMLファイルを添付しなくてもよい。SVGファイルだけ送っていただきたい。
ヒント

Q U E S T I O N

線を引くタグの1つは<polygon>……

2 星を回転させろ！

455.5

4

先月と今月のTIPSで紹介したとおり、SVGは図形やテキストを描画するだけでなく、タグだけでアニメーションの動作を指定することもできる。ちょっとした動きをページに付け加えたいときは、スクリプトを書かなくても、アニメーションGIFを作らなくても、SVGがあればできてしまうのだ。第2問では、SVGによるアニメーションに挑戦しよう。第1問で作った星を今月のTIPSのようにぐるぐる回転させるのが問題だ。解答の条件は、星の左上を中心として回転するのではなく、なるべく星の中心が回転の中心に見えるようにすること。座標の指定がちょっと面倒だが、トライしてほしい。
ヒン
ト

図形の基点の座標を指定しておこう……

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

GIF（ジフ／Graphic Interchange Format）：ウェブで広く使われている画像形式で、256色までの画像を圧縮して保存できる。アニメーションGIFや、透明色を指定できる透明GIFなどの仕様もある。圧縮に使われているアルゴリズム「LZW」はユニシス社が特許を持っており、GIF対応のソフトを配布するには同社とのライセンス契約が必要になる。
©1994-2007 Impress R&D

INTERNET magazine 2000/12335

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