Div+CSS Webページレイアウトを適用してWeb標準に準拠したWebサイトを作成する場合、いくつかの問題が発生しやすくなります。
問題がどこにあるのか誰もがわかるように、ここで要約しましょう。
1. CSS 検証の問題
私たちがデザインする Web ページはすべて、XHTML 標準と CSS に準拠し、W3C 検証に合格することを望んでいます。 CSS2.0 検証に失敗したものもあります。主な検証エラーは次のとおりです。「行: 0 フォント ファミリ: 最後の選択肢としてタイプ ファミリを指定することをお勧めします。」
W3C では、フォントを定義するときは、単一のフォントではなく、フォントのカテゴリで終わるようにすることを推奨しています。たとえば、「sans-serif」を使用すると、Web フォントをさまざまなオペレーティング システムで表示できるようになります。
bodyタグには「sans-serif」を定義する人が多いですが、他のIDやクラスで再度フォントを定義する際にsans-serifを省略すると検証に失敗するとみなされます。この間違いはそれほど深刻なものではなく、少し注意することで回避できます。
2. CSS の書き方の提案
CSS ファイルにコメントを追加します。コメントは将来のメンテナンスに便利です。できるだけ多くのコメントを CSS ファイルに追加することをお勧めします。追加するバイト数が少ないことを心配する必要はありません。 CSS 構文をできるだけ短くするようにしてください。たとえば、カラー値「#FFFFFF」は「#FFF」と省略でき、「padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px」は「」と省略できます。パディング:30px 0 10px" 20px;"。定義テクニックにはさらに多くの節約テクニックがあり、CSS アプリケーションに習熟するにつれて、より良い方法を発見し続けることになります。
3. XHTML 検証の問題
人々は CSS の検証により注意を払うことがよくありますが、XHTML 標準への準拠は無視されており、多くの低レベルのエラーが発生します。主な問題は以下のとおりです。
◎target="_blank"、この構文は HTML4.0 では正しいですが、XHTML1.0 では使用できません。 1 つの解決策は、target="new" と記述することです。もう 1 つの解決策は、js を使用してすべてのターゲットを処理することです。
◎スタイルシートファイルは埋め込まないほうがメンテナンスが容易です。 <style> が埋め込まれている場合は、<style type="text/css"> として記述する必要があり、タイプを無視することはできません。無視しないと、XHTML はスタイルが何に使用されるかを判断できません。
◎<br> は、<br /> として記述する必要があります。XHTML では、ペアになっていないタグの直後に「/」を付ける必要があります。
◎同じIDを再利用します。 XHTML 内で ID を使用できるのは 1 回だけです。スタイルを複数回参照する必要がある場合は、クラスを使用する必要があります。
◎Flashの埋め込み方法が間違っています。 <embed> は元々 Netscape のプライベート タグでしたが、後に IE でサポートされましたが、HTML4.0 には <embed> タグがありません。 W3C は、<object> タグの使用を推奨しています。異なるブラウザ間の互換性の問題を解決するには、両方のタグを使用することが回避策です。
完全なサンプル コードは次のとおりです (フラッシュの背景は透明です)。
| 引用した内容は以下の通りです。 <オブジェクト classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" コードベース= 「http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0」 幅="300" 高さ="100"> <param name="品質" value="高"> <param name="wmode" value="transparent"> <param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" 品質="高" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="100"> </embed> </オブジェクト> |
ただし、XHTML に直接記述することはまだ不可能であり、flash.js ファイルに上記のコードを記述して呼び出すことによって検証を行うことしかできません。
<script type="text/javascript" src="flash.js"></script>
Flash が規格を満たしているかどうかは議論の余地があります。
◎id=header class=titleと同様のコードは、 id=header" class="title" と記述します。属性値を引用符で囲むことは、最も基本的な XHTML 構文ルールです。
4. 互換性の問題
IE6.0、Mozilla Firefox1.0、Opera 7.12で閲覧すると、一部のWebサイトが変形したり位置がずれたりします。
IE を中心にしていますが、Mozilla にはありません。 IE で本文の {TEXT-ALIGN: center;} を設定すると、すでに中央に配置できますが、Mozilla では、中央に配置する必要があるレイヤーに次のスタイル設定を追加する必要があります: MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
幅を超えています。 Mozilla ではページは正常に見えますが、IE では幅を超えて変形し、隣り合ったレイヤーが下に移動してしまいます。この状況は、IE と Mozilla の間のボックス モデルの解釈の違いによって引き起こされます。「! important」メソッドなど、多くの解決策があります。
Web 標準と CSS レイアウトは、ますます多くのデザイナーによって理解され、習得されています。 CSS レイアウトを消化、理解、適用する期間を経ると、技術的および美的考慮事項の両方を備えたさらに多くの Web ページが出現するでしょう。