|
初級篇★ページ作りの基礎知識1. HTMLを書いてみよう VOL9. クロスブラウザについて考える
複雑な画面構成になるほどブラウザによって表示が違ってしまう場合が出てくるため、著しく違わないようにする必要が生じてきます。これについて配慮することをクロスブラウザといい、これまで主流だった IE と NN の他に、最近ではFirefox、Opera、Safari などの新しいブラウザも加わって来ていますので、ますますこの問題は解決しづらくなっていると言ってよいでしょう。ブラウザが増えただけでもやっかいなのに、スタイル・シート（CSS）によるデザインが普及しつつある現在では、HTML だけの問題ではなくなり、その解決法は更に複雑化していると言えます。実際、スタイルシートを使ったデザインでは、ブラウザの種類の他にバージョンの問題まで出てきますから、裏ワザやCSSハックをかけてすら解決が難しい場合もあるようです。 ともあれ、スタイルシートを使った場合の表示の違いについてはそちらを解説する時に詳しくお話するとして、ここではこれまでお話して来たHTML上で、IE と NN 、それぞれのブラウザでしか反映されないタグを使いながら、同様の効果を得る解決策をクロスブラウザの一例としてお見せしたいと思います。 一般にクロス・ブラウザの手順としては、 １．出来上がったページを複数のブラウザで表示してみる ２．表示に問題があれば、意図した通りに表示されるように修正するか、同様の効果が得られる方法を工夫する 無難な表現ばかり使っていたのでは進歩がありませんし、これを繰り返すことで自分なりの解決策を蓄積してゆくことは、今後、CSSを使ったデザインを取り入れてゆく過程でも重要なことになるので、普段からブラウザ間の表示の違いを意識するようにすることが大切です。
さて、このサイトでも Notice Board などで使っているスクロール文字、文字が画面上をテレビのテロップのように流れてゆくというアレですね。あの動く文字はアイキャッチのために使っているわけですが、これを表現する<marquee>タグは実は IE でしか動作しないものです。うちのサイトでは、IE を推奨しているとはいえ、それはあまりにページが多くてチェックが行き届かない部分もあるためで、出来ればNN でも同様に見て頂きたいと思っていることもあって、IE でしか正常に表示されない表現は極力使わないようにしています。けれども、この<marquee>タグは気に入っているので使ってみたい。そこでNotice Board では、NN でしか動作しない<BLINK>タグを併用して同様のアイキャッチ効果を出しながら、スクロール部分も著しく見栄えが変わらないようにしてあります。
Ⅰ. まず<marquee>タグで、テキストを動かしてみましょう。（※IEでご覧の場合のみ、動いています。）
このスクリプトは、以下のように書かれているだけです。 <marquee>ここに文字を入れる</marquee> 他の設定は何もしていないのですが、デフォルトで右から左へスクロールすることや速度などが定められているため、<marquee>タグだけでも、IEで見ていれば動作します。更に、<marquee>タグ内に以下のような属性を指定すれば、動き方を細かく設定することが出来ます。 ★ HEIGHT="文字表示範囲の高さ" ... 単位 : ピクセルor % ★ WIDTH="文字表示範囲の幅" ... 単位 : ピクセルor % ★ HSPACE="文字表示範囲の左右の余白" ... 単位 : ピクセル ★ VSPACE="文字表示範囲の上下の余白" ... 単位 : ピクセル ★ BEHAVIOR="scroll (alternate, slide)" ... 文字の動作 ※ scroll ... 文字が一方向にテロップのように流れて行く動作 alternate ... 表示範囲内で左右に動く動作を繰り返す slide ... 文字がスクロールしながら出て来て、表示範囲の片側に辿り着くと停止する ★ DIRECTION="right (left)" ... 文字のスクロールする方向 ★ LOOP="数値" ... 文字がスクロールする回数を指定 ★ SCROLLDELAY="数値" ... 文字が再描画されるまでの時間 ※ 単位は1/1000秒で、この値が大きいと動きは遅く、小さいと速くなる ★ SCROLLAMOUNT="数値" ... 文字が再描画されるまでの長さ ※単位はピクセルで、この値が大きいと動きは速く、小さいと遅くなる ★ BGCOLOR="#RRGGBB （or 色名）" ... 文字表示範囲の背景色
この他にも、インラインでスタイルを埋め込む方法でフォントの色や書体、サイズ、種類などを指定することも出来ます。 ★ STYLE="color: #XXXXXX; font-family: フォントの種類; font-size: フォントのサイズ; font-weight: 書体;"
Ⅱ. それぞれの属性に値を指定すると、実際には以下のように動作します。 ① HEIGHT, WIDTH ... 文字が表示される範囲を指定 ex1. <marquee width="200" height="16">
ex2. <marquee width="400" height="50">
ex3. <marquee width="600" height="100">
異なる幅が指定されているのは見ただけで分かると思いますが、これらの例のように高さ指定があっても、文字はその最上段をスクロールしてゆきますので、実際の表示では文字の下に余白が出来た状態に見えます。一般に、高さはex1.のように、文字の大きさ+２～4ピクセルくらいで指定しておけば良いでしょう。
② HSPACE, VSPACE ... 文字回りの余白を指定 ex. <marquee width="200" height="16" hspace="100" vspace="50"> 上の例では、ブルーで印が付いている部分が 200x16ピクセルの表示範囲、その回りに上下50px、左右100pxづつの余白が空いています。ここでは分かりやすくするために枠内に入れていますが、実際の表示では↓のように回りが空白になった状態に見えます。
③ BEHAVIOR, DIRECTION ... 文字の動作、方向を指定 ex1. <marquee width="200" height="16" behavior= "scroll" direction="right">
※ direction を指定しないでおくと、デフォルトで自動的に direction="left"となり、右から左へ流れますが、"right"を指定すると、↑の例のように左から右へと流れます。
ex2. <marquee width="200" height="16" behavior= "alternate" direction="right">
※ behavior="alternate"の場合は、動きが左右交互なので特にdirection を指定する必要はありませんが、指定すると最初に右から出てくるか、左から出てくるかが違ってきます。
ex3. <marquee width="200" height="16" behavior= "slide" direction="right">
※ behavior="slide"の場合は、スクロール範囲の終点に辿り付くと動作が停止します。derection="right"では左から出て右へ停止、"left"ではその逆になります（画面ではこの例は既に停止していると思いますが、ブラウザの更新ボタンを押せば動きを見ることが出来ます）。
④ LOOP ... 動作の繰り返しを指定 繰り返し回数を指定する LOOP は、behavior で指定した動作の種類によって繰り返し方が違ってきます。 ※ scroll の場合は、指定した回数だけスクロールすると、文字は画面に戻ってこなくなるので消えた状態になります。 alternate の場合は、端から端までの動作を１回として、指定回数分だけ動いて画面上で停止します。 slide は１回限りの動きですので、LOOPは指定しません。敢えて指定すると動きがおかしくなります。 なお、LOOP は何も指定しないとデフォルトで無限繰り返しが設定されていますが、LOOP="-1"と指定しても、これと同じ状態になります。
⑤ SCROLLDELAY, SCROLLAMOUNT ... 動作の速度を指定 <marquee>タグでの文字の動きは、アニメーションと同じように一定の時間、もしくは距離ごとに文字の位置を変えて再描画することで、動いているように見せているわけですが、scrolldelay では、1/1000秒単位で一旦文字が消えてから次の位置に現れるまでの時間を指定し、scrollamount では、その時間の間に何ピクセル動いたかを指定しています。 ですから、再描画までの時間は短い方が速く動いているように見え、移動距離は大きい方が速く見えるということになります。また、再描画までの時間が長いということは、画面から消えている時間が長いということですから、この値を大きくすると↓の例のように、コマ送りで段階を追っている様子が視覚的に感じられるような動きになります。 ex1. <marquee width="200" height="16" scrolldelay="400" scrollamount="6">
また、scrollamountの値を小さくすると、再描画されるまでの移動距離が小さくなるということですから、遅くても動きは滑らかになります。 ex2. <marquee width="200" height="16" scrolldelay="85" scrollamount="1">
なお、何も書き込まなかった時にはデフォルトで、scrolldelay="85"、scrollamount="6"を指定したのと同じ動きをします。
⑥ BGCOLOR ... 文字表示範囲の背景色を指定 ex. <marquee width="300" height="16" bgcolor="#ccffff">
>>色指定に関しては、初級篇Vol3.知っておきたい色指定の基礎知識 を参照して下さい。
⑦ STYLE ... 表示される文字の色、書体、サイズ、フォントの種類を指定 Front Pageで、このような文字の動きを設定すると、フォント指定はスタイルをインラインで埋め込む方法で自動的に記述されます。 ex. <marquee width="200" height="16" style="color: #0000FF; font-family: MS Pゴシック; font-size: 12pt; font-weight: bold;">
しかし、この方法ですと、NNで表示した時に無視されてしまいますので、以下のようにタグを加えて修正する必要があります。
Ⅲ. NNでも、文字表示が著しく異ならないように修正し、別の方法でアイキャッチ効果を加える。 フォントをインラインのスタイルで指定した場合、NNでは<marquee>タグそのものが無視されて反映されませんので、同じ文字で表示させようとすれば、<marquee>タグの前後にNNでも反映される<font>タグや<b>タグを加えておく必要があります。↑の例の場合、 <font face="MS Pゴシック size="3" color="0000FF"><b><marquee>～</marquee></b></font> 以上のようにしておけば、NNでも、文字が著しく変わってしまうということはなくなります。ただし、フォントの種類については、見る側のパソコンに指定したフォントが入っていなければ、IE でも、NNでも、同様にその指定は無視されますので、あまり凝ったフォントは予め指定しない方が無難でしょう。 これで文字の見た目は同じになりますが、動きは出ませんのでアイキャッチ効果は期待できません。そこで、NNでだけ動作する<BLINK>タグを使って、点滅表示を加えてみます。 <blink><font face="MS Pゴシック size="3" color="0000FF"><b><marquee>～</marquee></b></font></blink>
このように、全体を<blink></blink>で囲ってしまうと、NNでは文字はスクロールする代わりに点滅し、IEでは逆に<blink>タグが無視されますので影響はなく、スクロール表示になっているはずです。なお、Notice Boardでは、文字そのものを点滅させるのではなく、文字の横の「★」を点滅させることで、アイキャッチ効果を出しています。 <marquee>ここに文字を入れる</marquee><blink>★</blink>
以上のように、HTMLだけでも表現によってはブラウザごとの表示の違いを解決するのは結構面倒ですが、各ブラウザやバージョンごとに対応が著しくまちまちなCSSを使うと更に問題が深刻化してしまいます。けれども、視覚性はHPにおいて大変重要な要素ですので、どのブラウザで見ても著しくデザインが崩れない表現をするためにも、ふだん自分が使っているブラウザばかりではなく、他のブラウザでもチェックする習慣をつけて、クロスブラウザを心がけてゆきましょう。
|
2006.8.10.+ 8.15-8.16.
