このコーナーを楽しむために最新のHTMLを使う際に、どうしても避けて通れないのがWWWブラウザーの互換性の誰よりも早く最新のHTMLを使ってみたい藤井幸孝／大内 勇／高橋登史朗／佐藤和人

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

前回はインターネットエクスプローラ6の新機能を使ったTIPSを紹介したが、4インターネットエクスプローラ4以上すでに自分のモノにできただろうか。今回も引き続きマウスホイールやトラン

5

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

ジションフィルターの活用など、IE6の新機能を使ったなかでも応用性タップ

5.5

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

リのTIPSを中心にしてお送りするので、今のうちにオリジナルTIPSを編み

6

インターネットエクスプローラ6（パブリックプレビュー）

出して、正式版のリリースと同時に閲覧者を驚かせよう。

4

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

6

ネットスケープ6以上

CD-ROM収録先

Å Magnavi→Ip0107→Htmltips+CD-ROM 今月号のTIPSをすべてCD-ROMに収録!!
M0.8

Mozilla6月号「HTMLパズルに挑戦しよう」の解答
CSS 1の基本なのだが、これまでIEが未対応のために試せなかった機能を取り上げてみた。IE 6は、第1問の(1)のように<!DOCTYPE 〜>でStrict型のDTDを宣言しておくと、CSSのいくつかの項目で、規格に厳密に沿った表示を行う。この宣言がないと、IE 6は「互換モード」になってIE 5.5以前と同じ動作をする。

A N S W E R

1 centerなしでセンタリング！

(2)のようにテーブルの左右のマージンに「auto」を指定するのが正しいセンタリングだ。「text-align: center」を指定した場合は、そのブロック全体ではなく、ブロックの中のテキストが中央寄せになるのが規格に沿った動作と言える。

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
正解者：ENDEさん、坂部和久さん、Masahiko
Murataさん、なるるさん、堀江さん

2TABLE { margin-left: auto; margin-right: auto; }A N S W E R

2 自動的に画像をいれろ！

displayプロパティーに「list-item」を指定すると、<P>タグも<LI>タグと同じようなリスト表示になる。あとは、おなじみのlist-style-imageプロパティーを使って黒い点の代わりになる画像のURLを指定する。

P.plist { margin-left: 48px; margin-bottom: 16px;
display: list-item; list-style-image: url(p2.gif); }318 INTERNET magazine 2001/7

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

正解者：ENDEさん、坂部和久さん、Masahiko
Murataさん、なるるさん、堀江さん

DTD（Document Type Definition）：SGMLの文章構造と、それを表現するためのタグに関する定義のこと。HTML4.0のStrict型は、レイアウトに関する要素が除かれている。

©1994-2007 Impress R&D

TIPS & TRICKS

1
TIME2を使って画面に動きを加える
6
以前、スクリプトをいっさい使わずに、「HTML+TIME」でダイナミックな効果をホームページで演出するテクニックを紹介したが、ここでは「HTML+TIME2」という、さらに一歩進んだテクニックを紹介する。
「HTML+TIME2」はIE5.5から使えるテクニックなのだが、今回はトランジション・フィルターと組み合わせてIE6だけで動くサンプルに仕上げてみた。
左のサンプルはこのテクニックを使い、星型の領域が徐々に拡大していくようすをあらわしたものだ。
この方法は、いくつかの属性値を指定するだけで簡単に使えるテクニックなので、気軽にトライしてみよう。
（大内 勇）d<HTML xmlns:t="urn:schemas-microsoft-com:time"><STYLE TYPE="text/css">.time { behavior: url(#default#time2) }.looks { width:400;height:400;background-color:blue }</STYLE><import namespace="t" urn="urn:schemas-microsoft-com:time" implementation="#default#time2" /><DIV ID="obj" CLASS="time looks">
HTML TIPS&amp;TRICKS<br><t:transitionFilter TYPE="starWipe" BEGIN="obj.begin" SUBTYPE="fivePoint" DUR="4" MODE="in"
FROM="0" TO="1" CALCMODE="linear" REPEATCOUNT="1" /></DIV>

それではソースの説明を始めよう。<HTML>だ。CLASS属性を見ると値が「time looks」と見タグには「xmlns」
を使って名前空間という位置を慣れない 形になっているが、これは2つのスタイル指定する。この名前空間はXMLの一部なのだが、指定を同時に適用する手法である。<DIV>タグのこれを解説すると非常に長くなってしまうので、こ中の<t:transitionFilter>で始まっている部分が今

こでは「urnで指定した位置にあるリソースにtと回のキーポイントになるので、それぞれの属性値のいう名前をつける」と理解しよう。

指定方法を簡単に説明しておく。

次はスタイルシートの指定で、最初の「.time」がHTML+TIME2を使うための指定方法で、必ずこTYPE,SUBTYPE：表を参照のフォーマットを指定する。次の「.looks」は一般

BEGIN：ソースと同じように指定的なスタイル 指定だが、今回のサンプルを使う場

DUR：アニメーションの動作する時間（秒）合は最低でも「width,height,background-color」

MODE：フィルターの反転（inまたはout）の3つを指定しておく。

FROM：始点（0〜1の範囲。例：0.2）<import>タグの部分は、このHTML文書に名前

TO：終点（同上）

空間「t」のリソースと、HTML+TIME2を使うためCALCMODE：効果（linearまたはdiscreta）の属性を適用させるための指示だ。

REPEATCOUNT：回数（数値）<DIV>タグで指定した範囲が、HTML+TIME2を使ったトランジションフィルターの適用される部分

TYPEとSUBTYPEの組み合わせは、次のとおりだ。

TYPE
barnDoorWipe
horizontal"
barWipe
topToBottom"
clockWipe
ellipseWipe
fade
fanWipeisisWipe
pushWipe
slideWipesnakeWipespiralWipe
starWipe

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

トランジション・フィルター：時間経過で変化するビジュアルフィルターのこと。指定したコントロールの状態を視覚的に変化させることにより、アニメーション効果が得られる。

©1994-2007 Impress R&D

SUBTYPE"vertical"leftToRightclockwiseTwelve
circlecrossFadecenterTop
rectangle
fromLeft
fromLeft
topLeftHorizontal
topLeftClockwise
fivePoint

INTERNET magazine 2001/7319

TIPS & TRICKS

2
入りきらない文字を省略する
6
先月に引き続き、IE 6 Public
Previewの新しいスタイルシートの機能をテストしてみよう。左のサンプルは、横幅を固定した表の中にいろいろな長さのテキストを入れたものだが、長すぎて収まりきらないテキストに合わせてセルが大きくなることもなく、テキストがいきなり切れてしまうこともない。テキストが省略されていると分かるように「…」という表示が自動的に追加されるのだ。長い表を作るときに、テキストの長短によって思いどおりのデザインができない場合は、IE 6のこの機能を試してみてはいかがだろう。
（佐藤和人)

dDIV.div1 { width: 200px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }上記のCSSのソースには4つのプロパティーれてしまう。今回のTIPSでは、値を「hidden」

最後にwhite-space。この連載で紹介するのはがあるが、そのうち横幅を固定するwidthはおなにして、はみ出した部分は隠されるようにした。

初めてだろう。値に「nowrap」を指定すると、テキストが折り返し表示されなくなる。<BR>タじみのものだろう。それ以 外 の「o v e r f l o w 」、

ちなみに、<TEXTAREA>タグで文章をスクロー「text-overflow」、「white-space」について説ルさせて読ませるページがよくあるが、スタイルグを入れて強制改行しない限り、テキストが横に明しよう。

シートを使って<P>や<DIV>タグの大きさを固定伸び続ける。<NOBR>タグで囲むのとちょうどまず、1つめのoverflowから。この連載で何回かし、「overflow: scroll」を指定すれば同じことが同じ効果だ。

紹介されたプロパティーだ。縦や横の長さが固定簡単にできる。

white-spaceには、もう1つ変わった機能がある。

されているタグでテキストがあふれた場合にどの次にtext-overflow。これがIE 6で独自に追加さ値に「pre」を指定すると、<P>タグでも<DIV>ように表示させるかを指定するものだ。次のようれた新しいプロパティーだ（CSS 1や2の仕様にタグでも<PRE>タグと同じようにスペースや改に値を「scroll」にすれば、自動的にスクロールはない）。
「overflow: hidden」を指定してテキ行が反映されて表示されるのだ。使い道はあまりバーが現れて、はみ出した部分がスクロールで読ストが切れてしまった場合に、値に「ellipsis」なさそうだが、覚えておいてもいいだろう。

めるようになる。

を指定すると自動的に「…」が付く。残念なが以上3つの重要なプロパティーでこのテクニック

らテーブル関連のタグ<TABLE>、<TR>、<TD>は完成だ。おまけとして、マウスをテキストの上ではtext-overflowがサポートされていないため、に載せると省略されたテキスト全体がツールチッ

ここでは<DIV>タグに指定した。このサンプルのプに表示されるJavaScriptをサンプルに追加しoverflowを指定しないと、長さを固定したつも表は、<TD><DIV>テキスト</DIV></TD>のよてある。CD-ROMに収録したソースを見てもらりでも、テキストに合わせてタグの領域は拡大さうにして作ってある。

いたい。

width: 200px; height: 100px; overflow: scroll;

320 INTERNET magazine 2001/7

インターネットマガジン／株式会社インプレスR&D<NOBR>タグ：ブラウザーには、テキストを画面のサイズに合わせて改行するワードトラップという機能が付いているが、このタグで囲んだテキストに関してはその機能が働かなくなり、1行表示される。
©1994-2007 Impress R&D

TIPS & TRICKS

3
マウスホイールで画像を拡大縮小させる
6
今回は、ウィンドウズ版IE6に追加された新しいイベ ントを 使 うTipsだ。
最近のウィンドウズ用マウスに付いているマウスホイールの操作だけで触れている画像サイズを変更するというスクリプトだ。ホイールの情報を拾い、制御に使ってみようというわけだ。もちろん、使う用途はアイディア次第だ。文字のズームなどさまざまな用途が考えられる。ただ、あまり通常のマウスの使い方からかけ離れた動作にはならないようには留意しておこう。
ウィンドウズ版IE6だけの限定機能だが、この使い方ならほかの環境でエラーは出ないので安心して使ってみよう。
(高橋登史朗)d1<script>function zoomImgSize(oj,w0,h0,w1,h1){
swt = event.wheelDeltaif( swt >= 120 ) { width=w0 ; height=h0 }else{ width=w1 ; height=h1 }oj.style.width = width
oj.style.height = height}</script>2<img src="me.gif" id="rocket"
onmousewheel="zoomImgSize(this,28,30,280,300)">

Win版IE6にはonmousewheelというイベン<IMG>タグを使ったが、他のタグでもかまわない。

くるのだが、手前へ ( ユーザー側 ) まわせばマイナ

トが追加されている。読んで字のごとく、マウスホ

たとえば<BODY>タグへ書けばページの上でホイス、反対へまわせばプラスの値になる。

イールの動作に対応したイベントだ。今回は、こールを回したときに反応するし、<DIV>タグでものイベントを使ってマウスホイールを動かしたら画同様だ。関数zoomImgSize(oj,w0,h0,w1,h1)

if( swt >= 120 ) { width=w0 ; height=h0 }像が大きくなったり、小さくなったりするというは、画像を拡大縮小するためのスクリプトだが、ojelseスクリプトを用意してみた。

はズームしたいオブジェクトを指定する。ここでは、まずソース2を見てみよう。<IMG>タグの中の<IMG>タグのなかで直接その画像自身をthisキ

は、手前に回せばサイズにw1,h1を適用し、反対ーワードを使って指定しているのでほかに画像名へまわせばw0,h0を適用するという意味だ。そしなどを調べる必要はない。w0,h0で 縮小時の幅て、ここでセットされた変数widthとheightを実と高さ、w1,h1へ拡大時の幅と高さを指定すると、際に動かしたい画像(oj) のwidthとheight へ代入が今回のポイントだ。

この関数が起動したときに画像が大きくなったり、すると、サイズが変わってくれるというわけだ。

<IMG>タグの中へ書いているので、その画像上で小さくなったりしてくれる。

onmousewheel{ width=w1 ; height=h1 }マウスホイールを動かすとソース1にある
swt = event.wheelDelta
zoomImgSize(this,28,30,280,300)
は、ホイールの動作を取得して変数swtへ格納しが起動されるという仕組みになっている。今回は、ている。ホイールを動かすと120の倍数が返ってインターネットマガジン／株式会社インプレスR&D

マウスホイール：マウスの左右の2つのボタンの間に埋め込まれている入力機器。通常は、画面のスクロールやテキストの拡大縮小などに使われる。

©1994-2007 Impress R&D

INTERNET magazine 2001/7321

TIPS & TRICKS

4
ツールチップの文章を改行させる
5
この連載ではこれまでにもツールチップ（ポップアップヒント）を作り出すTipsをいくつも紹介してきた 。 IE 5 の XMLと DHTML
Behavior機能を使うものやIE5.5のcreate Popup関数を使うものなどだが、覚えているだろうか？ 今
回はそのなかでも、もっともシンプ
ルなalt属性を使うタイプを応用して、複数行のツールチップを作る方法を紹介する。IE5以外の環境だと改行されないが、ツールチップとしての役割を持たせたままにはしておけるので、気軽に試してみよう。
（藤井幸孝）

d1<img src="sample.gif" alt="このツールチップは&#13;改行されています。">

2<a href="http://www.impress.co.jp/"
title="1. HTML Tips&#13;
2. Java Script Tips&#13;
3. CSS Tips&#13;
4. DHTML Tips&#13;
5. XML application">HTML TIPS & TRICKS</A>

DHTML Behavior や window.createPopup

さっそくサンプルコードを見てみよう……というまを使うと、直接 Unicodeにおける文字コード番号関数を使う場合、ツールチップの文章部分は本でもないほど簡単だ。alt属性にツールチップの文を指定できるので、普通のテキストエディターでは文とは別のオブジェクト、別のウィンドウとして用章を書くとき、改行したい部分で「&#13;」を書いて入力できない文字を書きこみたいときなどに便利意することになる。そのため文章は通常のHTMLおけばいい。IE5以上のブラウザーで見てみると、だ。
「#13」は制御文字（改行やデリートなど）に使として作成でき、<BR>タグを使えば簡単に改行ツールチップが改行されているのがわかるだろう。

われる番号であり、IEではこれを、改行コード的にができる。だからツールチップが長い文章だった

このTipsは、alt属性のほかに、title属性でも使用使用しているようだ。ただし、正確には改行コード場合にも困ることはなかった。

できる。<IMG>タグでは alt属性を使 い、アンカとは若干違い、むしろ<PRE>タグに近い効果がだが、どちらもIEでしか正しく表示されないうえに、ータグでは <A href="<URL>" title="1行 目 &ある。いくつかサンプルを書いてみればわかるとおcreatePopupの場合はさらに5.5のみサポートと#13;2行目">としてやれば同じような効果が得ら

り、このコード「&#13;」のあとは、通常の改行やいう制限がついている。必要なスクリプトもややれるぞ。
（※ただしNetscapeはtitle属性に対応しスペースが有効になっているはずだ。
「&#13;」を2長めになるので面倒だった読者もいるだろう。

ない。
）

つ連続で使用することでも1行空き文を作成できるが、ソースを整形したい場合はサンプルの後半

一方、今回紹介する alt属性を使うタイプは、現在出回っているブラウザーならたいてい対応して少し難しい話をしてみると、「&#**」は「文字参照」

いるし、JavaScriptも不要なので準備が非常にと呼ばれる、特定の文字をコード番号で指定する簡単だ。今回のテーマである「改行」は残念なが方式で、タグで使用されている「<」や「>」を表示

らNetscapeでは対応していないが、とりあえず1したいときに使う「&lt;」や「&gt;」（これらは正式行で表示させることは可能だ。には文字実体参照と呼ばれる。
）の仲間だ。
「#**」

322 INTERNET magazine 2001/7のように、「&#13」のあとに改行を入れてもよい。

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

alt属性：画像を表示しない環境で閲覧している人に対して、その代替として表示する文字列を指定する属性のこと。

©1994-2007 Impress R&D

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

今 月 の テ ー マ

スタイルの切り替えを制する6万部突破！

<STYLE>タグやSTYLE属性ではなく、外部スタイルシート（cssファイル）を使う利点の1つに、いろいろなデザインのスタイルを用意すれば、いつでも簡単に切り替えられるということがある。HTMLを書き換えなくても、ページの作者や「HTMLパズルに挑戦しよう」
宛て先訪問者の気分に合わせて好きなときに好きなスタイルを選べる仕掛けをD作れば、ページの魅力もアップするにちがいない。そこで今月は、外部

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

スタイルシートをダイナミックに扱うパズルに挑戦していただく。正解者には抽選で1名にオリジナルバインダーをプレゼントさせていただく。
なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ"スタイルの切り替えを制する"にチャレンジ！

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

Q U E S T I O N

1 メニューからスタイルを選 べ！

6M0.8

ネットスケープ6のメニューで「表示」を選ぶと、「スタイルシートを使用」という項目がある。しかし、何に使うメニューなのか分からない人がほとんどだろう。実は左のサンプルのように、ページの作者が用意した複数の外部スタイルシートのなかからユーザーが好きなものを選べる機能なのだ。ただし、HTMLのなかでそれなりの仕掛けを作る必要がある。
外部スタイルシートを指定する<LINK>タグをいくつか書いておいて、ネットスケープ6にこのようなメニューを出させるのが第1問だ。HTML 4の仕様書（

www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html）でスタイルシートに関する部分をよく読んでみよう。
ヒント

Q U E S T I O N<LINK>のREL属性とTITLE属性……

2 時間によってスタイルを変えろ！

4

55.5

6

第2問は、1998年9月号のこの連載で紹介したTIPS「時間によってスタイルを変える」と同じ機能のJavaScriptを書く問題だ。3つの外部スタイルシートを用意して、朝、昼、夜にそれぞれ別のスタイルでページが表示されるようにしたい。JavaScriptで時刻を調べてページに変化を付ける技は、この連載の読者ならお手のものだろう。ただし、document.writeを使って<LINK>タグを書き込むという手法は取らない。第1
問と同じようにHTMLにあらかじめ3つの<LINK>タグを書いておいて、適用されるスタイルをJavaScriptで切り替えるのが条件だ。やり方はい
くつか考えられるが、なるべくスマートな方法で実現してもらいたい。
ヒント<LINK>タグが有効かどうかを切り替える……

インターネットマガジン／株式会社インプレスR&D＜LINK＞タグ：別のファイルとの関係を示すタグのこと。主に外部スタイルシートを参照するのに使われている。

©1994-2007 Impress R&D

INTERNET magazine 2001/7323

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