ブラウザのハーモニー


 インターネットが今のように普及してくると、ブラウザ(閲覧ソフト)はウィンドウズの中でも重要な地位を占めるのも当然のなりゆきであり、このブラウザの比較検討が今回とりあげたテーマです。数年前まではほとんど「ネットスケープ」の独占体制であったのが、マイクロソフト社の「インターネット・エクスプローラ」の登場により、シェアは急激な変化を遂げました。以来、これら2大ブラウザが市場を二分する状況へ、去年あたりからは同じ「ネットスケープ」でもまったく新しいバージョンが参入し、三つどもえの競争を繰り広げています。

 ほんらい自由競争は消費者にとってありがたいはずが、ことコンピュータの世界だとそうも言いきれません。結局、いろいろ騒がれながらもPC業界ではマイクロソフト社が事実上OS(オペレーティング・システム)市場を独占しているのは、そういった特殊な背景があるわけです。たとえば、いくら優れた機能を持つソフトでも、機能するためにはそれを動かすOSや、そのOSを動かすプロセッサはじめ様々なハードが不可欠であり、場合によっては新しいソフトが全体とバランスがとれず、結果として機能の低下を招く可能性さえ多々あります。
画像による目次はここをクリックして下さい
ネットスケープ4.7
画像による目次はここをクリックして下さい
ネットスケープ6
画像による目次はここをクリックして下さい
インターネット
エクスプローラ
 新車を買ったからと運転を習う必要はありませんが、新しいコンピュータは買ったものの使い方がわからないという経験は、みなさんも覚えがありませんか? あるいは、新車のラジオが故障したらディーラーや買った店へ持っていけば問題は解決するでしょうが、新しいコンピュータの場合は事情が違います。ソフトの問題を販売店や購入先へ問い合わせるとコンピュータの製造元に聞けと言われ、コンピュータの製造元へ問い合わせると今度はソフトの製造元に聞けと言われ、ソフトの製造元へ問い合わせてもOSの製造元に・・・・・・もし、ソフトを使うためのボードが組み込まれたようなケースでは、ここへボードの製造元が加わることは言うまでもありません。

 初心者からプロまでレベルを問わず、業者の間をたらい回しにされたあげく、数日を経て問題が解決しないぐらいは日常茶飯事なのがコンピュータ業界というわけです。こうして、あれやこれやの事情から一般消費者はなまじ新しいソフトより使い馴染んだ古いソフトを選ぶ傾向がある一方で、最近は多くの業者がベータ版(商品化前の新しいソフト)を一般公開しており、昔と違って試そうと思えば誰でも簡単にダウンロードできます。過半数を占める消極派と少数の積極派は両者が一体となり、ソフトを選別してゆく自然淘汰の中で主流は決定されるのです。

 ブラウザ市場を席捲する二大勢力ネットスケープとマイクロソフトが、それぞれ機能面で微妙な違いはありながら、ブラウザの目的がHTML(ハイパー・テキスト・マークアップ・ランゲージ)文書を表示することである以上、どちらを使おうと大差はないかといえば、そうでもありません。そして、同じネットスケープでも現在のバージョン4.7を発展させたバージョン5とその次世代のバージョン6を同時開発中、バージョン6が予想を上回る高性能に仕上がったためバージョン5を飛ばすという曰(いわ)くつきだけあり、バージョン6は相当「優れもの」です。つまり、ブラウザを動かす根本的なエンジンから新しく設計された反面、バージョン4.7と機能面での違いがはっきり出ています。

 ただし、まだベータ版のバージョン6は未完成の部分も多く、これから改良されてゆくとは思いますが、ともかく現状のままで一部の問題は対処が可能です。ホームページを持っているかたなら、自分の意図したペ−ジデザインはなるべく多くの読者に伝えたいはずであり、もし違うブラウザを使う読者へそれが伝わらないというのでは、おもしろくないでしょう。どのブラウザで見ても、できるだけ同じメージが表示されるよう注意すべき点はいくつかあります。その鍵となるのが「ネットースケープ4.7」(以下「NS4」)、「ネットスケープ6」(以下「NS6」)、「インターネット・エクスプローラ」(以下「IE」)の違いを把握しておくことです。

 そこで、いま主流となっているこれら3ブラウザのハーモニーを求める読者へ、大まかではありますが、筆者自身、体験上から注意している点を以下にご紹介しておきましょう。

改行タグ<br>と段落タグ<p> → 「NS4で行間のバランスはいいのがIEだと開きすぎるのはなぜ?」

これらのタグは、ふつう前者が1行、後者が2行の改行で使います。ただ、<br>は重ねて使うと2行、3回なら3行と、タグを使った回数だけ改行を繰り返しますが、もともと文節を区切るための<p>タグは使う場所やブラウザ次第で必ずしも効果が一定しません。ブラウザによってはテーブル<table>〜</table>のすぐ後で<p>を使っても効果がなく、たとえばNS4で行間のバランスは良かったのがIEだと開きすぎたりするのでご注意ください。そんな場合は<p>の代わり<br><br>を使うと、どちらのブラウザで表示しても行間が揃います。
 

段落タグ<p>の拡張機能 → 「NS6を使った時だけ段落最後の行が右よりになるのはなぜ?」

改行タグ<br>や段落タグ<p>は他の多くのタグと違って、もともと開始タグと終了タグを持ちません。ところが、<p>だけはHTMLのレベル3から開始タグと終了タグを使って段落テキストの位置を指定できるようになりました。以来、段落を右へ寄せたければ<p align=right>〜</p>で挟み、NS4やIEだと終了タグがなくても段落さえ変われば問題はなかったのが、NS6では注意しないと後の段落まで影響を及ぼします。NS6の場合のみ、なぜか段落最後の行が右よりなってしまう時など、その前に<p>タグを閉め忘れていないかお確かめ下さい。
 

NS4のみでサポートする機能 → 「文章が点滅しなかったり違うレイアウトになるのはなぜ?」

点滅タグ<blink>段組タグ<multicol>スペース・タグ<spacer>などはNS4でしか効果がなく、その大前提を踏まえて使わなくてはなりません。<blink>〜</blink>で挟んだ文字を他のブラウザで表示しても何ら変化せず、文字を点滅させない限りページの効果が半減するような場合は別の方法を考えたほうが無難です。点滅しないよりはしたほうが効果的ぐらいの認識でご使用ください。同じく<multicol>タグを使って段組した文章は読みやすくなりますが、NS4以外のブラウザだと(同社のNS6でさえ)無視されるため、やはり段組しないよりはしたほうが読みやすそう程度の使い方をお薦めします。スペースを制御できる<spacer>タグも、デザインにこだわるウェブマスターへは強力な武器でありながら、このタグを使っていくらバランスが良くなろうと、他のブラウザで見る限りせっかくの努力はむしろ逆効果となりかねません(代案として筆者が編み出したのは<img>タグと透明画像を組み合わせる方法です)。こうした一部のブラウザに機能が限定されるタグは、今後ますます主流から外れてゆくとみていいでしょう。
 

ISのみでサポートする機能 → 「マーキーやフローティング・フレームが表示されないのはなぜ?」

IEでしか使えない<marquee>タグ<iframe>タグも、それを踏まえた上で使わないと効果が半減します。<marquee>タグを使えばページの中へマーキ用の枠を作成し、その枠内でテキストが指定した方向(上下左右)にスクロールできたり、<iframe>タグを使えばページの中へ高さと幅を指定した四角いフレームセルを作成し、そこに指定したファイルが表示できる機能は、どちらもアイデア次第で用途が広くて魅力的な機能なだけ、それを表示できるブラウザとできないブラウザの差は決定的です。その差が及ぼす影響も先のNS4でしか使えないタグどころではなく、なぜ窓が表示されないのかいくら悩もうと答はでません。点滅しなかったり、レイアウトが変わっても文章は読めます。しかし、<marquee>タグでスクロールさせたい文章や<iframe>タグで作成したフローティング・フレーム(窓)へ表示される文章だと、IE以外のブラウザにまったく表示されず、それをどう対処するか?・・・・・・何かアイデアが浮かばない限り、これらのタグは避けておくのが賢明です。
 

スタイル・シート → 「指定したはずのフォントや文字のサイズが反映されないのはなぜ?」

一部のブラウザでしか使えない機能だからといって、必ずしも将来性がないとは限りません。HTMLのレベル3から拡張された「スタイル・シート」の場合、IEがサポートするだけでNS4は採用していなかったのが、NS6で使えるようになりました。今後の傾向として、この機能をサポートしないブラウザは無視すればよさそうですが、今のところはNS4を使う読者がまだ半数近くを占めています。スタイル・シートを使わないよりは使ったほうがいい程度の感覚でサポートしないブラウザも考慮しておけば、よりいっそう正確な意図を読者へ伝えられることは間違いありません。
 

<map>タグと<table>タグ → 「クリッカブルマップのメニューが途中から機能しないのはなぜ?」

せっかくNS4とIEのハーモニーが生まれたところへ新たな問題を投げかけるのはNS6、斬新な機能を備える裏で、これまで無関係だったタグの配置など、ちょっとしたことが問題の原因となったりします。たとえば、NS4やIEでは機能していたクリッカブルマップのメニューが、どういうわけかNS6だと途中から使えないような場合、まず考えられる原因はタグ同士の位置関係です。もっとも、<map>〜</map>内で設定する項目が「ハリウッド最前線のサイトマップ」ぐらい多くない限り、この問題は心配ありません。しかし、ある程度サイズが大きいテーブル内の画像で細かくリンクを設定しようと思えば、NS6だけはどこへクリッカブルマップを書き込むかが微妙です。NS4やIEだと、クリッカブルマップはテーブル外に置いたほうがデザインへ影響しなくて好都合ながら、あいにくNS6の構造は、それが通用する範囲は限られてしまいます。今まで機能していた(テーブル外の)クリッカブルマップが、どういうわけだかNS6では途中からリンクしないとしたら、とにかくクリッカブルマップを画像と同じテーブル内へ移してみて下さい。
 

<blockquote>タグと<center>タグ → 「NS6だと終わりの1行が中央寄せにならないのはなぜ?」

やはり、NS4やIEで機能していたことがNS6だと問題になるのは、文章左右の間隔を空けてインデントが設定できる引用文タグ<blockquote>とテキストの位置を中央へ設定できる中央寄せタグ<center>を使う場合、両者の位置関係です。全体に引用文タグを指定したページ最後へ、中央寄りのコピーライト行を加えるとします。両者は機能的な関連性がないゆえ、</blockquote>で引用文タグを閉じる前にコピーライト行を置き、その中央寄せを閉じる</center>は</blockquote>より後でも先でもNS4やIEなら問題はありませんでした。うっかりそのつもりでNS6を使うと、なぜコピーライトの1行が左へ寄るのかさんざん悩む羽目となりかねないのでご注意ください。このような事態と直面した時は、問題のテキストが「入れ子のタグを終了してから親タグに戻る」原則どおりの位置関係か確かめてみるといいでしょう。もし、「<blockquote>〜<center>〜</blockquote>〜</center>」の順だとNS6は</blockquote>の部分で<center>タグ機能をキャンセルするため、必ず「<blockquote>〜<center>〜</center>〜</blockquote>」の順序を守らなくてはなりません。
 

アニメーションgif → 「NS6でアニメーションの画像がちゃんと表示されないのはなぜ?」

画像の一部しか動かないアニメーションgifは、2コマ目以降をその部分だけで作ることができます。画像全体と比べたサイズの違いはコマ数が多いほどファイル容量へ響くため、動かない部分を省略するとしないでファイルの軽さは極端に違ってくるわけです。省略した各コマのコマンドが背景色の透明化やコマ送りのオプションをどう設定しようと、NS4やIEでは問題がありませんでした。そのアニメーションgifも、NS6の場合は設定次第で表示がおかしくなります。背景色の透明化を使わずコマ送りも「Removed by」が「Nothing」だと心配はありません。ところが、透かした背景で動く画像は、コマ送りの際、そのコマが次のコマへ重複しないよう背景あるいは前のコマと置き換える必要があります。NS6でいったいどうしたんだろうと驚かされるのは、このパターンです。1コマ目の全体像が本来は2コマ目以降も表示されるはずが、部分的な画像とそっくり入れ替わってしまうので話になりません。対策として、筆者は部分的な画像の代わり、すべてのコマをフルサイズで1から作り直しました・・・・・・まったく面倒をかけてくれるものです!

 以上の他、テキストをブラウザへ表示させないための<comment>タグはIEで機能してもNT4だと隠すつもりの文章が見えたり、<hr>タグの属性で指定した水平線の色はIEでしか効果がなかったり、ブラウザによってはリスト・タグフレーム・タグsrc属性を使えたり使えなかったり、細かい相違点をあげてゆくときりがありません。加えて、今回はあえて除外した「Javaスプリプト」も、getyearメソッドで呼び出した年がNT4とNT6だと西暦1900年を基準(0)にした数値であるのがIEの場合は西暦0年であったり、ブラウザ毎の仕様が異なる機能はまだまだあります。そうした違いの中から、とりあえず以上の点を注意するだけでブラウザ間の不協和音が少なからずハモり始めるはずです。

 もし、ふだん使っていないブラウザで自分のホームページを見比べ、何か疑問が生じたかたは、改めてこのアーティクル(記事)を読み返すといいかもしれませんね!?


お断り 

これらのテクニックを試される場合は、みなさん個人の責任でお願いします。何かの手違いからWindowsが動かなくなったとしても責任は取りかねますので、その点をご了承ください。

横井康和        


Copyright (C) 2001 by Yasukazu Yokoi. All Rights Reserved.

コンピュータとスキンシップ 目次に戻ります スライドショー