[訳註] Linkタイトルもその大部分を和訳しましたが、実際のLink先に和訳があるとは限りません。和訳が用意されている場合でも、本文書での和訳と異なる題名となっていることがあります。
以下、このような緑色の小さな文字(要CSS対応)となっている部分が訳註です。
Eric Krock, Netscape
Vladimir Ermakov, Netscape
and
Marcell Ortutay,
Plugged In Enterprises
Cascadin Style Sheets による HTML 要素の位置指定 (CSSP) はNavigator 4.x, Internet Explorer 4+ や Netscape の新しい Gecko ブラウザエンジンが搭載されている Mozilla や Netscape 6 によってサポートされている W3C のワーキングドラフトです。(最終的には Cascading style sheets level 2 に含められたのだが) CSSP マークアップを使用すれば HTML 要素を 位置指定し、消し、表示し、重ねることができるようになります。CSSP マークアップは静的にハードコーディング ([訳注] コード中に固定的な値 (リテラル) として書き込むこと) されているので、動的にまたは条件付で HTML 要素を位置指定したり、消したり表示したり、重ねたりしたければ、ブラウザの ドキュメントオブジェクトモデル (DOM) を介して JavaScript から CSSP プロパティにアクセスしなければなりません。
[訳注] 本テクニカルノート中では"位置指定"という訳語が頻出します。その意味は単に"要素の座標位置決定"であったり、広い意味での"要素の表示制御"或いは"JavaScript から CSSP 設定が可能な要素としてブラウザに指定する"であったりします。訳語を分けなかったのは、意図的に同じ単語で多くのことを表していた原文のニュアンスを維持するためです。
先のブラウザはそれぞれ異なるドキュメントオブジェクトモデルを搭載しているので、いずれにおいても等しく機能するように CSSP プロパティを設定する JavaScript コードを書くには、入念な設計とテストが求められます。ユーザのブラウザを判別し、そのブラウザのドキュメントオブジェクトモデルに適したコードを評価しなければなりません。Navigator 4 は、Geckoでは既に破棄されてサポートされていない独自の Layer DOM をもっています。Netscape 6 と Mozilla は業界標準規格である W3C DOM level 1 を完全にサポートした初のブラウザであり、W3C DOM level 2 もしっかりとサポートしていて、JavaScript による CSS 位置指定用の CSS インターフェイスも実装しています。IE4 や IE5 はW3C DOM を部分的にサポートしています。Netscape 6 や Mozilla で W3C DOM 用のコードを書いたとしても、ある程度 W3C DOM をサポートしている Internet Explorer 5 ですらそのまま全て機能するわけではないので、IE 上でアプリケーションを機能させるためには MSIE DOM 独自の機能を利用せざるを得ないところがあります。
クロスブラウザ DHTML 開発を促進するために、このテクニカルノートは自由にダウンロード、再利用や変更が可能な、上記のブラウザで JavaScript によって CSSP プロパティを設定するためのクロスブラウザアプリケーションプログラミングインターフェイス (API) を提供します。この API は Danny Goodman (View Source の記事 CSS-Positioning: The Dynamic HTML Neutral Zone をご覧下さい) と Mike Hall によって当初開発されていたものを基にしています。
この API はオープンソースの精神に則って提供されています。つまり、自由にダウンロード、再利用や変更することができます。この API をより洗練、拡張してクロスブラウザ DHTML 開発をより手軽なものにするため、将来のバージョンに反映できるように、このテクニカルノートと API の拡張や改良を Netscape に提案してくださるようにお願いします。拡張部分が将来のバージョンの API に含まれた場合、その作者はソースコード中に完全な形のクレジットとして記載されます。仔細に関してはこのテクニカルノートの API 拡張の提案節をご覧下さい。
このテクニカルノートは以下の節で構成されています：
このテクニカルノートを読む前に CSSP の書式を理解しておく必要があります。特に、ID 属性値で要素を選択する方法 (例えば、id=fooelt と指定した要素を選択するのに"#fooelt"とします)、位置指定することの宣言方法 (#fooelt { position: absolute; } や #barelt { position: relative; } といった指定)、CSSP プロパティ名 ("left", "right", "z-index"など)、CSSP プロパティ値 ("200px" や 整数 z-index 値など) は必ず知っておく必要があります。
CSSP 基礎入門が必要な方は、Netscape の Dynamic HTML プレゼンテーションページにある CSSP 実践チュートリアルを読んでいって下さい。他の Web で見られるチュートリアルは Dynamic HTML 追加情報ページ にリストアップされています。完全な詳細を知りたければ W3C テクニカルレポートページ にある CSS2 仕様書をご覧下さい。
スクリプトを表示しているブラウザの判別方法を知らないのでしたら、究極の JavaScript クライアント判別を読んでどう判別するのか学習してください。
Navigator 4.x での JavaScript による CSSP プロパティ操作を学ぶには Netscape の Dynamic HTML によるプレゼンテーションページにある、ドキュメントオブジェクトモデルを介しての JavaScript による CSS プロパティ操作の実践チュートリアルを読んでいって下さい。
JavaScript による CSSP 位置指定における Navigator 4.x と Internet Explorer の DOM の違いとこの API の採る手法についてのおおよその概要を知りたいのでしたら、View Source に掲載されている Danny Goodman の記事 CSS 位置指定：Dynamic HTML 中立地帯を読んで下さい。このテクニカルノートではこの記事に記載されていることを繰り返しはしませんので、Navigator 4.x と Internet Explorer の DOM の差異についてよく知らないなら今すぐこの記事を読んで下さい。
最後に、Netscape Gecko と IE5 の MSIE DOM について学ぶには、IE5/NS6 DOM 入門をお薦めします。
Netscape は全面的に CSSP をサポートし、ページ上で HTML 要素の位置指定をするときは常に CSSP マークアップを用いることを推奨します。業界標準であり、HTML 要素の位置を精密に制御できるブラウザ非依存の方法だからです。デザイナー達が以前のバージョンのブラウザ上で要素を位置指定するのに頼っていた、入れ子テーブルと1ピクセル透明画像による方法よりも遙かにすっきりしているからです。
しかしながら、CSSP マークアップには１つ基本的な限界があります。完全に静的で、ハードコーディングされるのです。CSSP マークアップだけでは、条件付で要素を表示したり消したりしたり、動的に位置指定したりすることはできないのです。例えば、アニメーションやマウスクリックに応じて表示非表示の切り替えを行ったりすることができません。これをするには、CSSP プロパティを JavaScript から設定する必要があるのです。
"CSSP でできることは CSSP でやれ。CSSP でできないことを JavaScript でやれ。"という鉄則を銘記しておいて下さい。つまり、値が静的で変える必要がなければ CSSP マークアップをする。値が条件付のものであったり動的に変化させる必要がある場合は JavaScript で設定するということです。
Netscape 4 でサポートされていた以下の拡張プロパティは破棄され、Mozilla や Netscape 6 に搭載されている Gecko レイアウトエンジンではサポートされません：
HTML の拡張：
これらの機能は後方互換の確保のみを目的として、Navigator 4.x で評価されるコード中においてのみ利用されるべきです。今後のコードは Gecko レイアウトエンジンでサポートする HTML 4.0, CSS, W3C DOM を使って書かれるべきです。W3C 標準をサポートするために、独自機能を用いたコードをどう書き直すかということの詳細は独自 DOM と マークアップから W3C 標準への書き換えをご覧下さい。
全てのブラウザで互換性を確保しつつ要素の CSSP プロパティを JavaScript 設定から設定するには、次の二つが必須となります。
id 属性を設定することで要素に名前を付けることができます。(Navigator 4.x での後方互換性維持に使用される layer タグでは name 属性を使うこともできますが、このような layer タグの属性は id 属性で上書きされるので、一般に、layer タグを含めた全ての要素の名前の割り当てに id 属性を使ってください) 名前は次の方針に沿ったものにするべきです：
[訳注] 当然ですが、Java などの一部の言語と異なり ECMA Script (JavaScript コア仕様) では識別子に Unicode などを認めていないので、日本語環境でもこれに従う必要があります。つまり、日本語名などを付けてはいけません。
CSSP マークアップによって position プロパティを銘記することで、位置指定する要素の宣言をして下さい。(当該要素が layer タグであればこれは必要ありません。というのも、layer タグはコンテンツの位置指定にのみ使用されるので、layer 及び ilayer 要素は Navigator 4 がデフォルトで位置指定する要素として扱うのです) 要素は position プロパティを absolute または relative に設定することで Navigator 4.x DOM から位置指定できるようになります。(layer 及び ilayer 要素は自動的に Navigator 4.x DOM から利用できるようになるので、位置指定対象要素として宣言する必要はありません)
次のサンプルコードは、"foo"要素を絶対位置指定として、"bar"要素を相対位置指定として宣言したものです：
<style type="text/css"> |
このようにして名前を付け、位置指定すると宣言した要素は位置指定、表示非表示、重ね合わせの上下設定を操作できます。
位置指定についてより詳しく知りたいのでしたら、CSS2 による 位置指定 を読まれることをお薦めします。最重要の DHTML プロパティを含めて、位置決定アルゴリズムの違いやその他のよくある疑問について大変素晴らしい解説をしています。
要素に名前を付けて位置指定する宣言をする上で、HTML マークアップには３通りの手法があります。つまり、固有の名前を付けた div と span を三つのブラウザ全てで用いる方法、Internet Explorer 4.0, Mozilla, Netscape 6 では div と span を、Navigator 4.x では layer をそれぞれ動的に生成するという方法、そして、名前付 div と span を同名の layer で囲むという方法です。第一の方法を基本とするべきですが、時によっては第２第３の手法の方を用いると複雑なアプリケーションの開発が容易になるので、開発者は三つの手法を知り、個別のアプリケーションに最適なものを用いるべきです。
div と span が名前を付けて位置指定すると宣言できる唯一の要素ではありません。p のような他の要素であっても同様に利用することができます。しかしながら、コンテンツを囲む目的が位置指定だけであるなら、div と span を使うことでマークアップを読む人にその目的を明確にすることができるので、位置指定対象コンテンツを囲む際にはこの二つの要素を用いるのを基本としてください。
１つ以上のブロックレベル要素を囲むのに div を用い (例えば、<div
id="foo"><h1>題名</h1><p>本文</p></div>)、テキストのような、ブロックレベル要素を含まないインライン要素及び/または画像を囲むのに span を用いる (例えば、<span id="bar">適当な<b>太字の文字</b>と画像：<img src="baz.gif" /></span>) のは HTML の書式としてよいものです。このようにすることでこれらの要素が HTML 仕様をに準拠したものになるのです。とはいえ、この二つの要素は機能的には等価で、殆どの場合互換性があります。一つの例外は、 table 中の div には改行が付随して表示されることがあるのですが、span は table 中で使っても問題ありません。
[訳注] table 中の div に余分な改行が追加されるという現象を見たことがありませんので、単に br を追加したものと同じであるのかどうかなどは不明です。どのような環境で再現されるのかも不明です。御存知の方がいらっしゃれば訳者にお知らせ下さい。
Navigator 4.x だけが layer タグをサポートしているので、位置指定するための要素を作る最も簡単な方法は、全てのブラウザでサポートされている技術である、位置指定すると宣言された名前付 div と span を利用することです。HTML ページの head で要素が位置指定すると宣言する CSS スタイルシートを書きます：
<style type="text/css"> |
次に、body で名前付要素自体を書きます：
<div id="foo"> |
アプリケーションによってはブラウザ毎に最適化したマークアップを動的に生成した方が簡単になります。
このテクニカルノートに含まれている DHTML API には genElt という、Internet Explorer, Mozilla, Netscape 6 では位置指定すると宣言した名前付 div を、Navigator 4.x では名前付 layer と ilayer を生成する関数があります。genElt 関数はマークアップを文字列として返します。大抵は他の文字列と連結されたり更にマークアップで囲まれたりした後でですが、その文字列は document.write() によって書き出すことができるものです。writeElt という同じような関数も同じようにしてマークアップを生成して書き出します。genElt と writeElt の唯一の相違点は genElt はマークアップを文字列として返す一方、writeElt はドキュメントウィンドウに直接書き出すという点です。
genElt と writeElt 関数はリファレンス用に次に列挙した、全く同じ引数をとります。
| name | 文字列 | 生成する要素の id |
| content | 文字列 | 生成する要素のタグの間に入れるコンテンツ |
| left | 整数値 | 生成する要素の左端位置を指定するピクセル値 |
| top | 整数値 | 生成する要素の上端位置を指定するピクセル値 |
| z | 整数値 | 生成する要素の z-index 値 |
| width | 整数値 | 生成する要素の幅のピクセル値 |
| height | 整数値 | 生成する要素の高さのピクセル値 |
| visibility | 文字列 | "visible" "hidden" "inherit"のいずれか |
| backgroundColor | 文字列 | 生成する要素の背景色 |
| backgroundImage | 文字列 | 生成する要素の背景画像 |
| clip | 文字列 | 上、右、下、左の順にならべた四つのカンマ区切り整数値 これで clip 属性を指定する。スペースを含めないこと！ |
| relative | 真偽値 | 真を渡すと相対的位置指定、偽なら絶対位置指定。 Navigator 4.x では layer か ilayer かを決める。(真が ilayer) |
| hideEltOnOlderBrowsers | 真偽値 | 真を渡すと古いブラウザの場合は空文字列を返すようにする |
| useDivInsteadOfLayer | 真偽値 | 真を渡すと Navigator 4.x でも i/layer でなく div を生成する |
| classname | 文字列 | 生成する要素の class 名 |
[訳注] ご想像の通り上から順に第１第２…引数です。分かり易いようにするために説明部は一部原文と変えています。
genElt と writeElt について注意すべき主な特徴を説明します：
関数の呼び出しと、Navigator 4.0, Internet Explorer 4.0, Netscape 6 でそれぞれ返されるマークアップの例を示します：
| 関数呼び出し | genElt ("foo", "テキスト") |
| Navigator 4.0 での返り値 | <LAYER ID="foo">text</LAYER> |
| Internet Explorer 4.0 での返り値 | <DIV ID="foo" style="position:absolute; overflow:none;">テキスト</DIV> |
| Netscape 6 での返り値 | <DIV ID="foo" style="position:absolute; overflow:none;">テキスト</DIV> |
| 関数呼び出し | genElt ("foo", "<H1>題名</H1><P>段落</P>") |
| Navigator 4.0 での返り値 | <LAYER ID="foo"><H1>題名</H1><P>段落</P></LAYER> |
| Internet Explorer 4.0 での返り値 | <DIV ID="foo" STYLE="position:absolute; overflow:none;"><H1>題名</H1><P>段落</P></DIV> |
| Netscape 6 での返り値 | <DIV ID="foo" STYLE="position:absolute; overflow:none;"><H1>題名</H1><P>段落</P></DIV> |
| 関数呼び出し | genElt ("foo", "コンテンツ", 50, 25, 1, 200, 100, false, "red", false, "25,250,125,50", false, false, false) |
| Navigator 4.0 での返り値 | <LAYER ID="foo" LEFT="50" TOP="25" WIDTH="200" HEIGHT="100" Z-INDEX="1" BGCOLOR="red" CLIP="50,25,250,125">コンテンツ</LAYER> |
| Internet Explorer 4.0 での返り値 | <DIV ID="foo" STYLE="position:absolute; overflow:none; left:50px; top:25px; height:100px; width:200px; z-index:1; background-color:red; clip:rect("25,250,125,50");">コンテンツ</DIV> |
| Netscape 6 での返り値 | <DIV ID="foo" STYLE="position:absolute; overflow:none; left:50px; top:25px; height:100px; width:200px; z-index:1; background-color:red; clip:rect("25,250,125,50");">コンテンツ</DIV> |
この関数の使用法と生成される要素の例が更に必要なら、自動テストスイートに含まれているこの関数の自動テストドキュメントを参照してください。
これらの関数で行っているように、document.write() 文によって位置指定する要素のマークアップを動的に生成しているのでしたら、以下の既知の問題と対策を知っておいて下さい。位置指定する要素のマークアップを動的に生成した場合、ブラウザがその要素の JavaScript オブジェクトの一部のプロパティを初期化するのに失敗するという報告があります。つまり、clip などの特定のプロパティを設定するマークアップを書き出したにもかかわらずブラウザによって無視されることがあるということです。
この問題に直面した場合の対応策はドキュメントの読み込み後に JavaScript を使って望みの値をプロパティに明確に指定することです。(ドキュメントの読み込みが終了するまでは当該エレメントのマークアップがパースされて対応する JavaScript オブジェクトが生成されているかどうか分からないので、ドキュメント読み込み後まで要素のプロパティを設定するのを待たねばなりません) ドキュメント読み込み後にコードを評価するには、読み込み完了時に呼び出される、ドキュメントの onload メソッド中でそのコードを呼び出してください。
xbdhtml.js 自動テストスイートにはこの問題と対策の実例が含まれています。テストドキュメントではいくつかの要素のマークアップを動的に生成するのに writeElt 関数を利用しています。その１つはテキストの書かれた赤い長方形です。この要素は自身の中身の大半を隠すように指定された clip 値をもっています。テスト中に、私は Internet Explorer 4.0 が clip プロパティを設定した動的生成マークアップを無視することに気付きました。この問題に対処するために、JavaScript で要素を取得してその clip プロパティを設定する次のコードを追加しました。
var frontElt = getElt ("frontelt"); |
確実にドキュメントロード後に呼び出されるように、このコードはドキュメントの onload イベント中で評価されます。
Mike Hall も、Navigator 4.x 上で動的に生成された layer の width と height プロパティでこれを経験したと報告しています。結局のところ、動的にマークアップを生成する場合は、ブラウザが一部のプロパティ設定を無視することがあるが、この問題は当該プロパティをドキュメント読み込み後に JavaScript で設定することで対応できるということです。
全てのブラウザで上手く機能する位置指定する要素を生成する３番目の方法は div を同名の layer で囲むことです。例を挙げます：
<layer name="foo"> |
Internet Explorer, Netscape 6, Mozilla は layer タグを無視して div タグのみを処理します。layer と div が同じ名前であるので、Netscape 4.x はこれらを一つの論理要素として扱います。Navigator 4.x では layer を、Internet Explorer, Netscape 6, Mozilla では位置指定すると宣言した div を使いたい場合に可能なもう一つの手法です。
DHTML ドキュメントのマークアップと構造の定義にどの方法を選んだとしても (div だけ、div または layer の動的生成、layer に囲まれた div のいずれか) ブラウザ毎に異なったものを出力する必要性に気付くと思います。古いブラウザとの後方互換を維持しようとする場合は特にそうなります。
例えば、Navigator 4.x は body= 文構造を用いることでメールの本文を設定した mailto: リンクの強力な拡張を提供しています。今 Navigator 4.x で見ているなら、動作確認するのにここをクリックしてください。しかしながら、この body= 引数は Navigator の古いバージョンでは無視されますし、Internet Explorer 4.0 はプラットフォームによってはこの機能をもったメールクライアントを統合していないので、確実には使用できません。ですから、この機能のを活用する場合、Navigator 4.x では body を指定した mailto: リンクを用い、Internet Explorer 4.0 や古いブラウザでは body を指定せずに、メール本文に何を書くべきかを説明した追加説明を入れたいと思うこともあるでしょう。
このテクニカルノートの JavaScript ライブラリである xbdhtml.js ではブラウザのベンダとバージョンをテストして動的にテキスト及び/または HTML マークアップの文字列を書き出す四つの関数を用意しています。これらの関数は 究極の JavaScript クライアント判別で定義された is オブジェクトと共に使用すると特に便利です。これらの関数を要約しましたのでご覧下さい：
| 関数 | コメント |
|---|---|
| dw(str, minVersion, maxVersion) | 関数名は"document write"の短縮です。ブラウザのバージョンが minVersion 以上 maxVersion 以下であれば str を document.write() します。例えば、次のように書くと Navigator 4.x と Internet Explorer 4 以降では"新しい！"、それより前のものでは"時代遅れ！"と出力します。
dw("<p>新しい！</p>", 4);
dw("<p>時代遅れ！</p>", 2, 3);
|
| dwb(str, aBoolean) | 関数名は"document write boolean"の短縮です。aBoolean が真であれば str を document.write() します。例えば、次のように書くとブラウザベンダ名が出力されます。
dwb("<p>Gecko</p>",is.gecko);
dwb("<p>Netscape</p>", is.nav);
dwb("<p>Microsoft</p>", is.ie);
dwb("<p>Opera Software</p>", is.opera);
|
| sv(str, minVersion, maxVersion) | 関数名は"string version"の短縮です。ブラウザのメジャーバージョンが minVersion 以上 maxVersion 以下であれば str を返し、そうでなければ空文字列を返します。ブラウザバージョン別の条件付のテキストやマークアップの連続する長い文字列を扱う際に用います。 |
| sb(str, aBoolean) | 関数名は"string boolean"の短縮です。aBoolean が真であれば str を返し、そうでなければ空文字列を返します。ブラウザバージョン別の条件付のテキストやマークアップの連続する長い文字列を扱う際に用います。 |
３つのブラウザは全て、位置指定すると宣言した名前付要素の CSSP プロパティを、ドキュメントオブジェクトモデル (DOM) を介して JavaScript から操作可能にします。しかしながら、Navigator 4.x, Internet Explorer, 及び W3C 標準それぞれの DOM は異なり、特定のブラウザで CSSP プロパティを設定する JavaScript コードは通常他のブラウザでは機能しません。
要素の CSSP プロパティ JavaScript から設定し、そのコードが全てのブラウザ間でうまく動作するようにするには３つのことをする必要があります：
このテクニカルノートでは xbdhtml.js という JavaScript 関数ライブラリを用意しています。(今すぐソースコードを見たいのであれば、API とこのテクニカルノートの表示とダウンロードの節をご覧下さい) このライブラリの目的は、Navigator 4.x と Gecko を搭載したユーザーエージェント及び Internet Explorer で要素を取得し基本的なプロパティの取得及び設定をする一つの纏まった関数群を提供することによって、クロスブラウザ DHTML 開発をより簡単にすることです。xbdhtml.js の関数の要約を書いた表を用意しました。最初の関数である getElt は Navigator 4.x, Mozilla, Netscape 6, Internet Explorer で要素の JavaScript オブジェクトを取得するものであり、最も重要なものです。他の関数は全て要素オブジェクトを引数にとり、そのプロパティを設定します。関数についての仔細はソースコード中のコメントをご覧下さい。
[訳注] xbdhtml.js 中のコメントなども和訳してあるのでご安心下さい。
| 関数 | コメント |
|---|---|
| getElt(name) or getElt(top-level-element-name ... grandparent-name, parent-name, name) |
名前付の位置指定する要素を表す JavaScript オブジェクトを取得します。 トップレベル要素では、引数には要素名 (その要素の id 属性値) を渡します。ネストした要素では、引数にはトップレベル要素から当該要素まで順に、親要素名リストを渡します。例えば、以下のコードはそれぞれ次の JavaScript オブジェクトを取得します。
var fooElt = getElt("foo");
var nestedElt = getElt("parent", "child");
|
| setEltVisibility(elt, value) | elt を表示するか非表示にするか、或いは親要素から visibility 属性を継承するか。value は"visible" "hidden" "inherit"のいずれかでなければならない。 |
| getEltVisibility(elt) | "visible" "hidden" "inferit"のいずれかの文字列を返す。 |
| moveEltTo(elt, x, y) | elt をそれが置かれた座標系での x,y ピクセル位置に移動させる。これは、トップレベル要素ではウィンドウ表示領域座標系に、絶対位置指定の親要素でネストした要素では親要素の座標系になります。 |
| moveEltBy(elt, x, y) | elt のオフセット位置を x,y のピクセル値で指定する。 |
| setEltLeft(elt, x) | elt の左端位置をピクセル値で指定する。 |
| getEltLeft(elt) | elt の左端位置をピクセル値で返す。 |
| setEltTop(elt, y) | elt の上端位置をピクセル値で指定する。 |
| getEltTop(elt) | elt の上端位置をピクセル値で返す。 |
| getEltPageTop(elt) | Nav4 の pageY と同機能のクロスブラウザ関数。 |
| getEltPageLeft(elt) | Nav4 の pageX と同機能のクロスブラウザ関数。 |
| getEltWidth(elt) | elt の幅をピクセル値で返す。 |
| setEltWidth(elt,width) | elt の幅をピクセル値で指定する。 |
| getEltHeight(elt) | elt の高さをピクセル値で返す。 |
| setEltHeight(elt,heigth) | elt の高さをピクセル値で指定する。 |
| setEltClip(elt, cliptop, clipright, clipbottom, clipleft) | elt の切り抜き部分を指定する。cliptop, clipright, clipbottom, clipleft は全て整数値で指定する。 |
| getEltClipLeft(elt) | elt の切り抜き部分の左端をピクセル値で返す。 |
| getEltClipTop(elt) | elt の切り抜き部分の上端をピクセル値で返す。 |
| getEltClipRight(elt) | elt の切り抜き部分の右端をピクセル値で返す。 |
| getEltClipBottom(elt) | elt の切り抜き部分の下端をピクセル値で返す。 |
| getEltClipWidth(elt) | elt の切り抜き部分の幅をピクセル値で返す。 |
| getEltClipHeight(elt) | elt の切り抜き部分の高さをピクセル値で返す。 |
| getCurrentWinWidth() | 現在のウィンドウの表示領域の幅をピクセル値で返す。 |
| getCurrentWinHeight() | 現在のウィンドウの表示領域の高さをピクセル値で返す。 |
| setEltZIndex(elt, z) | elt の z-index を指定する。z は正の整数。 |
| getEltZIndex(elt) | elt の z-index (正の整数) を返す。 |
| setEltBackgroundImage(elt, imageFilePath) | elt の背景に設定する画像のパスを imageFilePath で指定する。 |
| getEltBackgroundImage(elt) | elt の背景画像のパスまたは URL を返します。 但し、返される文字列値は Navigator 4.x, Internet Explorer, Gecko で同一ではありません。Navigator 4.x では"file:///F|/DHTML/xbdhtml/xbdhtml/images/redpole.gif"のような値が読み出せますが、Internet Explorer と Gecko では"url(images/redpole.gif)"のような値が読み出せるので、"images/redpole.gif"のような部分だけを切り取って返します。 |
| setEltBackgroundColor(elt, colorNumber) | elt の背景色に設定する clolorNumber を指定する。colorNumber は白を 0xffffff とするような整数表現の色か、"red"などの 16 の CSS1 標準色名のいずれか。 |
| getEltBackgroundColor(elt) | elt の背景色を整数値で返す。 |
クロスブラウザ互換のために特別注意を払わなければならない２つのプロパティは背景色と背景画像です。というのも、Navigator, Gecko, Internet Explorer はこのプロパティの実装に大きな違いをもっているからです。背景色を全てのブラウザで上手く設定するためのいくつかの心得を書きます。
位置指定する要素の背景色を、全てのブラウザで(要素中のテキストだけではなく)要素領域全体の後ろに表示するようにするには、ピクセル単位で width 及び height を要素自身のサイズと一致させた単独の 1x1 table を当該要素の中身にして下さい。要素中に置きたいものはなんであれ全て、その単一セル table 中に置いて下さい。
要素の背景色が静的なもので、ハードコーディングされており、決して書き換えないのであれば、その table で style="background-color: red"のような属性 ("red"の部分は人気色の名前か数値) を設定してください。その要素の背景色を JavaScript から設定可能にするには、table タグでこのように属性を設定してはなりません。
位置指定する要素の背景色プロパティを取得する際、Navigator 4.x は常に整数の色コードとして返します。Internet Explorer は 6 つの 16進数RGB値が続く"#"か、"red"のような色名のいずれか返します。Netscape 6 や Mozilla は"rgb(255,0,255)"のような rgb 文字列か、"red"のような色名のいずれかを返します。この非互換を解決するために、getEltBackgroundColor 関数は自動的に Internet Explorer や Gecko の返り値を Navigator 4.x で返される形式に揃えます。
ブラウザ間での背景色操作テクニックの更なる詳細については、JavaScript による CSS1 プロパティの設定テクニカルノートの中の背景色についての心得や、xbdhtml.js のソース中のコメントをご覧下さい。
W3C CSS1 勧告が出されてすぐ、Netscape と Microsoft はテーブルと透明画像を用いずに要素の配置を行う方法が必要だと判断しました。彼らは共同でカスケーディングスタイルシートポジショニング (CSSP) と呼ばれていた、要素の配置についてのドラフト仕様を書いて W3C に提出しました。これは後に W3C CSS2 勧告の中に含められたのです。
[訳注] テーブルと透明画像による要素配置というのは、実サイズ 1x1 の透過png/gif を縦横任意の大きさに拡大指定したものだけを含むセルを組み合わせることで強制的に"余白"を作り出して位置を制御するという方法。極力避けるべき手法。
Netscape 4.74 には致命的なバグがあります。style タグには、開きタグと閉じタグの間に少なくとも１つのスペースを入れる必要があり (例：<style> </style>)、そうしなければブラウザがクラッシュします。スクリプトを書く際には覚えておいて下さい。
xbdhtml.js のソースコードを表示したり、学習用の xbdhtml.zip や製品用のコメント無しバージョンの xbdhtml.zip をダウンロードすることもできます。このテクニカルノートをローカルにダウンロードしておきたいのでしたら、必要なファイルを全て含んだ WinZIP 互換の ZIP ファイルをダウンロードしてください。
[訳注] それぞれ和訳バージョンへのリンクになっていますのでご利用下さい。但し、訳しているのは必要部分だけで、コメントなどは原文のままです。
ここに用意したテストスイートではこれらの API 関数が全てのブラウザ間で互換の動作をすることを実証します。
この API はオープンソースの精神に乗っ取って提供されています。つまり、自由にダウンロード、再利用や変更することができます。この API をより洗練、拡張してクロスブラウザ DHTML 開発をより手軽なものにするため、将来のバージョンに反映できるように、このテクニカルノートと API の拡張や改良を Netscape に提案してくださるようにお願いします。