CSSで失敗しない７つの方法 ...と２つのHack

/web/html-css

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

ある程度は基礎を抑えている人用に考えてみたもの。CSSコーディングする時の注意点とか。仕事で使えるかどうか実験中。

  1. float は width と必ずセットで記述する
  2. position は width となるべくセットで記述する
  3. display:block; と width はなるべくセットで記述する
  4. padding を width と同時に指定している場合は、IE5の幅に注意する
  5. margin を使用する場合、他要素のmarginとの打消し合いに注意する
  6. 継承が他の要素に与える影響を考慮する
  7. 複雑なfloatを使うくらいなら table を使用する

以上の７つのルールを守れば、CSSレイアウトにおける致命的な問題の殆どは回避できるでしょう。これでも巧くいかなかった場合はバグ報告サイトを当たるか、最寄のコーダに相談してください。このルールは、以下３つの理由に基づきます。

  • IEでの表示ズレの殆どは、幅か高さを指定してやれば解決する
  • 特定の指定が反映されない原因の多くは、親要素からの継承である
  • 小刻みなfloat指定は、使えば使うだけややこしくなる

２つめの「継承の混乱」を引き起こす原因として、HTMLのstyle属性、「!important」宣言、複数の外部CSSによる記述の分散が挙げられる。３つめは説明が足りないか？ floatの扱いは仕様でもはっきりとは決まっていない。表示バグはfloatやposition周りにかなり固まっており、多用すればクロスブラウザでの表示を予想しにくくなる。

役立つCSS-Hack

IE6(win)以前と、それ以外

  1. body {
  2. font-size: 12px !important;
  3. font-size: 78%;
  4. }

floatボックスが親ボックスを突き破る問題（詳細）

  1. .clearfix:after {
  2. content: ".";
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }
  8.  
  9. .clearfix {display: inline-block;}
  10.  
  11. /* Hides from IE-mac \*/
  12. * html .clearfix {height: 1%;}
  13. .clearfix {display: block;}
  14. /* End hide from IE-mac */

きちんと考えて組めば、この２つだけで十分通用します。Mac用とかIE5用とか、CSS分ける必要も特に無し（管理・運用効率は別腹）。実際ここ1年くらい、これ以外のHackは使ってませんし。

問題を検出する方法

表示ズレに困ったときは、とりあえずborder入れてみると良いでしょう。ボックスの位置、領域、margin、paddingなど、一度に様々な情報を確認することができます。

そもそもHTMLタグが間違っていないか、確認しておくことも重要。タグや引用符の閉じ忘れや、いつの間にか紛れ込んだ全角スペースなど、うっかりミスはどれだけ経験をつんでもなかなか無くならない要因です。チェックには公式のValidatorが良いでしょう。lintとかもあるけど、これは詳しすぎて逆に使えない。勉強用には良いけど。

いよいよ詰まったときは下のよ～なサイトのお世話になるかも。

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。