CSS Lesson
フル CSS のレイアウトを実例をもとに解説しています。正しい文書構造、W3C 推奨に準拠していない場合もありますのでご了承ください。
※解説は WordPress インストール済みの環境を前提にしています。

CSS入門4 : ブラウザによる表示の違いを解決する

CATEGORY : CSS段組レイアウト入門 | UPDATE : 2008.10.28

ブラウザの数は OS、バージョンの違いを合わせて70以上になります。すべてのブラウザで同じ表示を望むのは不可能です。ここでは MSIE 6.0 以上、Firefox、Opera、Safari を対象に解説します。
前項で作成の float 段組は MSIE 5.5 ではページが左上に配置されます。これは、私では解決できませんでした。
MSIE 6.0 以上、Opera は正常に表示されます。Safari と、Firefox は foot の margin-top が適応されません。これはいくつかの方法で解決できます。

1 ： footの上部に空白をつくるいろいろな解決策
なぜ margin-top が適応されないかの説明は、長くなるので省略します。ブラウザには、それぞれバグとは言えないプロパティの解釈違いがありますので、今後の参考も含めて解決策を考えてみます。
  • ボックスを二重の入れ子タイプにして回避する方法。例えば left ボックスと contents ボックスを新たなボックスで囲み、foot ボックスの clear:both を削除します。
    もうひとつは、foot ボックスを同サイズの新たなボックスで囲み、 外側のボックスに clear:both を設定し、内側のボックスに margin-top:20px の設定をします。こうして、ボックスを二重にして設定を分けてしまう方法は、トラブル回避には多用できそうです。
  • leftボックスと contents ボックスに margin-bottom : 20px の設定を追加して、下部に空白を作り、foot ボックスの margin-top:20px を削除します。
  • foot ボックスに border-top: 20px solid #FFFFFF; の設定を追加して、上部に 20px の白い線を入れ、foot ボックスの margin-top:20px を削除します。
  • foot ボックスの上に高さ 20px の透明ボックスを入れ、foot ボックスの margin-top:20px を削除します。
以上の解決策をページデザインによって使い分けます。 この中で、主に使っている方法は最後の透明ボックスを入れる方法です。詳細は プライベートTIPS で紹介しています。
2 ： 透明ボックスで空白の問題を解決する
CSS ファィルと PHP テンプレートの一部を修正します。
■lesson.css ファイルの修正と追加記述
/*++フッター++*/
#foot {
width: 750px;
height: 30px;
background: #99CCFF;
}

/*++スペーサー++*/
.spacer20 {
clear: both;
width: auto;/*　ボックス幅　*/
height: 20px;
}
※foot は書き直し、スペーサーは新たに CSS ファィルに追加記述します。
  • foot : 設定の一部を削除するだけで OK です。
  • .spacer20 : ドットで始まる要素はクラスセレクタで、( # ) の代わりに ( . ) を使う以外書式は同じです。
    ID セレクタでメインの設定をし、細部の設定はクラスセレクタと使い分けています。機能はほとんど変わりません。詳細は省略します。
    横幅はいろいろな幅に対応できるように auto で指定します。
■lesson.php ファイルに追加記述
<div class="spacer20"><!----></div>
※foot の読み込みが始まる前、<div id="foot"><!-- FOOT --> の前行に記述します。
  • クラスセレクタの読み込み : ドットで始まるクラスセレクタは <div class=""> で読み込み、</div> で終了します。必ずセットで使用します。
  • <!----> は空タグを適応させるために入れます。
PHPテンプレートの記述が済んだら、ページ記事をプレビューで確認します。ほとんどのブラウザで同じく表示されているはずです。
▷同一名の ID セレクタは、基本的に HTML 1ページに1回だけしか読み込めないことになっています。が、複数回読み込みしても特にトラブル無く表示されます。今後ブラウザが対応を厳格にし始めると分かりませんので、1回だけにしておいた方が無難ですね。クラスセレクタは制限がありません。
▲ PAGE TOP