第 44 回

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

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

今月からMozilla Millestone 17（M17）を本誌付録CD-ROMに収録する。

4

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

5

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

プ6はPreview Release（PR）2を対象とするので注意してほしい。

5.5

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

Mozilla Millestone 17 CD-ROM収録先 ı Mozilla

4

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

6

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

ネットスケープ6のもとになっているオープンソースのブラウザーだ。開発途上の英語版だが、興味のある人は試してみよう。なお、今月からネットスケー

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

M17

Mozilla M17以上

9月号「HTMLパズルに挑戦しよう」の解答
今月も多くの方に挑戦していただき、全員が正解だった。DOMとCSSは着実に浸透しているようだ。
お詫び：9月号の「HTMLパズルに挑戦しよう」の表記に誤りがありました。第1問、第2問ともにIE 4には対応しておらず、IE 5.5に対応しています。お詫びして訂正いたします。

A N S W E R

1 文字を出現させろ！

6

DOMでスタイルシートを操作する手順がわかっていれば簡単。あらかじめ「visibility:hidden」を指定しておいたタグをスクリプトで「visible」に変える。
<SCRIPT LANGUAGE="JavaScript">function show (idstr) {obj = document.getElementById (idstr); obj.style.visibility = "visible";}function hide (idstr) {obj = document.getElementById(idstr); obj.style.visibility = "hidden";}</SCRIPT>：<A HREF="http://www.w3.org/TR/REC-html40/"
onmouseover="show ('go1')" onmouseout="hide ('go1')">HTML 4.0 Specification</A><SPAN CLASS="go" ID="go1" STYLE="visibility: hidden;">Go!</SPAN>

A N S W E R

正解者：坂部和久、よしとも、冨園慎一郎、TOYAMA
Nao、Masahiko Murata、山口雅仁、ENDE、なるる、てらす、杉本 知子、堀江、うおまさ＠home（敬称略）

2 リストを展開せよ！

2問目は、「表示」のときは「非表示」に、「非表示」のときは「表示」に、というように場合分けをする。「display」プロパティーが「none」か「block」かで判断する。
<SCRIPT LANGUAGE="JavaScript">function showhide (idstr) {obj = document.getElementById (idstr);
if (obj.style.display == "none") obj.style.display = "block";else obj.style.display = "none";}</SCRIPT>：<UL><LI><SPAN onclick="showhide ('list1')">W3C (World Wide Web Consortium)</SPAN><UL ID="list1" STYLE="display: none;"><LI> …… <LI>……

350 INTERNET magazine 2000/10

正解者：坂部和久、よしとも、冨園慎一郎、TOYAMA
Nao、Masahiko Murata、山口雅仁、ENDE、なるる、てらす、杉本 知子、堀江、うおまさ＠home（敬称略）

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

オープンソース：ソフトウェアの設計図にあたるソースコードを無償で公開し、誰でも自由に改良したり配布したりできるようにしたもの。これにより普及を促進し、より洗練されたソフトウェアが完成するというメリットがある。この代表例としては、Linuxや現在開発途中のMozillaなどが有名。
©1994-2007 Impress R&D

T IPS & T R ICKS

1
XULのツリーで階層リスト
6

前回に引き続き、XULを使ってみよう。今回は<tree>タグだ。文字通りツリー構造の階層リストを作れるのが魅力。直感的でシンプ
ルな使い勝手で、HTMLのテーブルのように行や列も指定できる。
付録CD-ROMにはいくつかバリエーションを収めてあるが、ここではおなじみの階層メニューを紹介しよう。クロスプラットフォームなネットスケープ6 やその大 元 である
Mozillaに実装されている言語だから、ウィンドウズでもマッキントッシュでもLinuxでも同じように動く。CD-ROM収録のMozillaでオープンソースブラウザーの新機能を確かめよう。 （高橋登史朗）

d1

M 17

<tree><treecolgroup><treecol flex="1"/></treecolgroup><treechildren flex="1"><treeitem container="true" open="true" id="moz"><treerow><treecell class="treecell-indent" value="for Mozilla"/></treerow>:</treeitem></treechildren>:</tree>2treecell-indent:hover { color: #ffffff; background-color: #aaaaaa; }treeitem[container="true"][open="true"] > treerow { list-style-image: url ("holder0.gif"); }treeitem[container="true"] > treerow { list-style-image: url ("holder1.gif"); }<tree>関連のタグはHTMLの<TABLE>関連のタグに似ている。対応関係は次のようになる。
<tree>関連てほしい。<tree>関連 のタグの並べ方の簡単なが階層化されて、マウスクリックで閉じたり開いた例はこうだ（閉じタグは省略）。

りするようになる。
「open="true"」を指定すると開いた状態で、「"false"」なら閉じて表示する。

<TABLE>関連<tree>

treetable

treecaption

captiontreecolgroup

colgroup

treecolcoltreeheadtheadtreechildren

tbody<treerow>が<TR>、<treecell>が<TD>と考えすべて同一のXULコードだ。CSSを替えるだけでtreeitem

tbodyると理解しやすい。<treecell>を続けて並べれば無数のデザインを実現できるというわけだ。

treefoot

tfoot

列が増えて、<treerow>から</treerow>までを<treechildren flex="1">

ソース2はソース1のXULから指定したCSS。1<treeitem>

行目はおなじみの「: h o v e r 」、2 行目と3 行目は<treerow>「container」属性と「open」属性 の状態によっ<treecell value="Test"/>てデザインを変更するための分岐だ。CD-ROMのサンプル3つ（tree01.xul〜tree03.xul）
は実はtreerow

tr

繰り返せば行が増える。
「flex="1"」はほかのブロ

最新のMozillaに関する情報については、次のペ

treecelltdックとの位置間隔を決める属性で必須だ。

ージがおすすめだ。

ソース1 の6 行目のように<treeitem> に「con上記のソースでは、xml 宣言などのお題目は前回tainer="true"」を書いて<treechildren>以下を同様なので省略している。CD-ROMからコピーし入れ子にしていけば、その<treeitem>内のリスト

MozillaZine日本語版

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

www.mozilla.to/mozillazine/

XUL（ズール／XML-based User Interface Language）：XMLをもとにしたユーザーインターフェイス記述言語。メニューやツールバーなどのさまざまなインターフェイスを、クロスプラットフォームで記述できる。現在開発中のMozillaやNetscape 6に実装されている。
©1994-2007 Impress R&D

INTERNET magazine 2000/10351

T IPS & T R ICKS

2
指定の場所で改ページ印刷する
45

5.5

ホームページを印刷したとき、意図しないところでページが切り替わってしまい、非常に読みにくい文書になったり、画像が半分に切れてしまったりした経験があるだろう。ここでは、プリントアウトするときに指定の位置で改ページさせるテクニックを紹介しよう。
CD-ROMに収録されたサンプルをIE 5.5の「印刷プレビュー」で見てみよう。プレビューが複数のページにまたがっているが、1 枚目を見ると文章の下が余白になっていることに気付いただろう。この位置で改ページするように指定しているのだ。ソースはとても簡単なので、さっそくチャレンジしてみよう。
（大内 勇）d<DIV STYLE="page-break-after: always"><P>■ Introduction</P> 読者のみなさんはビリヤードを……
</DIV><DIV><P>■ Materials</P> １．テーブル……
</DIV>

Cascading Style Sheet Level2（ 以 下 、の後ろで改ページされるようになる。つまり、1の2つは現時点でどのブラウザーでもサポートさ

CSS 2）は、パソコンの画面に表示されるスタイ番目の<DIV>要素が1ページ目にプリントされ、れていないので無視してもかまわない。本などをルを定義しているだけではない。音声出力用にも、2番目の<DIV>要素は2ページ目にプリントされ出版する際に、左ページや右ページを指定するた声の高さなどのスタイルが細かく指定されているようになるのだ。

めのキーワードなのだ。

る。また、ページを印刷したときのためのスタイ「page-break-after」プロパティーに指定できるルも新しく追加されている。現在IEでサポートさキーワードは以下のとおりだ。

Mozilla M 17ではうまく動作しなかった）。
サンプルのソースを一目見て、<DIV>タグで2つサンプルではpage-break-afterプロパティーを使って指定した要素の後ろで改ページさせているれているのがこのサンプルだ（ネットスケープ6、auto

ブラウザーが改ページを判断が、指定した要素の前で改ページさせたいときはalways

必ず改ページ「page-break-before」プロパティーを設定する

avoid

改ページしないといい。キーワードは、page-break-afterに指定できるものと同じなので、とまどうことはないに分 かれていることに気 付 いただろう。2 つのだろう。

<DIV>タグの違いは、スタールシートが設定されautoを指定するとブラウザーに判断を任せてして い る か 否 かだ 。 1 番 目 の < D I V > タ グ に はまうため、どこで改ページされるかわからない。

「page-break-after: always」というスタイルをそのため改ページをはっきり指定したいときは、CSS 2という新しめのスタイルシートだが、IE 4指定している。これがCSS 2で定義されている、alwaysを使う。

でもサポートされているので、プリントアウトさプリントアウトするときに改ページさせる指定だ。

CSS 2で は 、 上 記 の 3つ 以 外 に 「 left」 とれることをを意識してホームページを制作していこのスタイルを指定すると、印刷するときに要素「right」というキーワードも用意しているが、こる人は、ぜひ使ってほしいテクニックだ。

352 INTERNET magazine 2000/10

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

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

T IPS & T R ICKS3
縦書きフォームを作る
5.5
IE 5.5の一番の目玉と言えば、スタイルシートの新機能を使った「縦書き表示」だろう。この連載でも最初のベータ版が登場してすぐに使い方を紹介したのはご存じのとおり（3 月号）。正式版が公開されたことで、さっそく試してみた人も多いのではないだろうか。
縦書き表示はたいていのタグに指定できる。3月号では<DIV>タグに指定しただけだったが、フォー
ム関連のタグにも使えるはずだ。
テキストボックスやボタンを縦書きにして入力フォームを作れば、雰囲気のある掲示板だって作れる。新機能をいち早く取り入れて、誰も見たことのない世界初の縦書き掲示板を目指そう。 （編集部）

d<STYLE TYPE="text/css">
FORM { writing-mode: tb-rl; font-family: 'ＭＳ Ｐ明朝'; }INPUT, TEXTAREA { writing-mode: tb-rl; font-family: 'ＭＳ Ｐ明朝'; }</STYLE>は縦書きにならないようだ。

IE 5.5の縦書き表示機能をおさらいしよう。

ブロックに分 けて指 定 する必 要 がある。また、タグにスタイルシートを設定し、「writing-mode」writing-modeとともに、スタイルシートでwidthプロパティーの値を「tb-rl」にする。これだけでやheightを指定してブロックの縦や横の幅を固これで縦書きフォームができあがる。テキストボ

指定したタグの中のテキストが縦書きになり、「。
」

定したほうがきれいに表示される。

ックスに入力すると、ワープロのようにマウスカーソルが横向きになり、入力中の文字まできちんや「、」、「ー」などの表示も自動的に縦書きにふさわしいものに変わる。縦書きの中で数字など横ここまでは3月号で紹介したとおりだが、今回のと縦書きになるのが面白い。サンプルのようにフ書きにしたい部分があれば、次のようにwritingようにフォームを縦書きにするときは、もう1つォントに明朝体を指定すれば、さらに凝ったもの-modeの値を「rl-tb」とすればいい。

注意点がある。IE 5.5の縦書き表示は、指定しになる。掲示板を作るなら、投稿結果も縦書きたタグの中のタグ、たとえば<DIV>〜</DIV>のにして全体の雰囲気を統一するといい。投稿全<SPAN STYLE="writing-mode: rl-tb">
99</SPAN>年

中の<A>〜</A>にも引き継がれる（継承される）

体を縦書きにするよりも、投稿ごとに縦書き表が、タグによっては例外がある。フォームの部品示を指定した<DIV>で囲って、段組みが縦に並である<INPUT>タグや<TEXTAREA>タグには継ぶように見せたほうが、使い勝手はいいだろう。

承されないのだ。テキストボックスやボタンを縦
この縦書き表示には、いくつか注意する点がある。

書 きにしたいときは、 上 記 のソースのように

なお、この掲示板はあくまでサンプル用のダミー

まず、<BODY>タグには指定できない。そのた<INPUT>タグや<TEXTAREA>タグにもwriting-HTMLだ。実際に投稿できるわけではない。CGI

め、ページ全体をまるごと縦書きにはできない。

modeを別に指定しなければならない。なお、IEの腕に覚えがある人は、自分で掲示板プログラ<DIV>タグなどを使ってページの中をいくつかの5.5ではフォームの部品でも<SELECT>タグだけムを作って公開してみてはいかがだろうか。

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

CGI（シー・ジー・アイ／Common Gateway Interface）：WWWサーバーで、外部プログラムを起動して、その結果をWWWクライアント（ブラウザー）に返す仕組み。ユー
ザーのリクエストによってウェブページの表示内容を変えたり、ユーザーの入力したフォームのデータをサーバー側へ読み込んだりできる。
©1994-2007 Impress R&D

INTERNET magazine 2000/10353

T IPS & T R ICKS

4
ダイナミックにノードを追加する
55.5

6

M17

9月号では、DOMテクノロジーを使ってHTMLオブジェクトを操作し、ダイナミックにテキストを表示するTIPSを紹介した。ただし、あらかじめテキストの「入れ物」にあたる空のノードを作成しておいてから、テキストを変更したものだった。今回はさらに実用的になるように、ノードをダイナミックに作成してテキストを追加する方法を紹介しよう。DOMの理屈が難しいと感じる人は、「ウィンドウズのエクスプローラで、新しいフォルダーを作って、 新しいフォルダ という名前を自分の好きな名前に変える」という操作を想像すれば、イメージがつかみやすいだろう。
（藤井幸孝）

d1<SCRIPT LANGUAGE="JavaScript">function appendNode (text) {var oList = document.getElementById ("samplelist");var oNewNode = document.createElement ("LI");
oList.appendChild (oNewNode);var oNewTextNode = document.createTextNode (text);
oNewNode.appendChild (oNewTextNode);}</SCRIPT>2<UL ID="samplelist"><LI>Tips 1<LI>Tips 2</UL><INPUT ID="newtext" TYPE="text" VALUE="5" SIZE="8"><INPUT TYPE="button" VALUE="Append Child Node"onclick="appendNode (document.getElementById('newtext').value)">

作業が必要だ。先月号を覚えているだろうか。

先月説明したように、DOMはHTML文書のにしておこう。次に子ノードとなる新しいオブジ中のタグやテキストをツリー構造で把握するモデェクト「oNewNode」を作る。ここで使っていDOMでは、タグの中のテキストもオブジェクトルだ。<UL>と<LI>を使ったリストは、<UL>がるのが、「document.create Element」メソッド（＝テキストノード）として扱われる。テキスト「親ノード」、<LI>が「子ノード」となっているだ。引数には、HTMLのタグ名を入れる。今回ノードを追加するには、「createTextNode」とので、ツリー構造としてわかりやすい。ここでは、は< L I > タグを作 成 するわけだから、「 c e a t eいうメソッドを使 う。 ここでは関 数 a p p e n d

子ノードである<LI>を追加してみよう。

Element ("LI")」となる。

Nodeの引数「text」から「oNewTextNode」

ソース2のように<UL>リストを作り、いくつか続いて、この新しい<LI> オブジェクト（oNewというテキストノードを作成しよう。作成したテの<LI> を並べておこう。<UL> タグには、名前Node）を<UL>オブジェクト（oList）の子ノー

キストノードは、タグの場合と同じく親ノードの（ID属性）を付ける。今回は「samplelist」としドにしよう。オブジェクトを作っただけでは、ツ子供として追加する。ここでは親は、先ほど作た。この名前はソース1の関数で使うことになる。

リー構造の関係がわからないからだ。そのために成した<LI>タグつまりoNewNodeオブジェクトは「appendChild」メソッドを使う。引数にはなので、「oNewNode.AppendChild(oNewText

子ノードになるオブジェクトが入る。このメソッNode)」となるわけだ。appendChildの使い方

項目を１つ追加し、追加した部分に引数「text」

ドは親となるオブジェクトのものなので、「oList.

は、子ノードがタグでもテキストでも同じになる。

で指定した文字列を表示する。まず準備として、

appendChild(oNewNode)」となるわけだ。

「 d o c u m e n t . g e t E l e m e n t B y I d 」 を使 ってこれで、もとは項目が2つだった<UL>のリストに最後に、ソース2のように入力された文字列を「samplelist」オブジェクト（<UL>のオブジェク

3 つめの<LI> 要素を追加できた。これだけでは使って関数appendNodeを呼ぶフォームを作成ト）を「oList」という簡単な変数で扱えるよう<LI>の中身は空っぽなので、文字列を書き込むすればおしまいだ。

ソース1の関数「appendNode」は、リストに354 INTERNET magazine 2000/10

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

ノード：「節」の意味。ツリー構造のデータの中で、親子関係や兄弟関係を持つオブジェクトのこと。DOMでは、HTML内のタグやテキストがそれぞれ1つのノードとして扱われる。

©1994-2007 Impress R&D

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

今月のテーマ

複雑な配置を制する大好評発売中！

これからネットスケープ6が普及することで期待できるのが、スタイルシートを使ったページ要素の自由な配置だ。ちょっと複雑なスタイルシートを指定すると表示が崩れる
ナビゲーター4とは違い、ネットスケープ6とIE 4以上では位置を指定「HTMLパズルに挑戦しよう」
宛 先するプロパティーを好きなように組み合わせても安全だ。そこで今月は、D配置に関するスタイルシートの機能を駆使して、HTMLだけを使ったこ

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

れまでのレイアウトを置き換える問題に挑戦してみよう。正解者には抽選で1名にオリジナル折りたたみ傘をプレゼントさせていただく。なお、正解は来月のこのコーナーで発表する。それでは頭をやわらかくして、今月のテーマ 複雑な配置を制する にチャレンジ！

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

Q U E S T I O N

1 イメージマップを取り替えろ！

45

5.5

6M17

左のサンプルでは、リンク用の画像を並べたブロックが見出しの下に置かれている。この3つの画像は、スタイルシートを使って配置したものだ。これを再現してほしい。もちろんこのブロック全体が1つの画像になっているわけではない。ポイントは、見出しとブロックの間に文字などの要素をいくら挿入しても、ブロックと一緒に画像も下に移動し、画像の間の位置関係は変わらないということだ。つまり、単純に「position:absolute」を使ってページの左上からの座標を指定しているだけではない。これがわかれば、画像を並べてちょっとしたメニューを作るときに、いちいちイメージマップ用の画像を用意する必要はなくなるぞ。
ヒン
トQ U E S T I O N

relativeとabsoluteを組み合わせる……

2 左右に並べろ！

45

5.5

6

M17

2問目のサンプルは、一見ありがちなレイアウトに見える。リンク集が2段の段組みのようになっていて、ブラウザーのウィンドウサイズを横に広げても、左の段はページの左端に、右の段は右端に並ぶ。<TABLE>
タグを使えば簡単だ。2つの列を作って<TD>タグにalign属性を指定すればいい。ところが、このサンプルはスタイルシートだけで配置しているのだ。第1問と同じように、見出しとこのリンク集の間に文字などを追加しても、下に位置がずれるので、ページ全体の中での座標を固定しているわけではない。基本的にやり方は第1問と同じで、あるプロパティーを活用するだけだ。さあ、トライしてみよう。
ヒン
ト「右の位置」を指定する……

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

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

INTERNET magazine 2000/10355

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