レイアウトが崩れる原因

　ＢＬＯＣＫＢＬＯＧのメルマガで
サンプルＣＳＳには、左メニューばかりで、
右メニューがないといようなことが書いてあった。

見返り美人は、その理由として、
「とくにmikaeriは、ブラウザの横幅を変えたらペインがずれるなど」
と書いてあったが、

横幅変えたら、ずれるのはあたりまえじゃん。
と思っていたので、何が問題なのかが分からなかった。

で、他のサンプル（kimono-blue）を見てみると、
なぜかずれない。^^)

あれーー、ずれないのが正しいのかな？
そうか、これが根本的に問題なのね。
ということで、
ちょっと公開するのが自分的に恥ずかしい事で
遊べなくなってしまって暇なので
その問題箇所を調べてみた。

この問題箇所調査の方法は、
JavaScriptもCSSもHTMLも同じだけど、
要するに、その仕様を詳しく知らなくても出来るんですよ。

その方法は、以下の通り。

?自分のＰＣにその環境を作る。
?問題のファイル内を
　　　　現象が再現する限り、不要な部分をコメントにする。

これだけです。
どうも、調べ方分からない方がいるかと思うので説明しておきますね。

まず、今回の見返り美人の例について、

【?は】、自分はWindows IE6環境なので、

・BKLOCKBLOGのmikaeriのサンプルページを表示する。

・ブラウザの「ファイル」→「名前を付けて保存する」
　で適当なフォルダに保存する

・そうすると以下のＨＴＭＬファイルとフォルダが出来る。
　　　見返り美人-top.html
　　　見返り美人-top.files

・今回は、ＣＳＳファイルを調べるので、
　見返り美人-top.filesフォルダの中を開くと、
　　　mikaeri.bblog[1]
　というファイルがありますが、
　これがＣＳＳファイルです。

ここまでが「自分のＰＣにその環境を作る」です。
ただし、ネットにつながっていればこれでもＯＫですが
調べるときは、ネットに繋がない場合は、
　　　見返り美人-top.html
　　　mikaeri.bblog[1]
　　　その他あれば
これらのファイルの中で、外部リンクしてあるもの
すなわちhttp://.....と書いてある部分のファイルは、
不要なら削除し、必要なら、そのファイルを自分のＰＣ
の同じフォルダに保存して、ＵＲＬを変えておく。

【?は】
今度は、
ＣＳＳファイル内で不要な部分をどんどんコメントにして行きます。

すなわち、ＣＳＳでコメントにするには、
　　　／＊　コメントにするところ　＊／
というように、コメントにするところの前後に／＊と＊／で括ります。

複数行を括る場合は、
　　　／＊
　　　　行１
　　　　行２
　　　　：
　　　　行ｎ
　　　＊／

とします。

ただし注意点として、入れ子は駄目です。
　　　／＊
　　　　／＊　ａａａａ　＊／
　　　　　　　：
　　　＊／

とか

　　　／＊　ａａａａ　　／＊　　ｂｂ　＊／　　ｃｃｃ＊／

は、おかしくなります。

じゃ、さっそくmikaeri.bblog[1]の問題箇所を探して見ます。

まず、自分のＰＣ環境に保存した見返り美人-top.htmlをブラウザで開きます。
次に、mikaeri.bblog[1]をwindowsのテキストエディタのwriteで開きます。
このとき「ファイル」→「開く」→「開く」ウィンドウで、
ファイルの種類は、「すべてのファイル」にして
mikaeri.bblog[1]を指定します。

ここから、コメントにしていきますが、

１）複数行のコメントを使って、大胆に
　　　　/*
　　　　A:link {

　　　　　:

　　　　#box_hack:unknown {
　　　　　　　　content: "a"
　　　　}
　　　　*/
　　までをコメントにして、

２）このＣＳＳを上書きで保存します。
　　「ファイル」→「上書き保存」

３）次に変更した結果、ブラウザ上でどのように変わったかを見てみます。
　　ブラウザの更新ボタンを押します。

４）現象が再現するか見てみます。
　　すなわちブラウザ画面の右端を本文領域より左側まで縮小します。
　　本文領域が下にずれたら、現象は再現しているので、
　　再び別なところをコメントにするため、１）から繰り返しです。

５）違った現象になったら、
　　例えば始めから本文が下側にずれてるとか、
　　本文が下側にずれず、メニュー領域までいったら下にずれたとか
　　だったら、直前の１）の操作を今度は、その中をさらに詳細に
　　調べるため、もっと細かくコメントにします。

　　例えば、こんな風に。
　　　　/*
　　　　#menu {
　　　　　　　　：
　　　　}
　　　　*/
　
　　　　　　　　↓
　
　　　　#menu {
　　　　/*　　　PADDING-RIGHT: 50px; :*/
　　　　/*　　　PADDING-LEFT: 50px; */
　　　　　　　　FLOAT: left;
　　　　　　　　PADDING-BOTTOM: 5px;
　　　　　　　　MARGIN: 0px;
　　　　　　　　WIDTH: 200px;
　　　　　　　　PADDING-TOP: 5px
　　　　}

　　そして２）へ戻ります。


６）どこもコメントにできなくなれば問題箇所が判明です。

この結果、mikaeriで最終的に残ったのは以下のようになりました。

　　　　#menu {
　　　　　　　　FLOAT: left;
　　　　　　　　WIDTH: 200px;
　　　　}
　　　　#content {
　　　　　　　　WIDTH: 500px;
　　　　}

ただし、これでは原因が分からないので、
ずれないkimono-blueにおいて、
上記と同じところを抜き出したＣＳＳでkimono-blueを表示させたら、

　　　　#menu {
　　　　　　　　PADDING-RIGHT: 0px;
　　　　　　　　PADDING-LEFT: 10px;
　　　　　　　　FLOAT: left;
　　　　　　　　PADDING-BOTTOM: 0px;
　　　　　　　　MARGIN: 0px;
　　　　　　　　WIDTH: 200px;
　　　　　　　　PADDING-TOP: 0px
　　　　}
　　　　#content {
　　　　　　　　PADDING-RIGHT: 5px;
　　　　　　　　PADDING-LEFT: 5px;
　　　　　　　　FONT-SIZE: 9pt;
　　　　　　　　FLOAT: left;
　　　　　　　　PADDING-BOTTOM: 5px;
　　　　　　　　MARGIN-LEFT: 20px;
　　　　　　　　WIDTH: 520px;
　　　　　　　　COLOR: #000000;
　　　　　　　　LINE-HEIGHT: 140%;
　　　　　　　　PADDING-TOP: 5px
　　　　}

なんと下にずれてしまいました。

ということは、
kimono-blueの他の部分にずれない秘密が隠されている。
mikaeriには、その秘密がないのでずれるんだということが分かりました。

今度は、kimono-blueのＣＳＳを使ってその秘密部分を探します。
探し方は、mikaeriと同じようにやればいいです。

その結果、

　　　　#box {
　　　　　　　　WIDTH: 770px;
　　　　}

があればずれないし、無いとずれることが判明。

【原因】

このことから推測するに、
ＣＳＳでのレイアウト制御は、
親ＤＩＶ領域と子ＤＩＶ領域があるときに、

子ＤＩＶ領域で絶対サイズ指定があれば、
　　　　親ＤＩＶ領域に、
　　　　　　　　絶対サイズ指定がなければ、
　　　　　　　　　　　　子ＤＩＶ領域は固定にならない。
　　　　　　　　絶対サイズ指定があり、
　　　　　　　　かつ、そのサイズ内に子ＤＩＶ領域がすべて入れば
　　　　　　　　　　　　子ＤＩＶ領域のサイズ指定は有効で
　　　　　　　　　　　　固定化される。
みたいですね（もっと条件はあるかもだけど^^);;）。

【対策】

なので、ＢＯＸ領域のＷＩＤＴＨ指定で
メニュー領域と本文領域の合計サイズより大きなサイズを
指定しておけばいい。

ただし、環境は、windows IE6だけで調べただけなので、
他のＯＳ・ブラウザで上手くいくかは分かりませんが。^^);;