アップルのSafari開発チームは、Web標準の実装に力を注いできました。これは、Safariでのページの最適表示を保証する最も簡単な方法は、標準に従うことだということを意味します。そうすることが、Mozilla、Opera、MacintoshのInternet Explorerで最適な表示を保証することにもつながります。もちろん、これらのブラウザのそれぞれに、独自の細かい例外事項や避けられない解釈の違いがあるため、作成したサイトをこれらすべてのブラウザでテストすることも必要です。
ちなみに、Windows OS用に最も広く使用されているWindowsのInternet Explorerでは、Webデベロッパは、いくつかの標準でない手法を使用したり、レイアウトの相違を受け入れたりすることをしばしば要求されます。この状況が近い将来に変わるとは考えられないため、当分は、Webデベロッパはこうした問題に対処する必要があります。
この記事では、標準に準拠したWebサイトを作成する方法と、WindowsのInternet Explorerで生じるいくつかの問題に対処する方法について、実用的なヒントをいくつか提示します。
Webサイトのコーディングを始める前に、いくつか決定しなければならないことがあります。どのDOCTYPEを使用するか、 CSSのみを使用するか、それともCSSと最小限のテーブルを組み合わせて使用するかどうかです。これらについて解説してから、いくつかの設計ガイドラインと、XHTMLおよびCSSに関する検討事項に進みます。
Doctype
特定のDOCTYPE（StrictまたはTransitional）を使用することで、特定の種類のHTML（またはXHTML）を正しく実装していると主張することになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPEを宣言すると、検証プログラムはそれを確認します。ページを検証すると、検証プログラムは、対象のコードを、宣言されている準拠対象の構文と突き合わせてチェックします。マークアップがその標準に合っていないと、エラーメッセージが表示されます。
また、ほとんどのブラウザはdoctypeの切り替え機能を実装しています。ブラウザは、宣言されたDOCTYPEに応じて、ページをレンダリングする際にStrictモードとQuirksモードのどちらを使用すべきかを判断します。Strictモードでは、ブラウザはCSS仕様に厳密に従いますが、Quirksモードでは、標準に準拠する前の「古き悪しき時代」によく見られた、ブラウザ固有の例外的な動作がいくつか残っています。
一般には、Strictモードを選択するべきです。ヘルシンキ工科大学の便利な表に、最新のブラウザが各種のdoctypeをどのように解釈するかが示されており、これを参考にしてクロスブラウザ対応のdoctypeを選択することができます。また、A List Apartの記事、「Fixing your site with the right doctype」も参照してください。
StrictモードとQuirksモードの違いを完全に理解するには、次のドキュメントを参照してください。
Mac対応のExplorer 5に関する正式なリストはありませんが、CSSの権威であるEric Meyer氏が相違を要約しています。SafariはMozillaに従っています。
doctypeの切り替え機能はありますが、HTML（またはXTML）の種類を選択することが、依然としてDOCTYPEの最も重要な機能です。どの種類が適していると思いますか？旧来のHTMLでしょうか、それともより新しいXHTMLでしょうか？Strictでしょうか、それともTransitionalでしょうか？標準を厳守した実装にしたい場合は、Strictを選びます。若干の自由度が必要な場合は、Transitionalを選びます。フレームを使用する場合は、Framesetを使用する必要があります。たとえば、BBEditでは、次のメニューを使用して、希望するHTML（XHTML）を選ぶことができます。
W3SchoolsのXHTMLリファレンスとzvon.orgの比較ページでは、StrictとTransitionalで使用できるタグと使用できないタグの概要を提供しています。blackwidow.org.ukには、使用可能な属性の概要と、一般的な検証エラーのリストが示されています。
doctypeの使用経験がない場合は、XHTML 1.0 Transitionalを使用します。その場合はHTMLではなくXHTMLを使用する必要があるため、必然的に、標準に準拠したマークアップに向けて進むことになります。一方で、Strictよりも使用可能なタグと属性が多いため、実装は容易です。
Transitional DOCTYPEを使用するための正しいコードは、上記の宣言に示されています。
以下に、正確で有効なXHTMLを記述するための方法をさらに取り上げていきます。
ページレイアウト
ほとんどのWebサイトテンプレートは、複数のコンテンツブロックを使ってページレイアウトを行います。たとえば、下に示すように、ヘッダ、左側のカラムのナビゲーション機能、右側のカラムのメインコンテンツ、およびフッタなどのブロックがあります。
このページをコーディングしようとする場合は、これら4つのコンテンツのブロックのおおよその配置を決めることから始める必要があります。スタイルの詳細は後からでも構いません。まずは、コンテンツブロックがすべてのブラウザ、すべての解像度で正しく整列されることを確認する必要があります。これを行うには、2つの方法があります：CSSのみを使用する方法と、最小限のテーブルを使用する方法です。全般的にはCSSのみを使用するのが最適といえますが、問題点はあります。
CSSのみ
一般に、CSSで適切な水平方向のアラインメントを行うのは困難です。水平方向のアラインメントは完全にfloat宣言に依存します。この宣言は、最近のすべてのブラウザによってサポートされていますが、異なる2つのモデルに従ってサポートされており、同じモデルをサポートするブラウザ間にも若干の相違があります。
これらの問題は解決できないわけではありません。float宣言を使ってシンプルな4つのブロックからなるレイアウトをコーディングすることは十分に可能です。ただし、解決不可能なブラウザの非互換性の危険は、フローティングブロックを追加するたびに急激に増します。
CSSに関してよくあるもう1つの問題は、正確なページフッタを保証することです。ウインドウの高さよりも多くの領域をとっている長いページでは、フッタはナビゲーションブロックとコンテンツブロックの直下に表示される必要があります。その場合はコーディングは非常に簡単です。しかし短いページ、すなわち、ウインドウの高さに満たないページでも、フッタはビューポートの一番下に表示されるべきであり、これをコードで実装するのは非常に難しくなります。
長いページと短いページの両方でフッタを正しく動作させることは、CSSに関連してよく苦労する問題の1つです。
テーブル
テーブルを使用するとこの2つの問題をうまく解決できます。水平方向の正しいアラインメントは、Mosaic以来、テーブルの最も重要な長所です。テーブルにheight: 100%を指定し、フッタを入れるセルにvertical-align: bottomを指定すると、フッタはどのような状況でも正確に表示されます。
作成するWebサイトの視覚的なデザインに、複雑な水平方向のアラインメントや確実なページフッタが必要な場合は、最小限のテーブルを使用すると、複雑なブラウザの非互換性をうまく避けることができます。
ただし、最初からすぐにテーブルを使用するべきではありません。CSSのみを使用したクロスブラウザ対応のページを作成することを目指し、分からないことは遠慮なくcss-discuss.orgに質問してください。自分が試したCSSが動作しないことが分かったとしても、貴重な経験になります。
すべての状況でCSSのみを使用するには、すべてのブラウザがCSSを完全にサポートするまで待たなければなりません。誠実にCSSのみの使用を目指したにもかかわらず、コンテンツブロックのおおよその配置の段階で重大なブラウザの非互換性に直面した場合は、最小限のテーブルに切り換えます。
CSSと最小限のテーブル
ページの要素をすべてテーブルに配置していた古き悪しき時代では、ページが期待通りに表示されない場合は、既存のテーブル内にさらにテーブルを増やす必要が生じていました。ページが正常になるまで、このプロセスが繰り返されていました。その根底には、「ページに十分なHTMLを押し込めば最終的にはページは動作するだろう」という理論があったようです。その結果、無限のように長いダウンロード時間や、アップデートが不可能な無意味なマークアップにつながりました。
幸い、このコーディングスタイルはなくなりつつあります。とはいえ、先に示したように、CSSのみと比べて、テーブルのほうが優れている点もいくつかあるため、最小限のテーブルを使用するのが最適な妥協案といえます。最小限のテーブルを使用することで、コードの量をそれほど増やさずに両方の長所をとることができます。
最小限のテーブルの使用とは、テーブルの使用をできる限り抑えるという意味です。先のシンプルな4つのブロックからなるレイアウトを達成するには、次のコードだけで十分です。
<table>
<tr>
<td colspan="2">
<div class="header">
Header
</div>
</td>
</tr>
<tr>
<td>
<div class="navigation">
Navigation
</div>
</td>
<td>
<div class="content">
Content
</div>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: bottom">
<div class="footer">
Footer
</div>
</td>
</tr>
</table>
この最小限のテーブルで、4つのコンテンツブロックのおおよその配置はうまく処理されます。いくつかの扱いにくい問題を解決して、それ以外のデザインの細部のすべてをCSSによって自由に記述できるような骨組みができました。
このテーブルには改善すべき点が多数あります（ナビゲーションのwidth、フッタのvertical-alignなど）が、これはXHTMLではなくCSSの処理です。これ以上テーブルを増やす必要はありません。
一般に、TDそのものではなく、TDの内側のDIVに対してスタイル設定を行います。たとえば、ブラウザはTDに対するwidth宣言をアドバイスのようなものとして認識し、必要と判断した場合はそれをためらわずに却下します。しかしブラウザは、DIVに対するwidth宣言には常に従います。
唯一の例外はvertical-alignであり、これは必ずTDに対して宣言する必要があります。
XHTML
新しいWebサイトのコーディングを始める最適な方法は、紙の上でラフスケッチを作成することです。コンテンツブロックを描き、必要になるXHTMLとCSSについて簡単なメモを作成し、発生しそうな問題を予測します。ラフスケッチによって問題がすべて解決したり、大部分が解決するとも考えられませんが、これを作成することで自ずと論理的に考え、コードの概要を定義することができます。また、スケッチを作成することで、単にコードを書き始めるよりも、基本的な決定事項とその理由を覚えておきやすいことも分かります。
その後でXHTMLファイルを作成します。今までにXHTMLを使用したことがない場合は、まず、旧来のHTMLの考え方を捨て去ることから始める必要があります。幸いにも、HTMLからXHTMLへの移行はとても単純です。
- タグをすべて小文字にします（
<P>ではなく<p>に）。
- 空のタグも含めてすべてのタグを閉じます（
<BR>と<HR>ではなく<br />と<hr />に）。
- 属性名はすべて小文字にし、属性値はすべて引用符で囲みます。たとえば、
<TD COLSPAN=2>ではなく<td colspan="2">に、onMouseOverではなくonmouseoverに。
- 空の属性には値を指定します。たとえば、
<INPUT TYPE=checkbox CHECKED>ではなく<input type="checkbox" checked="checked" />に。
- タグはすべて正しくネストします。
これでHTMLはXHTMLになります。ただし、十分ではありません。DOCTYPEを選ぶことにより、Strict、Transitional、またはFramesetであることをはっきりさせ、選んだDOCTYPEの種類で使用可能なタグと属性だけを使用するようにしなければなりません。
準備ができたと思ったら、ページを検証します。W3Cの公式な検証サービスから始めるのが最も自然です。しかし、そのエラーメッセージは非常に冗長で、未経験者には分かりにくいことがあります。W3Cは、より分かりやすいエラーメッセージを提供する、新しい検証プログラムを実験しています。
エラーメッセージがよく分からない場合は、groups.yahoo.com/group/XHTML-Lに支援を要請してください。同じ問題に直面した人が今までにもいるはずです。
作成したXHTMLは完全に有効であっても、好ましくないコーディングが含まれている場合があります。明示的には禁じられていないとしても、推奨されていないいくつかの手法は避ける必要があります。
再度テーブルを利用
先に述べたように、ページのおおよその配置に最小限のテーブルを1つ使用するのは、まったく問題ありません。ただし最小限のテーブルを唯一のテーブルとしておくことが必要です。コードに複数のテーブルを挿入しないでください。テーブルを複数使用する必要はなく、CSSで処理できます。
この規則には1つだけ例外があります。テーブル形式のデータを表示する場合は複数のテーブルを使用しても構いません。たとえば、株価や、社員とその部署番号と電話番号の長いリストなどです。これらの一定のデータに対してのみ、コードにさらにテーブルを追加できます。
あるデータセットにテーブルが必要かどうか確信がない場合は、紙の上でどのように表示したいかを自問します。紙の上でもテーブルの使用が望ましいのであれば、そのデータはテーブル形式です。
Tagitis
tagitisとは多数の無用なXHTMLタグを増やしてしまうことです。たとえば次のヘッダはtagitisの状態です。
<h3><em>Header</em></h3>
余分な<em>タグは必要ありません。次の1行のCSSで同じ効果が得られます。
h3 {
font-style: italic;
}
ClassitisとDivitis
CSSコーディングの初心者によくある間違いとして、次のように<div>タグとclass属性を多用しすぎるということがあります。
<div class="header">
<div class="headerText">
<p class="headerP">This site uses CSS!</p>
</div>
</div>
このような複雑な構造は、99%は不要です。CSSを書き始めるときには、この規則の1%の例外に当てはまると考えるのではなく、これらを避ける必要があります。次のようなシンプルなXHTMLから始めます。
<div class="header">
<p>This site uses CSS!</p>
</div>
次の2つのCSSセレクタを使用します。
div.header {
/* スタイル */
}
div.header p {
/* スタイル */
}
これら2つのセレクタのスタイル設定を行うことで、ヘッダ全体のスタイルを設定できることが分かります。
ブラックリスト
旧来のいくつかのHTMLタグは廃止されています。これらに相当する優れたCSSがあるため、これらは使用すべきではありません。
フォント
<FONT>は使用する必要がありません。代わりに、以下を使用します。
body {
font: 0.8em verdana,sans-serif;
}
ただし、テーブルセル内のフォントサイズに関していくつかの問題があります。そこで、万全を期すためにこの宣言をすべての共通のテキストコンテナに拡大することもできます。
body,td,li,p {
font: 0.8em verdana,sans-serif;
}
スペーサーGIF
これまでで最も醜いHTML要素とおさらばすることができます。スペーサーGIFはもう不要になったのです。スペーサーGIFの目的は、テーブルセルを特定の最小幅に伸ばすことであり、古き悪しき時代に使用されていた雑然としたテーブル要素と複雑に絡み合っていました。それに、スペーサーGIFを1つ使用すると、さらに3ダース使用したくなり、次のようにコード量を増やすことになります。
<tr><td rowspan=7 width=10><img src="pix/spacer.gif" height=150 width=1>
</td><td width=150><font face=obscurica size=7>Welcome to my beautiful site
<td colspan=4 height=17><img src="pix/spacer.gif height=1 width=23></td></tr>
現在、CSSはすべての要素の幅を設定する、はるかに優れた方法を提供しています。ある問題に対してスペーサーGIFが唯一の解決策と考えているのだとしたら、自身のCSSの知識を少々アップグレードするときがきたということです。これについても、自力で行うのが難しい場合は、www.css-discuss.orgに相談するとよいでしょう。この道を通ってきた人が他にもいるはずです。
センタリング
旧来の<CENTER>タグもまた、安心して引退できます。CSSでは、テキストとコンテンツのブロックを問題なくセンタリングできますが、1つ落とし穴があります。
div.text内のテキストをセンタリングするには次のように記述します。
div.text {
text-align: center;
}
ブロック全体のセンタリングは注意が必要です。div.text全体をセンタリングする場合、正式なCSSの記述方法は次のとおりです。
div.text {
margin-left: auto;
margin-right: auto;
}
autoは、「必要なだけ」という意味です。<div>は、必要なだけ余白をとり、左右均等に分割します。その結果センタリングされます。
残念ながら、値autoは、WindowsのInternet Explorerではうまく機能しません。代わりにdiv.textを含んでいるブロックでtext-alignを使用する必要があります。
div.container {
text-align: center;
}
div.text {
margin-left: auto;
margin-right: auto;
text-align: left; /* 継承を行わない */
}
<div class="container">
<div class="text">
This entire block is centered
</div>
</div>
text-alignのこの使い方は標準に準拠したものではありませんが、WindowsのInternet Explorerで動作させるための唯一の方法なのです。そして当然ながら、divitisとclassitisがページにとって有効となる数少ない事例の1つです。
アクセシビリティ
XHTMLファイル全体を作成し、有効性を確認したら、アクセシビリティチェックを行うべきです。すべてのスタイルシートとJavaScriptをXHTMLから削除し、このスタイルのないページを注意深く観察してください。コンテンツは論理的な順番で並んでいますか？ナビゲーションは明瞭で使いやすくなっていますか？
コンテンツとナビゲーションが使いやすければ、最初のテストは合格です。完全なアクセシビリティを保証するためにはさらに多数のチェックを行う必要がありますが、この大まかなテストで、最も重要で重大な問題を把握することができます。
Bobbyでアクセシビリティ検証サービスが提供されていますが、その結果は明確でなく混乱することもあるため、アクセシビリティの専門家であるJoe Clark氏はその方法論を批判しています。さらに、アクセシビリティにかかわる多くの特徴（考えられる最もシンプルな言葉を使用するなど）はコンピュータでは検証できず、人間の目が必要です。
アクセシビリティ問題をさらに深く理解するには、W3Cの公式なWebコンテンツアクセシビリティガイドラインを参照してください。実用的なサンプルやヒントが必要な場合は、accessify.comのWebサイトが優れています。
CSS
CSSを適用するときにはおそらく、いくつかの問題に直面することになります。特にWindowsのInternet Explorerではそうです。
CSSのクロスブラウザ互換性問題にとりかかる前に、自分のスタイルシートを検証してください。このテストに合格すれば、問題の原因は間違ったコードではなく間違ったブラウザの実装であると確信できます。
ただし検証によって問題が解消されるわけではありません。おかしな動作に直面しても、バグを見つけたという想定はしないでください。たくさんの熟練者たちが協力してくれる、優れたcss-discussメーリングリストに相談してください。
それでもバグを見つけたと考えられる場合は、MysteryBugページの手順に従ってバグの切り分けを行い、定義します。通常は、仕様書のあいまいな詳細を間違って理解したことが分かります。
しかし、次のように、特にWindowsのInternet Explorerに関して重大な問題がいくつかあります（他のブラウザでは見られません）。
- ボックスモデル。WindowsのInternet Explorer 5はW3Cボックスモデルをサポートしていません。Explorer 6は、Strictモードでのみこれをサポートしています。W3Cボックスモデルは、ボックスの
widthを、このボックスのコンテンツがとる幅として定義します。従来のボックスモデルはwidthをボックスの境界、パディング、およびコンテンツに適用します。
- 高度なセレクタ。WindowsのInternet Explorerは子セレクタ(
>)、隣接兄弟セレクタ(+)、属性セレクタ(p[class])をサポートしていません。
- 高度な擬似クラス。WindowsのInternet Explorerは、擬似クラスの
:focusおよび:first-childはサポートしていません。
- 位置固定。WindowsのInternet Explorerは
position: fixedをサポートしていません。
- 背景画像の固定。WindowsのInternet Explorerは、
<body>以外の要素に対するbackground-attachment: fixedのW3C定義をサポートしていません。
- 最小値と最大値。WindowsのInternet Explorerは、
min-width、max-width、min-height、max-heightをサポートしていません。ただし、table-layout: fixedのテーブル内の<td>に対するmin-height宣言はサポートしているという非常に小さな例外があります（これは他のブラウザはサポートしていません）。
このような非互換性に対処する最適な方法は、ページの正確なレイアウトがそれらに依存しないようにすることです。このような問題のあるセレクタと宣言を、基本的なCSS宣言ではなく些細な追加としてのみ使用するのであれば、WindowsのInternet Explorerの非互換性を無視することができます。
たとえば、擬似クラスの:focusを使用して、フォーカスが置かれたフォームのフィールドのスタイルを定義できます。このような余分なスタイルを使うのは悪いことではありませんが、なくてもページには問題ないはずです。したがって:focusを使用し、WindowsのInternet Explorerのサポートの欠如を無視することができます。
1200ピクセルの画面幅いっぱいに横切るテキストは、通常は読みにくいものです。これを解決するには、max-widthを適用します。
body {
max-width: 600px;
}
これで本文に最大幅を指定したので、画面解像度が高くてもテキストは読みやすいままです。WindowsのInternet Explorerはmax-widthをサポートしていませんが、ユーザは、テキストの幅が広すぎると思ったらいつでもウインドウのサイズを変更できます。したがってこの宣言安全でもあるのです。
高度なセレクタがサポートされないと、面倒な場合があります。しかし、基本のスタイルに対してではなく、追加のスタイルにのみこれらのセレクタを使用することで、非互換性を回避できます。そうするとWindowsのInternet Explorerでは、いくつかの高度なスタイルは表示されませんが、基本的なページは表示されます。
Explorer 5のボックスモデルはもう少し基本的な不具合です。有名なボックスモデルハックを使用するか、または些細な相違は問題に値しないと判断することもできます。「Fluid thinking」が多くの問題の解決になることがあります。これは、ブラウザの非互換性を解決しようとするのではなく、違いを受け入れる、つまり、よりWeb的な考え方をするというものです。
これまでの中で最も重大な問題はposition: fixedです。Eric Bednarz氏が、CSSのみを使用したこの問題の解決策を見出しましたが、技術的にはややこしくなる可能性があります。たとえば、この解決策をとると、position: absoluteを通常どおりには使用できません。このソリューションを実装したい場合は、Eric Bednarz氏のページをよく読んでください。
JavaScript
JavaScriptは、CSSと比べると非互換性の問題はそれほど生じません。WindowsのInternet Explorerも含めて、最近のブラウザはすべて、古いLevel 0 DOMと最新のW3C DOMを確実にサポートします。しかしメーカー独自の2つのDOM、すなわちNetscapeのdocument.layersとMicrosoftのdocument.allは今後は、使用すべきではありません。SafariもMozillaも、これらのDOMはサポートしていません。代わりにDocument.getElementById DOMを使用します。
もちろんどのブラウザにも細かい問題はあります。W3C DOMの互換性表で概要を参照してください。
まとめ
標準規格はまだ、すべての状況下ですべてのブラウザによって完全にサポートされているわけではありませんが、標準に準拠したページを作成することは、すぐれた表示を保証する最善の方法です。いつものように、新しい技術を取り入れるための学習には時間がかかり、非互換性に苦労することもあります。それでも結果は、投資の価値が十分にあるでしょう。
リンク
W3C仕様：
Doctyp：
検証：
互換性表：
メーリングリスト：
アクセシビリティ：
役立つリンク：
- ミネソタ大学ダルース校によるWebデベロッパ向けの各種ツールの便利なリスト。
|
