・ドキュメントオプシェクトモデル (DocumentObjectModel) ドキュメントオプジェクトモデルとは、画像やテキストなど、ページ上の 全ての構成要素を「オプジェクト」として階層構造で定義し、それらの属 性やメソッドを制御することによってページをリアルタイムに変更したり 動きを与えたりすることができる機能です。 •DHTML ビヘイビア (DHTML Behavior) 一連の決まった機能を持った DHTML のコードを、ひとつのカプセルのよ うなものとして外部ファイルに分離しておき、必要に応じ呼び出して使用 できるようにします。この機能は InternetExpIorer5 より実装されました。 5-09-2 Netscape Navigator の DHTML ■スタイルシート (Style Sheets) lnternet Explorer と同じく Netscape Navigator も CSS ( カスケーディン グ・スタイルシート ) をサポートしていますが、 Netscape Navigator では CSS 要素を JavaScript によって操作できるようにした JASS (Java Accessible Style Sheets) という技術を実装しています。これによってペ ージ上の CSS 要素に変化を与えることが可能です。 ・ドキュメントオブジェクトモデル (DocumentObject ModeI) ドキュメントオプジェクトモデルとは、 InternetExplorer の機能と同じく、 画像やテキストなど、ページ上の全ての構成要素を「オプジェクト」とし て階層構造で定義し、それらの属性やメソッドを制御することによってペ ージをリアルタイムに変更したり動きを与えたりすることができる機能で す。 lnternet Explorer もドキュメントオプジェクトモデルの考え方を採用 していますが、これらは現状基準となる規格がないため、両者の間にはそ の構造に違いが見られます。 ■ホシショニングレイヤ—(Positioning and Layering) Netscape Navigator はバージョン 4.0 から <LAYER> という独自のタグを実 装しました。 lnternet ExpIorer のポジショニング機能と同じく、画面上の レイアウトを制御する機能です。これによって、画面上の要素の重ね合わ せ順や、要素の位置指定を正確に制御することができます。ただ、 <LAYER> タグは W3C が提唱する規格から外れており、こでも lnternet Explorer との差が見られます。 アクション 218 HTML DES 1 GNS

Font—Size Adj リ庁虐猷ー Micro 三 0 幵旧 rne.. 日回ロ ファイルの偏集 ( 印表示 ) 移釛い や , , , 〇ロ囹ー 0 薗朝 ん S ー 2 : ABC ョト 0 123 ん飛 S 一 1 : ABC ョト 0 123 Font Size + ー 0 : A 日 0 abc 123 Font Size + 1 : ABC abc 123 Font Size + 2 : ABC abc 123 イントラネットゾーン lnternet ExpIorer Windows 版 文字 通常文字がひとまわり大きい lnternet Explorer Windows 版の文字が、 Macintosh 版とほば同じくらいのサイズになっています。 160 HTMC DESIGNS

C 0 0 1 T 1 0 料 プラウジング環境に ついて Microsoft lnternet ExpIorer Netscape Communicator Windows Macintosh 01 1 -02-1 ブラウサ 環境 現在 Netscape Navigator と lnternet Explorer は、両者でプラウザシェアの 9 割以上を 2 分する、 2 大メジャープラウザとなっています。 web ページ は最低限ますこの 2 つのプラウザ上で表示チェックを行うようにしましょ う。しかしながら、そのときに我々の頭を悩ますのが「プラウザによって 見え方が違う」「プラウザによってちょっとだけ表示がすれる」などとい った問題です。その原因はこの両プラウザ間の細かな仕様の差にあります。 独自にサポートしているタグが原因であることもあれば、 HTML 記述上の 草の根レベルの些細なクセまできりがありません。本書ではそれらの相違 点に対する知識や対処法を Tips として数多く御紹介しています。 また現在では両者ともバージョン 4.0 以上のバージョンがかなり普及してき ていますが、表示の確認は、 3.0 あたりまでの古いバージョンも含め、でき るだけ多くのプラウザ環境で行うようにしましよう。特に JavaScript や CSS 、 DynamicHTML などはプラウザとバージョンによる対応 / 非対応の 差も多いため、エラー対策も含めての表示と動作のチェックが非常に重要 です。 → appendix01 「 HTML 対応表」 ( p. 248 ) 、 02 「 CSS 対応表」 ( p. 274 ) N ( 叩に N 部 - m に′ 0 、 0 で 0 市 japan ◇ lnternet Explorer 4.5J http://www.microsoft.com/japan/ 0 ′リ第一・ィ・ンス 、イフス・イ、 ◇ Netscape Communicator 4.5J http://www.netscape.com/ 016 DES I GNS HTML

5-09-1 lnternet ExpIorer の DHTML ■タイナミックスタイル (Dynamic StyIes) ダイナミックスタイルはページの構成要素の属性をダイナミックに変化さ せる機能です。 lnternet Explorer では CSS ( カスケーディング・スタイル シート ) を完全サポートしていますが、これら CSS の属性を操作すること によって、ページを読み込んだ後でも、文字の位置やフォントサイズを変 更したり、ユーザーのカーソルの動きに応じてテキストの表示 / 非表示を 切り替える等の動きを、リアルタイムに変化させることが可能です。 ■タイナミックコンテンツ (Dynamic Contents) ダイナミックコンテンツとは、ページ内のコンテンツ要素 ( 文字や画像や 色など ) をリアルタイムに置換することができる機能です。この機能では、 リロードしたり新しいページをサーバーに読みに行くことなく、丸ごとペ ージの内容を書き換えることができます。 ■ホシショニング (Positioning HTML) ポジショニングとは、 W3C が規定している「 Positioning HTML with Cascading Style Sheets 」に基づいた、ページ上の HTML 要素や CSS 要素 を正確に配置するための機能です。これまで HTML では基本的に、左合わ せ、右合わせ、センタリングなどの単純なレイアウト方法しかなく、それ 以上の正確なレイアウトを行うためには、 GIF をスペーサーがわりとして 使ったり、複雑な TABLE を駆使して実現するしか方法がありませんでし たが、 lnternet Explorer のポジョショニング機能では、要素の X 座標、 Y 座標、 Z 座標 ( 重なり順 ) を数値によって自由に指定することが可能です。 ■フィルタと特殊効果 (FiIter & Transitions) フィルタと特殊効果は、ページ上の画像にエフェクトを加えられる機能で す。フィルタはページ上の画像に対して反転、透過、ばかし等の特種効果 を与えることができる機能です。現在 14 種類のエフェクトが用意されてい ます。トランジションは画像の表示 / 非表示のときにフェードイン / アウ トやワイプ等、様々な効果を加えることができます。 ・テータバインティング (DataBinding) データバインディングとは、データベースから必要なデータ読み込み HTML と連結、統合する機能です。データからのテープルを自動作成や、 ューザー側の環境でのテープルの再構成などを可能にします。 HTML DES I GNS アクション 217

A C T 1 0 料 Dynamic HTML に ついて 4.0 以上 4.0 以上 住 4.0 以上 Netscape Navigator 4.0 、 lnternet Explorer 4.0 以降がら実装された Dynamic HTML ( 以下 DHTML) という技術は、プラグインなどに頼らな くても動きのあるべージを比較的容易に作成することができる技術です。 こでは DHTML で実現できる機能の概要を御紹介します。 DHTML は実際に DHTML というタグなどが体系として存在する訳ではな く、実際は HTML と CSS と JavaScript を組み合わせて機能を拡張しダイナ ミックなページを実現するものを総称して DHTML と呼んでいます。しか し今のところ両者のプラウザに搭載されている DHTML にはほとんど互換 性がありません。そのため現在は、 Netscape Navigator 用と lnternet Explorer 用に 2 種類のページを用意したり、随時両者のプラウザを判断し つつ双方で問題なく動く部分だけを組み合わせて構成していくような方法 がとられています。 MiC ′ 0S0 lnternet ExpIorer Netscape CO れれ icatO ′ Windows Macintosh 05 アクション 、り・ N c き 0 ま FUSE98 NEWS しー ON NAME AGENDA REGISTER し A 日 MAY ~ み 29 8 を物、第物 3 山Ⅵき y をお降ⅵ . 邯はいい を国 1 4 Ⅷい 10 餌 ". 国 ) 製画 : を′れ iObby を国 F リ 5E98 : BEYONDTYPOGRAPHY THENEWOOOVELECTRIC ー tr 謝、第 T 叩 hy ー物、 0 Brody 蝕 1 新一磯背ⅳ・可日 0 ・ー 90 卩”朝 ow 日 00 ツ on 宿 0 れ宿 0 0M0 れ ON bO 、ヨ、当 0 ツ用 0 はを・れ d 、新Ⅲ»ow Ca 川” れ第・ rrib ・れ 0 Car90n い物い ast ・を日背羅を DAY . 1 村リ日 SOAV を日 IOAY お ◇ Fuse98 http://www.fuse98.com レイヤー機能を使った階層メニューやスクロールなどが実現されています。 214 HTML DESIGNS

DISPLAV 一 00 = cading style Sheet ー Mic ~ = 0 幵 lnternet Exploret ・ 」ファイルの編集 ( 印表示 ) 移 0 お気に入り ) ヘルプ ( 旦 ) 」 , , 0 ロ囹ー 0 朝一日 A 団 Cascading StyIe Sheet css では、く BODY 〉く p 〉く HI 〉く A > など一般的な HTML のタグを対 象 ( セしクタ ) にして、そのスタイルを自由に定義することが可能 です。どの HTML タグでもセレクタとして機能させることが可能で す。 」ファイルの偏集 ( 印表示 ) 移動 0 お気に入り ) ヘルゴ ( 旦 ) 」← , , 0 ロ囹ー 0 薗朝一日昌 Cascading S 厄 Sheet OSS では、く日 OD わく p 〉く HI > く A 〉など一般的な HTML のタゲを対象 ( セレク タ ) にして、そのスタイルを自由に定することが可能です。どの HTM L タグ でもセレクタとして能させることが可能です。 文字 ■同ロ 0 三 0 ョ引 ng style Sheet ー Mic ド 0 三 0 幵 lntet ・ net Explorer 上は HTML のみ、下は同じⅡ TML のぐ IEAD > に CSS 指定を追加したもの。 <BODY > タグ内とくⅡ 2 > タグ内にスタイルシートを定義しています。 144 HTML DES I GNS

Windows e T E X T & F 0 T 環境による行間の差を 補正する 簒 4.0 以上 3. O 以 4.0 以上 9 3.0 以上 Macintosh プラウザや環境によって文字の大きさだけでなく行間もそれぞれ微妙に異 なります。一般に Macintoh と Windows では、 W ⅲ dows の方が行間が詰ま って見えます。 Netscape Communicator MiC ′ 050 代 lnternet Explorer 何も指定していない状態の各プラウザの行間の解釈 ( フォントサイズ 12px の場合 ) 文字 行間 フォントサイス ブラウサ Netscape Navigator 4. x-Macintosh 版 lnternet ExpIorer 4. x-Macintosh 版 Netscape Navigator 4. x-Windows 版 lnternet Ex 0 「 e 「 4. x-Windows 版 ( 15px = 125 % ) 12px Osa ka ( 15px=125 % ) 12px Osa ka ( 12px = 100 % ) M S P ゴシック 12px ( 13px = 108 % ) M S P ゴシック 12px Windows での行間を Macintosh と同じ程度に広げたい場合は、 CSS で行間 を Macintosh のデフォルト行間値に合わせて指定します。それにより Macintosh 上での見た目を変えすに w ⅲ dows 上の詰まった感じだけを補正 することができます。 161 日 T 岡し DESIGNS

し食 0 U T GIF を使って空白を作る 3.0 以上 2.0 以上 0 2.0 以上 3.0 以上 Mic ′ 0S0 ーれ e ′れ et ExpIorer Netscape Communicator Windows 0 Macintosh 3-01-1 スペーサー G について ページに配置する画像やテキストの位置を微妙に調整する手段のひとっと して、透明な GIF 画像をスペーサーとして使う方法があります。これはも ともと HTML のレイアウトの不自由さを補うため、やむを得す生まれた方 法ともいえます。この見えない GIF 画像を「突っかい棒」のようにして配 置することによって他の画像やテキストの位置をコントロールすることが できるのです。なお Netscape Navigator 3 以上では <SPACER> という、ス ペーサー用の GIF 画像と全く同じ働きをするタグが実装されましたが、 lnternet Explorer が対応していないという問題があり、あまり普及してい ません。現実的にはやはりスペーサー GIF を使う方が安全といえます。 スペーサー GIF として使用する画像は、ファイル容量的にも小さく済む最 小サイズ、 1 x 1 ピクセルの大きさがあれば充分です。また画面に表示され ないようにするため、全面を透明にしておく必要があります。そして く IMG > タグを使って画面に配置する際に WIDTH と HEIGHT の指定により 任意の大きさに変更して使用します。または VSPACE や HSPACE の指定に より任意の大きさの余白をまわりに作ることでスペーサーとして機能させ ることも可能です。 スペーサー GIF はひとつだけ用意しておけば、いちど読み込んだ後はキャ ッシュに残っているものを様々な場所で様々な大きさに変えて使いまわす ことができます。 03 レイアウト 046 HTML DES I GNS

HTML での使い方は、 GIF や JPEG と同じようにく IMG > タグでソースを指 定するだけです。ただし Netscape Navigator 、 lnternet ExpIorer とも 4.0 以 降でなければサポートしていないという問題があります ( lnternet Explorer の Mac ⅲ tosh 版では 4.0 でも標準サポートされていません ) 。またそ れらのプラウザでも表示は可能なものの、アルフアチャンネルなどの PNG の最も特徴的な機能に関しては未だ対応できていないというのが現状で す。しかし今後は標準的な画像フォーマットになっていくと言われています。 PNG 形式は現在、 Abobe 社の Photosh 叩 4.0 以降、 Web 画像用の加工ソフト ImageStyler や ImageReady 、 Macromedia 社の Fireworks などがすでに対 応しています。いちど試してみて下さい。 PNG についてもっと詳しく知りたい場合は以下の URL も参考にしてみてく たさい。 画像 六一 0 PNG Sxite ー田 Vi11em 、・ S&iE 、・・”いを・ 0 トー PNO レ、国 7.0 ・ 0 加ー動、 0 、い , 00 動、 第製 ( 0 第物朝、、一心ー山・取レの■載 0 4 “めけ . のを - 一 ( 駅物の 100 ~ 0 山「を一・ ) ・ PNO NO 物 0 ・の、勲・を物′、一画 0 ・一・日 1 物し一興 0 、 .8 ー 0 ー第 CTOtN ・、 : 4 ・、一興第一 0. 0 ・ B 第 PNG ード 80- 陸 rl “・・ 7i03 “ 一三 X - ツ・ニ三′笏 % ◇ PNG HOME SITE http://www.cdrom.com/pub/png/ 041 HTML DESIGNS

T E X T & F 0 T 簡単なフォントサイズ 補正法 2 -JavaScript- 0 3 0 以上 3 , 0 以上 0 3.0 以上 3.0 以上 JavaScript によってマシンとプラウザを判断し、 <BASEFONT SIZE> を 個別に指定してフォントサイズ差を補正する方法です。 Net sc ap e Navigator Macintosh 版と lnternet Explorer Macintosh 版、そして Netscape Navigator Windows 版ではフォントサイズを 3 に指定します。そ して通常、文字がひとまわり大きい lnternet ExpIorer Windows 版のみフ オントサイズ 2 を指定します。本文中では相対フォントサイズ指定 <FONT SIZE = 士 n > を用います。 Mic ′ 0S0 lnternet ExpIorer Netscape Commu れ ica 0 ′ Macintosh 文字 S 0 U 員 C E く H T M L > く H E A D > く TITLE>Font-SizeAdjustment く /TITLE> < S C R I P T LA N G U A G E = " J a v a S c 「 i p t " 》 i f ( n a v i g a t 0 「 . a p pV e 「 s i 0 n - i n d e x 0 f ( ” Ma c ” ) 》 1 ) ( d 0 c u m e n t . w r i t e ( " 《 B A S E F 0 N T S I Z E = ー 3 ー > ” ) ・ e [ s e ( if (navigator.appName.charAt(O)= d 0 c u m e n t . w 「 i t e ( " < BA S E F 0 N T S I Z E = ー 2 ー》 " ) e [ s e ( d 0 c um e n t . w 「 i t e ( " <B A S E F 0 N T S I Z E = ー 3 ー > " ) く / S C R I P T> く / H E A D > く B 0 D Y B G C 0 L 0 R = " #FFFFFF " > 158 HTML DES 1 GNS