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

藤井幸孝 白畑 真 川田 哲とにブラウザーの対応状況をアイコンで表している（6月10日現在）。これを参考に使用するWWWブラウザーを選んでほしい。

HTML 4.0に続き、W3Cから「CSS Level 2」の勧告が公開された。この進化したスタイルシートを2大ブラウザーの次期バージョンが採用すれば、ウェブペー3.0

ジはますます豊かになっていくだろう。このコーナーの読者なら、スタイルシート4.0の基本的な使 い方はとっくに知っているに違いない。今月はだれでも簡単に利用できるスタイルシートのTIPSから、少々高度なスクリプトまで幅広くお届けする。

3.0

4.0

インターネットエクスプローラ3.0以上
インターネットエクスプローラ4.0以上
ネットスケープナビゲーター3.0以上
ネットスケープナビゲーター4.0以上

7月号「HTMLパズルに挑戦しよう」の解答
7月号のパズルには、多数の挑戦者があった。HTML 4.0やスタイルシートへの関心が高まっていることの証拠だ
ろう。ただし、第1問で<TD>や<TH>タグにスタイルシートを指定した解答が多かったのは残念だ。それでは解答を発表しよう。今月号のパズルにもどしどし応募してほしい。

A N S W E R

1 行と列に色を付けろ！

テーブルの列をグループ化するには、<COLGROUP>や<COL>タグを使う。行をグループ化するには、<THEAD>、<TBODY>、<TFOOT>タグを使う。こうしたタグにスタイルシートを指定すれば、行や列の色やフォントをまとめて変えることができる。
<TABLE CELLPADDING=8 CELLSPACING=0><COLGROUP SPAN=1 STYLE="text-align: left;
background: lightgray; font-weight: bold"><COLGROUP SPAN=2 STYLE="text-align: right; background: lightyellow"><THEAD STYLE="background: black; color: white"><TR><TD>Browser</TD><TD>Version</TD><TD>%</TD></TR><TBODY><TR><TD>Microsoft Internet Explorer</TD> ……

A N S W E R

正解者：古野潔美さん、佐々木貴幸さん、大内勝博
さん

2 特定の行と列に線を付けろ！

<TABLE>タグに「RULES」属性で「groups」を指定すると、<COLGROUP>タグ
や<THEAD>、<TBODY>タグでグループ化した行や列の回りに枠線が引かれる。「RULES」
属性には、ほかに「all」、「cols」、「rows」が指定できる。
<TABLE CELLPADDING=8 CELLSPACING=0 BORDERCOLOR="red"
RULES="groups">

320 INTERNET magazine 1998/8

正解者：古野潔美さん、高田尚樹さん、佐々木貴幸さん、山内洋典さん、福森豊和さん

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

T IPS & T R ICKS

1
リンクのスタイルを変える

4.0
このページのリンクにはちょっとしたしかけがある。リンクをマウスカーソルでポイントしたりクリックしたりすると、文字の色が変わり、太字になって下線が付く。
スクリプトを書いてダイナミックHTMLを使っているわけではない。
すでに作ってあるページにちょっと手を加えるだけでとても簡単にリンクのスタイルを変えることができるのだ。以下のソースをHTMLの<HEAD>〜</HEAD>の中に加えてみてほしい。これだけでページがよりインタラクティブでダイナミックなものになるのだから驚きというほかはない。今あるページを一味違った動きのあるものに変えてみようと思ったら、ぜひ試してみてほしい。

A:link まだ訪れていないリンク

A:hover マウスでポイントしたとき

A:active マウスでクリックしたとき

A:visited すでに訪れたリンク

d<STYLE TYPE="text/css"><!-A:link { color: green; text-decoration: none; }A:hover { color: red; text-decoration: underline; font-weight: bold; }A:active { color: orange; text-decoration: underline; font-weight: bold; }A:visited { color: brown; text-decoration: none; }--></STYLE>と同じだ。

今までリンクの文字色を変えるには、<BODY>

ところが、<A>タグには、「まだ訪れていない」、タグで指定する必要があった。
「LINK」、「VLINK」、「すでに訪れた」などの状態を区別するために、「ALINK」といった属性で、それぞれ「まだ訪れ特別な「疑似クラス（pseudo-classes）」が用

ここまでは<BODY>タグでできることと変わりなていないリンクの文字色」、「すでに訪れたリンク

意されている。まだ訪れていないリンクの文字のいように思えるかもしれないが、それだけではなの文字色」、「クリックしたときのリンクの文字色」

スタイルを指定するには次のようにする。

い。リンクをマウスカーソルでポイントしたときのスタイルも指定できる。

を指 定 していた。最 新 の H T M L の規 格 である
HTML 4.0では、<BODY>タグにこれらの属性をA:link { color: green }付けることは不適切で、将来的には廃止するとされている。

A:hover { color: orange }これは<BODY>タグのLINK属性の指定と同じ表示結果になる。すでに訪れたリンクのスタイル、また、<BODY>タグでは文字色しか指定できな

そこでリンクの文字色の指定にもスタイルシート

リンクをクリックした瞬間のスタイルは次のようにいが、「疑似クラス」ではそれ以外のスタイルも設を使うことになる。スタイルシートでリンクの文指定できる。

字のスタイルを指定するには、<A>タグにスタイルを設定するだけだ。

定できる。上のサンプルでは、「text-decoration」
で文字に下線を付けたり消したり、「font-weight」

A:visited { color: brown }で文字の太さを変えたりしている。文字の大きさ

A:active { color: red }やフォント、背景色などもスタイルシートで自由に変えることができる。

A { color: green }これもまた<BODY>タグのVLINK、ALINK 属性

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

INTERNET magazine 1998/8321

T IPS & T R ICKS

2
文字や画像をドラッグする
4.0
ダイナミックHTMLを使って文字や画像をマウスでドラッグするテクニックはこれまでにも何度か紹介してきた。IE4.0で作る「福笑い」や「ジグソーパズル」、ナビゲーターでドラッグするたびに新しい文字が出てくるTIPSを覚えているだろうか。今回も文字や画像のドラッグだが、これまでよりずっと簡単に作成できるナビゲーター用のTIPSだ。複雑なスタイルシートやスクリプトを書く必要はない。外部スクリプトを利用し、ドラッグしたいHTML文を指定するだけだ。
サンプルでは単語の並べ替えテス
トを作ってみたが、工夫次第でいろいろと面白いゲームができるぞ。
それではさっそく紹介しよう。

d<SCRIPT LANGUAGE="JavaScript1.2"
SRC="dragable.js"></SCRIPT><SCRIPT LANGUAGE="JavaScript1.2"><!-var d1= new Dragable ( 100, 100, "<H1>TIPS & TRICKS</H1>" ) ;var d2= new Dragable ( 200, 200, "<IMG SRC=mozilla.gif>") ;//--></SCRIPT>

上のソースを見てもらいたい。驚くほど簡単

あとは外部スクリプトの関数を呼び出して、ドラ画像を表示させたければ、「html」のところにだ。しかけはすでにおなじみになった、ネットスケッグできる部品を表示させるだけだ。次のような「"<IMG SRC=filename.gif>"」と書こう。これ

ープ社純正の外部スクリプトファイルだ。まず、スクリプトを書こう。

でできあがりだ。さらにドラッグさせる部品を表示したいときは、同じように次々と関数Dragable

次のURLのテキストファイルをダウンロードする。
var objname = new Dragable（x, y, html）

を呼び出していけばよい。

http://developer.netscape.com/
なお、ハードディスク上で作業していると、外部

docs/examples/dynhtml/dragable/「objname」は任意の名前だ。
「x」と「y」にはdragable.txt

部品を最初に表示させる位置の座標を、「html」

スクリプトの読み込みに失敗することがよくあるには表示させる内容をHTML文で指定する。た（サーバーにアップロードすれば問題ない）。今回ダウンロードできたら、「dragable.js」と拡張子

とえば、右上を原点として（80,20）の座標に大の外部ファイルはサイズが小さいので、テストするを変えて、HTMLファイルと同じフォルダーに保きな見出しとして「TIPS & TRICKS」と表示さときには、<SCRIPT LANGUAGE="JavaScript

存しよう。

せるには、次のように書く。HTML文を「""」で1.2">〜</SCRIPT>内にdragable.jsの全文を次に、HTMLに次のように書いて外部ファイルを囲むのを忘れないように。

貼り付けてしまってもかまわない。

読み込む。
var d1 = new Dragable（80, 20,<SCRIPT LANGUAGE="JavaScript1.2""<H1>TIPS & TRICKS</H1>"）

SRC="dragable.js"></SCRIPT>

322 INTERNET magazine 1998/8

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

T IPS & T R ICKS

3
フォーカス移動の順序を決める
4.0
多くのW W Wブラウザーでは、「Tab」キーを押すことでリンク部分のフォーカスを順に移動させることができる。もちろんIEとネットスケープナビゲーターはどちらも対応している。リンクにフォーカスがあるときに「Enter」キーを押すと、リンク先にジャンプする。キーボードだけで操作できるのでノートユーザーには便利だろう。IE 4.0では、一歩進んでこのフォーカス移動の順序を指定できるようになった。HTML内の順序に従って上から順にフォーカスが移動するのではなく、途中を飛ばして下のリンクに移ることができる。これによって重要なリンク先へすばやく訪問者を誘導できるようになるはずだ。

TABINDEXを指定していない場合

TABINDEXを指定している場合

d<A HREF="http://www.impress.co.jp/" TABINDEX="8">
http://www.impress.co.jp/</A>

リンクのフォーカス移動の順番をあやつるにフォーカス移 動 からはずしたいリンクがあれば、

ちなみに、先月号で紹介した「ACCESSKEY」

は、<A>タグに新しい属性である「TABINDEX」「TABINDEX="-1"」とする。この場合は、マウス属性と同じく、このようにマウスなしでの操作性を加 えればよい。「T A B I N D E X ="1"」、「T A B

でクリックするしかリンク先へジャンプする手段がを向上させようというのは、「どんなハード、ソフ

INDEX ="2"」……のように指 定した数字 の順なくなる。

トを使っていても読みやすいページを作ろう」と

このTABINDEX属性は、<A>タグだけではなく、を使って見るもの」という先入観を捨てて、キーいうHTML 4.0の方針でもある。
「WWW はマウスに、フォーカスが移っていく。
上のサンプルでは、コンテンツの目次ページを作ってみた。リンクのフォーカスは、まず大きな章<AREA>タグや、フォームの部品である<INPUT>、ボードの操作性向上をねらってみるのも、気配り（「Dynamic HTML」など）を順番に移動し、次<SELECT>、<TEXTAREA>タグにも付けることのあるページ製作者の心得かもしれない。にトップページへ戻るためのリンクへ飛び、そのができる。次の例では、リンクより先にテキスト後他のサイトへのリンクを流れて、最後に小さな入力欄や送信ボタンにフォーカスが移る。

節（「HTML 4.0」など）へのリンクを順番に移っていく。ユーザーがどのページへ移動する確率が<A href="index.html" TABINDEX="3">

高いかを想定して順番を決めるのは難しいかもし

HOME</A><BR>

れないが、自分が見てほしいページへのリンクは、<INPUT TABINDEX="1" TYPE="text"

たとえレイアウトでは下のほうにあったとしても、

name="text1">

早い順番にフォーカスが移るように、番号を決め<INPUT TABINDEX="2" TYPE="submit">ておくのがうまい手だろう。

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

INTERNET magazine 1998/8323

T IPS & T R ICKS

4
オブジェクトの位置を自由に動かす4.0
左 のサンプルページを開くと、画像が波のように揺れながら動き出す。さらに、中央を文字と罫線が左右に往復して動く。今まで何度か紹介してきたように、ネットス
ケープナビゲーターならレイヤーを使ってこのようなしかけを作るのだ
が、IE 4.0ではスタイルシートとス
クリプトを組み合わせれば、どんなタグでもオブジェクトととして扱い、自由自在に動かすことができる。少々長いスクリプトを書くことになるが、ぜひこのTIPSを試してみよう。仕組みさえわかれば、動かし方は無限に考えられる。文字や画像を変えたり、ソースの数字を変更したりして、オリジナルのアニメーションを作ってみよう。

d1<IMG ID="img" SRC="image1.gif" WIDTH="28" HEIGHT="28"
STYLE="position:absolute; top:130; left:10"><DIV ID="chr"
STYLE="position:absolute; left:0; top:90; width:460;
font-size:24pt; font-family:Comic Sans MS; color:#008080"><HR>HTML TIPS & TRICKS<BR> iNTERNET magazine 1998-8<HR></DIV>

2<SCRIPT LANGUAGE="JavaScript">
moveX = 10
function moving () {X = img.style.pixelLeft
if ( X > document.body.clientWidth - (28 + 10)) X = 0
img.style.pixelLeft = X + 10
img.style.pixelTop = 130 + Math.sin (X/60) * 120
X = chr.style.pixelLeft
if ( moveX > 0 && X > document.body.clientWidth - ( 460 + 10)) moveX = -10
else if ( moveX < 0 && X < 10) moveX = 10
chr.style.pixelLeft += moveX}
setInterval ( "moving () ", 100)</SCRIPT>

文字や画像を「オブジェクト」として扱い、ばオブジェクトを動かすことができる。pixelLeftの値だけ増減させて、左右に往復させる動きを

位置を自由に動かすには、まず、動かしたいタの値を増やすと右へ、減らすと左へオブジェクト作っている。オブジェクトがウィンドウ内の右端グをスタイルシートで配 置 する（1 ）。画 像をが動く。また、pixelTop の値を増やすと下へ、に来たらmoveX の値をマイナス値にして左へ動<IMG>タグで指定し、水平線と文字を<DIV>タ減らすと上へ動く。

かし、左端に来たらmoveXの値をプラス値に変えて右へ動かす。

グで囲む。それぞれタグのSTYLE属性で「top:130; left:10」などとしてウィンドウ内の上からの定期的にオブジェクトを動かすために、タイマー最後に「setInterval」メソッドで100ミリ秒ごと位置、左からの位置を指定する。また<DIV>タ用関数「moving」を作成する。<IMG>タグのグではさらに「width:460;」として幅を決める。

画像は、波のように動かすことにする。movingに関数moving 呼び出すようにする。
「100」とい位置の指定を有効にするには、STYLE 属性にの中でpixelLeftを10ずつ増やしてオブジェクトう数値を変えれば、画像や文字を速く動かした「position: absolute;」を加えておかなければなを右へ動かす。
「document.body.clientWidth」

り遅く動かしたりすることができる。

らない。また、スクリプト用にID属性でそれぞれでウィンドウ内の幅 を取得し、オブジェクトがウ「img」、「chr」と名前を付けておく。

ィンドウの右端に来たら左端へ戻すようにする。

スタイルシートとスクリプトを使ったこの方法をマ

pixelTop は数学関数の「Math.sin」を使って増スターすれば、今までこのコーナーで取り上げて次にオブジェクトをアニメーション表示させるス減 させ、上下 に波 のような動 きをさせている。

きたレイヤーを使ったネットスケープナビゲーター

クリプトを書く（2）。オブジェクトの現在の左か「Math.sin（X/60）*120」中の数値を適当に変え用のダイナミックHTMLをIE用に書き換えること

らの位置は「オブジェクトの名前.style.pixelLeft」て、波の幅や高さを変化させてみよう。

もできるだろう。

で、上からの位置は「オブジェクトの名前. style.
pixelTop」で得られる。この数値を変化させれ324 INTERNET magazine 1998/8

左右に動く<DIV>タグは、pixelLeftを「moveX」

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

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

今月のテーマリストを制する<UL>や<OL>タグでふだん何気なく使っているリストだが、「行頭記号」に目を向ける機会は少ない。
もしかしたら、行頭記号は見慣れている「●」や「○」、数字くらいしかないと思っている人もいるかもしれない。しかし、最近のHTMLやスタイルシートでは、この行頭記号もいろいろとカスタマイズできるようになっているのだ。そこで今月は、リストの行頭記号に関するパズルに挑戦していただく。トリックがわかったらすぐに解答を送ってきてほしい。正解者には抽選で1名にオリジナル腕時計をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ リストを制する にチャレンジ！

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

Q U E S T I O N

1 行頭番号を自由に付けろ！

3.0

4.0

3.0

4.0

第1問は順序付きリストの問題だ。普通、行頭番号付きの順序付けリストでは、行頭番号は数字となり、1、2、3、……と小さいほうから順に表示される。しかし左のサンプルを見てほしい。行頭番号が51から始まるリストと61から始まるリストがある。小文字のローマ数字もあり、よく見るとリストの番号が1つ飛んでいるところがあるのがわかるだろう。一体どうやって表示させているのだろうか？ これがわかれば、行頭番号を思いどおりにカスタマイズすることができるようになるぞ。いくつか方法があるが、IE 3.0とネットスケープナビゲーター3.0でも表示できる方法をとることと、リスト関係のタグを必ず使うこととする。
ヒント

Q U E S T I O N<OL>タグや<LI>タグの属性は……

2 行頭記号に画像を表示させろ！

4.0

第2問は順不同リストの問題だ。順不同リストでは、行頭記号は階層の浅いほうから、●、○、■と表示されるだろう。しかし、左のサンプルを見てほしい。このサンプルで表示されている行頭記号はそのどれでもなく、なんと画像が表示されているのだ。1段下のリストの行頭記号には、また別の画像が表示されている。決して「<IMG>タグで画像を置いて、その後に文字を書いて改行する」という方法を使っているのではない。さて、どうやって表示させているのだろうか？

これがわかれば、もう1行ごとに<IMG>タグを書く必要はなくなるぞ。解答にはリスト関係のタグを必ず使うこと。画像は何でもいいので肝心の部分を書いて送ってほしい。
ヒント

スタイルシートでリストに関係するものは……

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

INTERNET magazine 1998/8325

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