DHTML / Dynamic HTML
DHTML
DHTMLとは
Dynamic HTMLの略でHTML、CSS、JavaScript等を利用したコンテンツを指す動的コンテンツの概念です。
このJavaScript/CSSページ構成にあるサンプルは、ほぼ完全なDHTMLでCSSとJavaScriptの呼び出しにより内容の記述のみHTMLファイルに書いています。
DHTMLとXMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を組み合わせた技術にajaxがあります。
ちなみにXHTMLはXML＋HTMLで、この簡略版というかXML＋携帯情報端末用簡易HTML(Compact HTML)CHTMLが、XHTML Basicです。
クロスブラウザ対応
クロスブラウザとはブラウザを超えた実装の事です。
世の中には各ベンダーのブラウザや各OS対応ブラウザなど様々なブラウザが存在しますが、どんなブラウザでも最低限の閲覧および動作が可能なようにホームページを作成する事を念頭においた対応について考えてみます。
このような悩ましい考え方が生まれた背景にはHTMLをはじめとする各種ウェブ技術の標準化団体であるW3Cの規格を超えて各ベンダーがシェア獲得のための差別化戦略によるブラウザ機能の拡張を行ってきた事と各ベンダーの標準化対応のスピードの差、さらにウェブ技術が時を追うごとに進化していく過程における同ベンダーの同ブラウザのバージョンの違いなどがあります。
これらブラウザ間の挙動、振る舞いの違いはHTML、CSS、JavaScriptそれぞれに存在します。
この違いを加味してHTMLだけで作り込む手もありますが、静的なページしか作れなくなってしまう点とコンテンツが増えてくると編集、更新作業の手間が容易ではありません。
見た目やデザイン面ではCSS、動的なページや双方向性を持たせる意味からJavaScriptは手放すには惜しい技術です。
また選択の余地がある閲覧者は別として現実にはそのブラウザしか利用できないという事もあるので推奨ブラウザを提示するというのは根本的な解決策にはならないでしょう。
また、存在するすべてのブラウザで動作確認をするというのも現実的ではありません。
Ajaxを利用するにあたってもクロスブラウザについては考慮が必要となります。
クロスブラウザ対策
より多くの方に見てもらいたいと思いつつ現代においても結論の出ないこの対策の一例を挙げてみます。
- クロスブラウザを考えない
- HTMLだけクロスブラウザを意識してHTMLの静的ページとする
- HTMLとCSSのクロスブラウザ対策を考える
- HTMLとCSS、JavaScriptのクロスブラウザ対策を考える
- クロスブラウザ対策を加味してDHTML・Ajaxを利用する
- ...etc.
この違いを把握するにも完全に網羅されたものはほぼ存在せず、現状分析を行うにも情報量が多すぎて対応にあぐねているのが現状です。
<!-- doctype --> <html> <head> <title>ページのセンタリング</title> </head> <body> <div style="text-align:center ;"> <div style="margin-left:auto ;marign-right:auto ;"> <!-- コンテンツ --> </div> </div> </body> </html>
例えば、CSSにおいては、CSSハックなどと呼ばれる一部のブラウザのバグなどをうまく利用した裏技があり、オーソドックスなところでは、ページ全体の水平方向へのセンタリング(中央寄せ)において、本来、W3C の CSS仕様では、ブロックレベル要素は、その要素の margin-left と margin-right を共に auto に設定することでセンタリングされることになっていますが、IEでは、そうならず、他方、テキスト文字列の位置決めをするCSSプロパティ text-align を使うとIEでは、その内側の直後にあるブロックレベル要素にも適用されることから、IE対策として text-align を center としたブロックレベル要素の内側直後に margin-left と margin-right を共に auto に設定したブロックレベル要素を配置し、全てのコンテンツをこの内側に設定することでIE含む主要ブラウザ全般でページ全体のセンタリングが可能になるというものがあります。
この方法なら、仮にIEが、( text-align プロパティの設定をブロックレベル要素に反映させず、且つ、ネストした内側のブロックレベル要素内のテキスト文字列には影響を与えないという)バグ修正をしたとしても影響はないでしょうから、苦肉の策として講じたこうしたタグがそのままだったとしても影響はないでしょうが、常にそうした対策が存在するとは限らず、流用するバグややり方によっては、影響が出るケースもあるでしょう。
ちなみに当サイトの「ホーム」ボタンは、aタグによるアンカーリンクですが、「戻る」と「進む」ボタンは、JavaScriptによるものなのでブラウザでJavaScriptがOFFに設定されている場合、「戻る」と「進む」ボタンについては利用できませんし、また、「IT用語解説」、「MENU」というJPEG画像は、CSSによるスライドメニューとして使用していますが、IE6以前など比較的古いブラウザでは、機能しない場合がある為、これら2つのJPEG画像にaタグによるアンカーリンクを設定し、そうした場合でも一応機能するようにはしていますが、ほぼ同等の代替機能となると、あったとしてもにわかには思いつきません。
関連リンク
- HTML / HyperText Markup Language
- CHTML / Compact HTML
- DHTML / Dynamic HTML
- XHTML / eXtensible HTML
- XHTML Basic
