JavaScript Examples
homeBack    homeHome
zipです
第4回
クロスブラウザ対応の表示&非表示テクニック

Webデザインのプロとアマの違いが出てしまうポイントのひとつはブラウザ間の違いに対する目配りだ。もし一種類のブラウザだけが相手ならIEとNNやWinとMacの違いなどを知る必要は無い。しかし、もし異機種混合空間であるInternet上に安全かつ効果的なコンテンツを作ろうと思うなら「クロスブラウザ」は必須のノウハウと言えるだろう。


■クロスブラウザって何?

 当Lab.では今月からクロスブラウザのテクニ
ックをシリーズ連載していく。今月はDynami
c HTML(DHTML)による表示&非表示テクニック
だが、その前に簡単にクロスブラウザの考え方
と利点について見ておこう。

 特定機種に依存しない、複数のOS間で互換性
をもつソフトウェアや技術をクロスプラットフ
ォームというが、クロスブラウザも同様の意味
だ。ブラウザ間の違いを吸収して、どのOSのブ
ラウザでも同じように動作するように調整する
ための技術だ。

たとえば、


 document.body.style.backgroundColor="red"


と書けば、IEならページの背景色が赤くなるの
だが、NN4やその他のJavaScript対応ブラウザ
では何の反応も無いかエラーになってしまう。
この場合は、


 document.bgColor="red"


のように書けばどんなブラウザでもJavaScript
対応なら動作する。つまり、前者は、IEだけに
実装された特殊な仕様というわけだ。その事情
を知らずに使ってしまうと、NN4で表示できな
いというだけに留まらずたとえばPalmやザウル
スなどのPDAやプレイステーション2などを含め
て今後登場する多くのJavaScript対応ブラウザ
でも意図しない表示をされてしまう可能性が高
いのだ。

 そして、特にレベルの高い処理をしようと思
ったときに使われるDHTML周辺でこのブラウザ
間の違いが際立っている。つまり、高度な処理
を使おうとするほどクロスブラウザの技術は避
けて通れないというのが現実なのだ。

 でも、それほど悲観することも無い。互換不
能なのではなく、クロスブラウザテクニックを
使えば動くのだから。



*下記サンプルは主に次の環境でDHTMLが動作するように作成されている。

////////////////////////////////////////////////////////////////////
   動作環境 
====================================================================
 Win  n4 n6 moz e4 e5 e6,
 Mac  n4 n6 moz e4.5 e5,
 Linux n4 n6 moz
--------------------------------------------------------------------

 Win 
 n3 -- NetscapeNavogator 3.x 
 n4 -- NetscapeNavogator 4.x 
 n6 -- NetscapeNavogator 6.x 
 moz -- Mozilla 
 e4 -- Internet Explorer 4.x 
 e5 -- Internet Explorer 5.x 
 e6 -- Internet Explorer 6.x 

 Mac 
 n3 -- NetscapeNavogator 3.x 
 n4 -- NetscapeNavogator 4.x 
 n6 -- NetscapeNavogator 6.x 
 moz -- Mozilla 
 e4.5 -- Internet Explorer 4.5 
 e5 -- Internet Explorer 5.0 

 Linux 
 n3 -- NetscapeNavogator 3.x 
 n4 -- NetscapeNavogator 4.x 
 n6 -- NetscapeNavogator 6.x 

--------------------------------------------------------------------


■Sample1
  見えない文字を見えるようにする

■Sample2-1
  見えるようにしたり見えなくしたりする

■Sample2-2
  Sample2のCSSをダイアログ風に修正(n4ではSample2と同じ)





■Sample3-1 
  ボタンクリックで文字を出す/消す

■Sample3-2  
  ラジオボタンクリックで文字を出す/消す

■Sample3-3  
  リンククリックで画像を出す/消す

■Sample3-4  
  リンククリックでリンクを出す/消す

■Sample3-5  
  ボタンクリックで入力フィールドを出す/消す

■Sample3-6  
  ボタンクリックでボタンを出す/消す

■Sample3-7  
  ボタンクリックでセレクトボックスが切り替わる

■Sample3-8  
  フォ−ムオプション選択で文字を出す/消す

■Sample3-9  
  リンクに触るとHELPを出す/消す

■Sample3-9-1 (CSSによる修飾はn4は無効)
  リンクに触るとダイアログ風HELPを出す/消す

■Sample3-10  
  リンクに触ると画像が切り替わる

■Sample3-11  
  リンクをクリックで画像やボタンが切り替わる

■Sample3-12 
  リセットボタンを押すとレイヤーを出す

■Sample3-13
  リセットボタンを押すとセレクトオプションを出す






JavaScript 資料




Toshirou Takahashi tato@fureai.or.jp