ドキュメント > Web標準のトラブル回避法
Web標準のトラブル回避法
この文書では、XHTML 1.0とCSS 2.1について、実践的な観点から説明します。IE 7、Firefox 2、Opera 9、Safari 3といったモダンブラウザはWeb標準によく対応していますが、未だ普及率の高いIE 6には細かいバグがいくつもあります。Web標準を実践する上で、IE 6の対策がとても重要になります。
XML宣言
Web標準では、XHTML文書の冒頭でXML宣言することになっています。
<?xml version="1.0" encoding="utf-8"?>
しかしIE 6には、1行目がDOCTYPE宣言でなければ後方互換モードになるバグがあります。後方互換モードの主な問題点は以下です。
- margin属性で値にautoを使えない
- padding/border属性の値がwidth/height属性に内包される
この問題の回避するための選択肢は3つあります。
- IE 6専用のCSSを用意する
- 後方互換モードでも正常に表示されるようなCSSを書く
- XML宣言を外す
1は、CSSファイルをWebブラウザごとに切り替えたり、CSSハックのスターハック（* html)を使ってIE 6のみのスタイルを指定して実現します。
2は、autoの代わりにtext-align属性のcenterを使ったり、padding属性を使わずにmargin属性で上手にレイアウトします。
いずれもできることはできるのですが、CSSに無理が生じるし、たった1行のXML宣言を外すだけで不要になる努力だと考えると、3が現実的な落としどころです。
なお、CSSハックに関してはcentricle.comのWill the browser apply the rule(s)?にわかりやすい一覧表があります。
DOCUTYPE宣言
XHTML 1.0のDOCUTYPE（文書型）にはStrictやTransitionalなどがあります。厳密なXHTMLのStrictは将来的なメンテナンスを考えると採用したいDOCTYPEです。ただし下位互換性がないので、JavaScriptやform要素を使うようなWebページではInvalid（正しくない）なコードになりやすいのが難点です。Transitionalには下位互換性があるので、いったんTransitionalにしておいて、徐々にStrictに移行していくのもよいでしょう。無理にStrictにこだわる必要はありません。
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
meta要素
文書の情報を示すmeta要素をXHTML文書のhead要素内に記述します。見えない部分だからといって端折ってしまうと、Webブラウザが文字化けを起こしたり、サーチエンジンの評価に悪影響が出るなどの危険性があります。
文字コードは、特にこだわりがなければutf-8がよいと思います。ただし、必ずしもutf-8がよいわけではないので、適宜使い分けましょう。最低限記述したほうがよいmeta要素を以下に示します。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="description" content="Webページの概要を書きます" /> <meta name="keywords" content="キーワードを列挙します" /> <meta name="author" content="作者の名前" />
title要素とh1要素
head要素内にWebページのタイトルであるtitle要素を記述します。サーチエンジンの検索結果の1行目に表示される部分なので、商用サイトの場合は会社名とそのジャンルを書くと親切です。また、業種によっては地域を入れておくと、有効なクリックにつながりやすくなるでしょう。
<title>自家焙煎珈琲豆販売 | まめや | 東京都新宿区<title>
title要素とh1要素は意味合いが似ています。h1要素は大見出しなので、やはり会社名や業種を記述したいところです。title要素と内容が重なってしまうのですが、無理に変えることもないでしょう。
<h1>自家焙煎珈琲豆 まめや</h1>
なお、h1要素は最大の見出しレベルなので、1つのWebページに対して1つだけにしましょう。h2以下の要素は複数記述して構いません。
XHTMLのインデント
XHTMLの要素はどこで開いてどこで閉じるのかわかりにくいので、インデントすると読みやすくなります。しかし、全部インデントすると、今度は逆にインデントが増えすぎてしまいます。
インデントに関しては好みが分かれる部分ですが、私は次のルールでインデントしています。
- 基本的にインデントしない
- ページレイアウトに使うdiv要素は、開きと閉じをコメントで記述する
- ul、tableなどの、入れ子になるXHTML要素だけをインデントする
このルールだと、無駄なインデントがなくなり、XHTMLのコンテンツが編集しやすくなります。詳細はこのページのソースコードを参照してください。
インデントの幅は、半角スペース4つにしています。これは、O'Reilly刊『Perlベストプラクティス』に倣って決めました。タブだと表示する環境によってインデント幅が変わってしまい、たまに不便なことがあります。
CSSのインデント
CSSのインデントに関しても、人それぞれなので一貫性があればよいと思います。私は以下のようにしています。要素名の後と、コロンの後に半角スペースを1つ入れると、開放感があって読みやすいと思います。
body {
color: #4b4641;
background-color: #e1dcd7;
}
CSSの記述法に関しては、2xup.orgのスタイルシートを書く時のガイドラインが洗練されていて、とても参考になります。一定のルールに従ってコーディングしていると、数年後にメンテナンスするときも気が楽です。
セレクタを使う
次々とクラスやIDを作ってスタイルを制御しようとすると、要素が増えてしまい頭がこんがらがります。クラスでスタイルを指定するのではなく、セレクタを使ってブロック単位でスタイルを指定すると、ソースが単純化されます。
次の例では、<div class="section">...</div>内のh2要素とp要素にスタイルを指定しています。こうすることで、h2要素とp要素にはクラスを割り当てる必要がなくなります。
div.section h2 {
font-size: 100%;
font-weight: bold;
}
div.section p {
font-size: 90%;
font-weight: normal;
}
セレクタの中で特に便利なものを以下に記述します。全セレクタの詳細についてはCSS 2.1仕様書のSelectorsの章を参照してください。
| パターン | 意味 | 名称 |
|---|---|---|
| E F | 任意の要素Eの子孫である任意の要素Fにマッチする | 子孫セレクタ |
| E > F | 任意の要素Eの子供である任意の要素Fにマッチする | 子供セレクタ |
| E + F | 要素Eが直前にある要素Fにマッチする | 隣接セレクタ |
| E[class~="foo"] | クラスがfooの任意の要素Eにマッチする※ | 属性セレクタ |
| E.foo | クラスがfooの任意の要素Eにマッチする | クラスセレクタ |
| E#myid | IDがmyidの任意の要素Eにマッチする | IDセレクタ |
※CSS仕様書では推奨されていますが、IE 6は非対応です。
ブロック要素をぴったり埋めない
次のXHTMLを見てください。幅100pxのコンテナの中に幅60pxの左カラムと幅40pxの右カラムを作っています。
<!-- Container --> <div style="width: 100px;"> <!-- Left Column --> <div style="float: left; width: 60px;"> <p>いろはにほへと</p> </div> <!-- /Left Column --> <!-- Right Column --> <div style="float: right; width: 40px;"> <p>ちりぬるを</p> </div> <!-- /Right Column --> </div> <!-- /Container -->
コード自体に問題はないのですが、IE 6には、親ブロックの幅（100px）と子ブロックの幅の総和（60px＋40px）が近いと、ブロック要素内のテキスト表示がおかしくなるバグがあります。上記の例では左カラムを6px縮めて54pxにすると、正常な表示になります。
親ブロックは子ブロックでぴったりと埋めず、10px程度の余裕を与えておくと安全です。
