前回ピクニックに行ったとき、あらゆる場所に細心の注意を払ってアリ対策をしました。しかし、それでも無駄でした。あの小さな厄介者たちはどこにでも現れたのです。完璧に書かれたHTMLコードでも同じことが起こる可能性があります。たとえコードが完璧だと確信していても、ブラウザはせっかく丁寧に作り上げたデザインを台無しにしてしまう可能性があります。
ウェブページにバグが入り込む方法は様々です。PCではきれいに見える小さなフォントが、Macでは小さく見えるかもしれません。ページのセクション間に追加したスペーサー行が、Netscape Navigatorでは消えてしまうかもしれません。また、ページ上の正確な比率で調整された見出しや小見出し（例： ‹font size=4›、 ‹font size=3›、 ‹font size=2› ）が、異なるマシンでは異なって見えるかもしれません。
原因はHTMLの書き方のスキルにあると簡単に思いがちです。誰もが一度はコードで明らかなミスを犯したことがあるはずです。しかし、ブラウザのせいである場合もあります。ブラウザによってHTMLの処理方法や読み取り方法が異なるため、ページのレンダリング結果に影響が出ることがあります。さらに、ユーザーがブラウザのフォント設定を変更している場合もあります。16ポイントのCourierフォントですべてを読むことを好む人もいます。その場合、デザインが崩れてしまう可能性があります。
Web開発者は、あらゆるプラットフォームのあらゆるブラウザで誰でも読めるページを構築するという課題に直面しています。では、 バグに悩まされることなく、どうすればそれを実現できるでしょうか ？答えは簡単です。レンダリングにおける最も大きなバグを覚えておき、それらを回避することです。この記事では、最も一般的な問題をいくつか挙げ、それらを回避するHTMLの記述方法を説明します。（ポイントを説明するためにHTMLの行を掲載していますが、完全なコードを確認したい場合は「完全なコード」をご覧ください。）
問題: フォントの不一致
ユーザーがブラウザのフォント設定をあれこれいじくり回すのには、いくつかの理由があります。多くのWeb開発者が小さなフォントに惚れ込んでいること、そしてMicrosoft Internet Explorerがブラウザのツールバーに「大きくする」と「小さくする」のフォントボタンを追加したことなどが挙げられます。その結果、多くのWeb訪問者が、テキストが読めるまで「大きくする」ボタンをクリックすることで、デザイナーが細かく指定したフォントを無効にしています。その結果、行間が肥大化し、小見出しが崩れるなど、レイアウトのバランスが崩れてしまうことがあります。
解決策: 柔軟なHTMLタグを使用する
訪問者のブラウザでテキストの表示を常に一定に保つ唯一の方法は、各ページを1つの大きなGIFファイルにすることですが、これは非常に非現実的です。より現実的な解決策は、HTMLを簡素化してフォントの不具合を防ぐことです。小さなテキストが必要な場合は、 ‹small› タグを使用します。ブラウザはユーザーのデフォルトフォントを基準にテキストのサイズを調整します。例えば、デフォルトフォントが12ポイントの場合、小さいフォントは10ポイントになります。
ページに様々なフォントサイズを組み込む場合は、 HTMLの見出しとして「big」タグ と 「small」 タグを使用します。これらのタグは、訪問者のブラウザのデフォルト設定に比例して拡大縮小されるため、訪問者のフォント設定が大きくても小さくても、レイアウト全体の比率が維持されます。 「font size=”+2″›」 や 「font size=”-1″›」などのタグは、 それほど美しく拡大縮小されません。
問題: レイアウトの移行
理論上、Webページの最初の要素（表、グラフィック、その他）は、ブラウザウィンドウの左上隅を原点とする必要があります。これは事実ですが、正確ではありません。ブラウザは余白を追加するため、レイアウトは左上隅から数ピクセル離れてしまいます（「レイアウトのずれ」を参照）。レイアウトを左上隅から開始し、上や左に余白を作らないことが重要である場合、このブラウザのオフセットによってデザイン全体が台無しになる可能性があります。
 |  |
| レイアウトのドリフト ブラウザが レイアウトを数ピクセル下および右にシフトするのを防ぐには、 HTML コードに マージン属性 ( marginwidth、 marginheight、 leftmargin、 topmargin ) を追加します。 |
ブラウザがレイアウトに追加する余白の量は、ユーザーのプラットフォームによって異なります。Macでは、Navigatorでページを表示する場合でもInternet Explorerでページを表示する場合でも、レイアウトは下に8ピクセル、右に8ピクセル移動します。PCユーザーの場合はさらに状況が悪く、PC版Internet Explorerでは下に10ピクセル、右に15ピクセル移動します。
解決策: マージン属性を追加する
ブラウザオフセットは、比較的簡単に対処できるデザイン上の問題の一つです。 ‹body› タグにマージン属性を追加するだけで済みます。必要な属性は4つです。
marginwidth は 、ブラウザ ウィンドウの左端と HTML ドキュメント本体内の項目との間のスペースのピクセル数を決定します。
marginheight は 、ブラウザの上部に対する項目の配置を設定します。
leftmargin は ブラウザに左余白のピクセル幅を伝えます ( marginwidth 属性と同様)。
topmargin は ブラウザに上余白のピクセル幅を伝えます ( marginheight 属性と同様)。
属性タグが重複しているように見えますが、Internet Explorer 3.0は marginwidthタグ と marginheight タグをサポートし、4.0ブラウザは leftmarginタグ と topmargin タグをサポートしているため、4つすべてが必要です。残念ながら、ユーザーがNavigator 3.0でサイトにアクセスしている場合は、残念ながらそのブラウザではoffsetタグを除外できません。
問題: 表のセルを縮小する
HTMLの表は、Web開発者が表形式のデータを整然とフォーマットできるようにするために設計されました。 表を使ってページレイアウトを制御することは本来 想定されていません。しかし、だからといって、表の誤用による動作の不具合について文句を言うことができないわけではありません。
表に関する最も一般的な不満の一つは、表のセルのサイズが維持されないことです。（これはInternet ExplorerよりもNavigatorビューアで多く発生します。）表を作成する際は、表全体の幅と構成セルの幅の両方を設定する必要があります。こうすることで、ブラウザが各セルの幅を正しく認識し、表のレンダリングを高速化できます。そうしないと、ブラウザは表の内容を読み取ってセルを比例的に拡大縮小しようとしてしまいます。
しかし、Navigator では表の作成時に問題が発生する場合があり、場合によってはセルが縮小されることもあります。セルの内容がセル自体の幅よりも小さい場合、ブラウザはセルを内容の幅に合わせて調整します。
解決策1: セルのコンテンツを適切なサイズにする
セルが縮小されないようにする 1 つの方法は、次のサンプル セルのように、セルのサイズを維持するように強制するコンテンツでセルを埋めることです。
サンプル1: ‹td width=”20″› ‹/td›
サンプル2: ‹td width=”400″›‹img src='banner.gif' width=”400″›‹/td›
最初のサンプルは、セルをスペースや余白として使用する場合に便利な、 ノーブレークスペース（ ） の使い方を示しています 。2番目のサンプルには、セルと同じ幅のグラフィックが含まれています。
解決策2: レイアウトを柔軟にする
セルの縮小問題を回避する2つ目の方法は、正確なセルサイズを気にしなくてもよいようにレイアウトを変更することです。必要に応じて拡大縮小できるテーブルの例については、「柔軟なレイアウト」をご覧ください。
問題: セルの内容がずれている
表に関するよくある不満のもう一つは、セルの内容が意図したとおりに揃わないことです。例えば、2つのセルの内容を隣接させたいのに、セル間に空白が残ってしまうことがあります。
解決策1: デフォルトのテーブル属性に満足しない
ブラウザのデフォルト属性は、 表のセルパディングが1ピクセル、表のセル間隔が1ピクセル、valign=top、 align =leftです。これらのデフォルト設定は表の見栄えを悪くする可能性があるため、レイアウトに合わせて適切な値を設定するのはユーザーの責任です。属性の調整方法の例については、「Malignant Alignment（悪意のある配置）」をご覧ください。
解決策2: コードをコンパクトにする
テーブル属性を微調整した後、最終結果は Internet Explorer では適切に表示されるものの、Navigator では正しく表示されないことがあります。これは、Navigator が改行と強制改行に余分な空白を挿入するためです。
コードを圧縮することで、こうした空白文字をなくすことができます。つまり、余分な改行、強制改行、タブを削除します。圧縮は、 ‹body› タグや ‹table› タグ内のテキストのフォーマットには影響しません。個々のタグ間のスペースを整理するだけです。圧縮後のコードは次のようになります。
‹! doctype html public “-//w3c//dtd html 4.0 transitional//en” “http:// www.w3.org/tr/rec-html40/loose.dtd”› ‹html›‹head›‹title›table test #2 ‹/title›‹/head›‹body bgcolor= “#FFFFFF” marginheight=”0″ marginwidth=”0″ leftmargin=”0″ topmargin=”0″›‹table width=”360″ cellspacing=”0″ cellpadding=”0″ border=”0″›‹tr valign=”bottom”› ‹!–ここに表の内容を配置–› ‹/tr›‹/table›‹/body›‹/html›
人間にとっては読みにくいですが、ブラウザにとってははるかに見やすくなります。ヒント：Bare Bones Software の BBEdit を使用している場合は、「ユーティリティ」メニューの「テキストのフォーマット」オプションを使用してコードを圧縮できます。それ以外の場合は、空白を自分で削除する必要があります。
バグのないページの秘訣
バグのないページを書くための本当の秘訣はシンプルです。複雑なページを作らないことです。ページの視覚的な属性を制御するためのデザイン言語としてHTMLを使用するのは、控えめに言っても非常に難しい作業であり、多くのトリックを使えば使うほど、バグに遭遇する可能性が高くなります。
これは、HTMLでデザインの限界に挑戦することを諦めるという意味ではありません。しかし、オンラインで最先端のデザインを実現したいと真剣に考えているのであれば、Macromedia Flashなど、Webページの外観を自在にコントロールできるテクノロジーの使用を検討してみてはいかがでしょうか。
一方、シンプルな HTML を記述することには、ある種の禅的な魅力があります。ページを魅力的で独創的に見せることに集中でき、異なるブラウザー間でも見た目が一貫していることを安心できます。
オンラインシニアエディターのリサ・シュマイザーは、屋外でのコーディングを好みます。著書に『The Web Design Templates Sourcebook』（New Riders、1997年）、『The Complete Website Upgrade & Maintenance Guide』（New Riders、1998年）があります。
2000年4月 ページ: 106
完全なコードブラウザオフセットコード
上記のブラウザ オフセットを表示するために使用した HTML ドキュメントは次のように記述されています。
<! doctype html public “-//w3c//dtd html 4.0 transitional//en” “http://www.w3.org/tr/rec-html40/loose.dtd”> <html> <head> <title>ブラウザオフセットテスト #1</title> </head> <body bgcolor=”#003366″> <table width=”600″ cellpadding=”0″ cellspacing=”0″ border=”0″ bgcolor=”#FFFFFF”> <tr valign=”top”> <td width=”600″> </td> </tr> </table> </body> </html>
新しい非オフセットバージョンは次のようになります。
<! doctype html public “-//w3c//dtd html 4.0 transitional//en” “http://www.w3.org/tr/rec-html40/loose.dtd”> <html> <head> <title>ブラウザオフセットテスト #1</title> </head> <body bgcolor=”#003366″ marginheight=”0″ marginwidth=”0″ leftmargin=”0″ topmargin=”0″> <table width=”600″ cellpadding=”0″ cellspacing=”0″ border=”0″ bgcolor=”#FFFFFF”> <tr valign=”top”> <td width=”600″> </td> </tr> </table> </body> </html>表属性の確認
以前の表は次のとおりです。
<! doctype html public “-//w3c//dtd html 4.0 transitional//en” “http://www.w3.org/tr/rec-html40/loose.dtd”> <html> <head> <title>表のテスト test #1</title> </head> <body bgcolor=”#FFFFFF” marginheight=”0″ marginwidth=”0″ leftmargin=”0″ topmargin=”0″> <table width=”400″ cellspacing=”4″ cellpadding=”4″ border=”1″> <tr> <td width=”200″ valign=”top” align=”left”><IMG SRC=”images/block1.gif” ALT=”block1″ WIDTH=”180″ HEIGHT=”180″ BORDER=”0″></td> <td width=”200″ valign=”top” align=”left”><IMG SRC=”images/block3.gif” ALT=”block3″ 幅=”180″ 高さ=”180″ ボーダー=”0″></td> </tr> <tr> <td width=”200″ valign=”top” align=”left”><IMG SRC=”images/block4.gif” ALT=”block4″ 幅=”180″ 高さ=”180″ ボーダー=”0″></td> <td width=”200″ valign=”top” align=”left”><IMG SRC=”images/block2.gif” ALT=”block 2″ 幅=”180″ 高さ=”180″ ボーダー=”0″></td> </tr> </table> </body> </html>
後の表は次のとおりです。
<! doctype html public “-//w3c//dtd html 4.0 transitional//en” “http://www.w3.org/tr/rec-html40/loose.dtd”> <html> <head> <title>表のテスト test #2</title> </head> <body bgcolor=”#FFFFFF” marginheight=”0″ marginwidth=”0″ leftmargin=”0″ topmargin=”0″> <table width=”360″ cellspacing=”0″ cellpadding=”0″ border=”0″> <tr valign=”bottom”> <td width=”180″ align=”right”><IMG SRC=”images/block1.gif” ALT=”block1″ WIDTH=”180″ HEIGHT=”180″ BORDER=”0″></td> <td width=”180″ align=”left”><IMG SRC=”images/block3.gif” ALT=”block3″ WIDTH=”180″ HEIGHT=”180″ BORDER=”0″></td> </tr> <tr valign=”top”> <td width=”180″ align=”right”><IMG SRC=”images/block4.gif” ALT=”block4″ WIDTH=”180″ HEIGHT=”180″ BORDER=”0″></td> <td width=”180″ align=”left”><IMG SRC=”images/block2.gif” ALT=”block 2″ WIDTH=”180″ HEIGHT=”180″ BORDER=”0″></td> </tr> </table> </body> </html> 悪性アライメント
セルコンテンツ間の不要なスペースを削除するには、次の手順に従います (変更前と変更後の完全な HTML については、「完全なコード」を参照してください)。
 |  |
| 前に | 後 |
表の内容に合わせて表の幅を変更します。
valign 属性は各セルで一貫しているため、テーブル行に移動し、一番上の行の画像を行の下部と垂直に揃えるように設定します。
‹表の幅=”360″ セル間隔=”0″ セルパディング=”0″ 境界線=”0″› ‹tr valign=”bottom”› ‹/tr› ‹tr valign=”top”› ‹/tr›‹/table›
セルが左側にある場合は右に押し、右側にある場合は左に押してセルを揃えます。
柔軟なレイアウト
サイト訪問者に意図した通りのデザインを確実に見せるのは難しい場合があります。訪問者に応じて変化するデザインを作成する方が簡単な場合もあります。表の場合、縮小可能なセルの行を作成するのが一つの方法です。
この例では、表の左側に空白スペースを設けたかったので、左側の列を次のようにフォーマットしました: ‹td width=”20″› ‹/td›。このようにコードを記述することで、柔軟性が生まれます。列の幅は20ピクセルにするか、コンテンツのサイズに合わせて縮小するかを選択できます。この場合、1つのノーブレークスペース ( ) が適用されます。ノーブレークスペースのサイズは、ユーザーのブラウザのフォントサイズ設定に依存します。
 |
| ブラウザを出し抜く この表の左列を縮小するブラウザでも、レイアウトが崩れることはありません。ただし、列が消えないようにするには、ノーブレークスペースを挿入する必要があります。 |
セルの幅に基づいてセルサイズを読み取って設定するブラウザは、列幅を20ピクセルに設定します。一方、セルコンテンツの幅のみに基づいてセルサイズをレンダリングするブラウザは、列幅を非改行スペースのサイズに縮小します。列の目的はページの左側に空白のバッファを提供することであるため、このページはどのブラウザでも適切に表示されます。
