CSS“カンニングペーパー”

この記事は、Mezzoblueのデイブ・シェイ氏による“CSS Crib Sheet”という記事を訳したものです。リンク先のサイトはすべて英文のみとなっています。

---

CSSを使ってサイトを構築していると、きっと多くの突飛なレイアウト上の問題点に遭遇し、何度となく壁に頭をバンバン打ち付けるはめになるでしょう。以下はそのようなデザイン過程をやりやすくし、あなたが何か問題を抱え込んだときに確認ができるクイック・リファレンスを提供するための試みです。

疑わしい時は検証しよう
デバッグ中、まず素直にコードを検証ツールにかけることで、悩みの種をずいぶん減らす事ができるはずです。適切でないXHTMLやCSSコードは様々なレイアウト上の不具合を引き起こすでしょう。

他のブラウザでCSSをテストする「後」ではなく「前」に最先端のブラウザで構築・テストしよう
バグの多いブラウザでテストしながらサイトを構築すると、そのコードは使用したブラウザによるバグ含みのレンダリングに依存するものになってしまいます。後によりウェブ標準に準拠したブラウザでテストする段階で、不適当なレンダリングがされることに不満を感じるでしょう。その代わりに、完成したCSSを作成するところから取り掛かり、それからより劣ったブラウザ向けのハックをするようにしょう。こうすれば、あなたの書いたコードは最初からよりウェブ標準に準拠したものになり、他のブラウザに対応するためのハックもそれほどしなくてよくなるでしょう。現時点では最先端のブラウザとは、Mozilla、Safari、またはOperaのことを指します。

求めているエフェクトが実際に存在するか確認しよう
公式仕様には含まれない、ブラウザ固有のCSS拡張機能も存在します。もしCSSフィルターを適用したり、スクロールバーの体裁を整えようとしたりしているのなら、IE以外のブラウザでは動作しない独自のコードを扱っていることになります。検証ツールが「あなたが使用したコードは定義されていません」と教えてくれた場合、恐らくそれは独自コードであり、すべてのブラウザで一定の動作をしないでしょう。

floatに依存したレイアウトをする場合､floatを確実にclearすること
floatは扱いにくく、いつでも期待したように振るまってはくれません。floatが内包する要素のborderを突き抜けて延びてしまっていたり、または単に期待したような動作をしてくれない場合は、あなたの求めているものが正しいことを確かめてください。この事については、エリック・メイヤー氏のチュートリアルを見てください。

マージンは崩れる。防止のためにpaddingやborderを利用しよう
不必要な余白や、必要なところに現れてくれない余白と格闘するかも知れません。もしmarginを使っているなら、恐らくその崩れが原因でしょう。アンディ・バッド氏がどういうことが起こりうるのかを説明しています。

固定widthの要素にpaddingやborderを適用するのはなるべく避けよう
IE5はボックス・モデルを正しく解釈しません。これはいろいろなことを本当に台無しにしてしまいます。この問題を回避する方法もありますが、固定widthを持つ子要素にpaddingを適用する代わりに、親要素に適用することで避けるのが一番良いでしょう。

IEでのFlash of Unstyled Content（フラッシュ・オブ・アンスタイルド・コンテント）を防ごう
外部スタイルシートを使う際、@importのみに依存していると、IEがCSSを適用する前にプレーンでフォーマットされていないHTMLを一瞬表示することにそのうち気づくでしょう。これは防ぐことができます。

IEのmin-widthはあてにならない
IEはmin-widthをサポートしていませんが、ある程度まではwidthをmin-widthとして扱います。ちょっとしたIE振り分けを使えば、同じような最終的結果を得る事ができるでしょう。

疑わしい時はwidthの値を減らそう
時に、誤った四捨五入によって50%＋50%の結果が100.1%のようになり、一部のブラウザでのレイアウトが崩れてしまうことがあります。50%を49%に下げてみてください。たとえ49.9%へと減らすだけでも、変化があるかもしれません。

IEでコンテンツがきちんと表示されない？
もしかして、「ピーカーブー・バグ」に悩まされているのかもしれません。特に、その部分がリンクのマウスオーバーによって表示されるようになるなら、その可能性が高いと思われます。これを修正するためには、Position is Everythingを参照しましょう。

アンカーを使用している時は、リンクへのスタイル適用に注意しよう
もし昔ながらのアンカー（<a name="anchor">）をコードの中で使っているなら、そのアンカーが:hoverや:activeの擬似クラスに影響されてしまう事に気づくでしょう。これを防ぐためには、アンカーの代わりに id を使うか、:link:hover、:link:active…という、もう少しややこしい記述のしかたをしましょう。

“LoVe/HAte”（ラブ/ヘイト）リンク法を思い出そう
リンク疑似クラスを指定する時は、必ずlink、visited、hover、activeの順序で行ってください。このほかの順序では一貫して動作しないでしょう。また、:focusを使用することも考慮し、その場合は順序をLVHFA (“Lord Vader’s Handle Formerly Anakin”＝ヴェイダー卿のあだ名、以前はアナキン、というマット・ホウヒー氏による頭字語）に換えて下さい。

“TRouBLEd”（トラブルド）ボーダー法を思い出そう
border、margin、paddingの一括指定プロパティは、規程の順序で書かれていることが想定されています（topから時計回りにTop、Right、Buttom、Left=TRouBLed）。つまり、margin: 0 1px 3px 5px; は、上のマージンはゼロ、右のマージンが1ピクセル…ということを表しています。

0（ゼロ）以外の値には単位を指定しよう
CSSでは、フォント､マージン､サイズなどのすべての数量に単位を指定する事が必要とされます（唯一の例外はline-heightです。不思議な事に、これには単位が必要ではありません）。サイズ無指定にした場合の特定のブラウザによる動作はあてにすべきではありません。しかし、0は0です。pxでもemでも、その他のどんな単位であっても変わらないので、0に単位をつける必要はありません。
例：padding: 0 2px 0 1em;

違うフォントサイズをテストしてみよう
MozillaやOperaなどの最先端ブラウザでは、どんな単位で指定されているテキストでもサイズ変更をする事ができます。一部のユーザーは確実にあなたよりも大きい､または小さいデフォルトのテキストサイズを使っています。なるべく広い範囲に対応できるよう努力しましょう。

テストは埋め込みで、公開はインポート形式で
HTML埋め込みのスタイルシートを使って作業する事によって、テスト時のキャッシュ・エラーの可能性を排除できます。これはMacのブラウザで作業している時には特に重要です。しかし、公開前には必ずCSSを外部のファイルに移動し、@importまたは<link>を使ってインポートするようにしましょう。

レイアウトのデバッグのために、はっきり見えるボーダーをつけてみよう
ページ全体に影響する div { border: solid 1px #f00; } のようなルールは、レイアウト上の問題を突き止めるのに大変役立つでしょう。しかし、特定の要素にborderを足してみることで、気づきにくいオーバーラップや不要な余白を発見する手助けになることもあります。

画像のパスをシングル・クオーテーションマークで囲まないこと
背景画像を設定する時、パスを引用符で囲みたくなる気持ちを押さえましょう。必要ではないだけでなく、MacのIE5をつっかえさせることになるからです。

将来差し替えるスタイルシートの代替品として空のスタイルシートをリンクしないこと（例：PDA用または印刷用スタイルシートなど）
MacのIE5は空のスタイルシートを読み上げる時につっかえてしまい、ページの読み込み時間が遅くなってしまいます。これを防ぐため、代わりに少なくとも1つののCSSルール（または、コメントでもかまいません）をスタイルシートに書いておきましょう。

---

なお、以下はその他の注目に値する意見です。これらは特に機能面に関することではありませんが、Webデベロップメントの中で考慮されるべき事柄です。

CSSファイルを整理しよう
CSSのブロックごとにきちんとコメントを付けておくこと。似通ったセレクタをまとめておくこと。また、一貫した命名規則、余白設定（アドバイス：クロスプラットフォーム対応のためには、タブの代わりにスペースを使うとよい）、プロパティの順序などを確立すること。

classやIDは、見かけではなく機能に基づいて名付けよう
もし .smallblueというclassを作ったとして、後にそれを大きなサイズの赤いテキストに変更するように、と依頼されたら、そのclassはまったく意味のないものになってしまいます。代わりに、.copyright や .pullquote などの記述的なclassを使うようにしましょう。

CSS振り分けに頼るのは最後の手段にしよう
CSSハックや振り分けは様々な要素にCSSを選択的に適用する（もしくは場合によってはまったく適用しない）手助けをしてくれます。障害にぶつかる度にいつもこれらを使うかわりに、同じ効果を得るためのさらに標準的なクロスブラウザ対応法を探してみましょう。しかし迷った時には、救いの手となるのも確かです。ここにCSS振り分けの巨大な一覧があります。

セレクタを組み合わせよう
CSSを軽くしておくのは、ダウンロードの時間を短縮するために大事なことです。できる限りセレクタをグループ化したり、継承を利用したり､一括指定プロパティを使ったりして冗長なコードを減らしましょう。

画像代替法を使うときはアクセシビリティを考慮しよう
クラシックFIR（ファーナー画像置換法）は読み上げソフトユーザーや画像を表示しない設定にしているブラウザに対する既知の問題があります。別の方法も存在しますので、それぞれの違いを理解して利用しましょう（訳注：FIRは現在obsoleteです）。