注意点

投稿者：admin 投稿日時：2008/11/10（月） 21:58

複数のブラウザで表示を確認する

ブラウザの種類によって、見え方が大きく変わることがあります。最低、ＩＥとネスケでの表示は確認する方が良いと思います。
　

DIVの高さ（height）と幅（width）を常に意識すること

積み木が上手く積みあがらないように、幅や高さの合わないボックスも上手く納まってくれません。marginやpaddingのサイズも影響しますので、上手くいかないときは、その辺のサイズも替えたりして試してみて下さい。
※これが上手くいっているかは、ＩＥは自動的に調整してくれて上手く表示されてしまうので確認できません。ネスケやｍｏｚｉｌｌａなどで確認すると良いと思います。
※<hr>をたくさん使っていると、ネスケで見た時、他のブラウザと見え方がかなり違ってしまうことがあります。このことも、それも覚えておいた方がよいでしょう。

その後の経験によって、高さ（height）は、特に意図がない場合は、指定しないのが一番とよいということが分かりました。
指定しないと、ブラウザが自動的に調整してくれます。

ページの基本構造は同じでも、内容のボリュームが違う時

ボックスから、文章や写真があふれてしまって、表示がグチャグチャになってしまうことがあります。この場合の対応方法として
①高さ（height）をスタイルシートのclassで指定して、ページごとに、指定するクラスを変えてコントロールする

【例】
◇HTMLの記述
ページ１　<div id="main" class="height1"> </div>

ページ２　<div id="main" class="height2"> </div>

◇スタイルシートの記述
#base {width: 600px;height:800px;}
.height1{height:800px;}
.height2{height400px;}

※idは「#」、クラスは「.」で表現します。
※同一ページには、idは１つだけしか使用できません。classは複数指定できます。

何となくですが、構造はid、飾りはclassで指定するのが良いのかも・・・・と今は感じていますが、一般的にはどうなんでしょう？？？？（でも、同じような構造が繰り返されるときは、classなんでしょうね・・・）

②あふれた部分の扱いも、スタイルシートで指定しておく

◇スタイルシートの記述
次のように記述すると、ページごとの高さの変更をしなくても、オーバーフローした部分がスクロールして表示されるようになり、ページが崩れなくなります。

【例】
.height2{
height400px;
overflow: auto;
}

htmlのはじめの記述が大きく影響する場合がある

htmlの最初の部分に次のような記述がある場合があります。
あまり、おまじないぐらいの認識だったのですが、これが結構効いてくることがありのです。
このことに気付くまで、かなり苦労しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

FirefoxやGoogle Chromeで参照したときには問題ないのですが、IE7で参照するとこの指定によってはレイアウトが崩れてしまうのです。

【サンプル】

このサンプルで表示されるページは、HTMLの最初の１行の記述以外は、htmlの記述は全く同じで、スタイルシートは同一のものを使用しています。

IE7で参照すると、後の方のレイアウトが崩れてしまいます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

詳しく説明されているページがありますので了解しておきます。

各HTMLバージョンのDOCTYPE宣言のサンプル集

詳しいことが理解できなくても問題ないと思います。（私には、とても難しくチンプンカンプンでした。）

ページによって、レイアウトが上手くいったり、崩れたりということが起こったときは、このおまじないと思えた記述が統一されているのかも、チェックしてみた方が良いでしょう。

普通は、このようなところの影響を受けることはなさそうですが、既存ページをCMSなどのオープンソースのレイアウトに統一しようとしたときに、生じ易いと思います。

注意点

複数のブラウザで表示を確認する

DIVの高さ（height）と幅（width）を常に意識すること

ページの基本構造は同じでも、内容のボリュームが違う時

htmlのはじめの記述が大きく影響する場合がある

関連書籍

ブックナビゲーション

ブログ

ナビゲーション

ユーザログイン

RSS配信

最近のコメント