ＢＬＯＣＫＢＬＯＧのメルマガで
サンプルＣＳＳには、左メニューばかりで、
右メニューがないといようなことが書いてあった。
見返り美人は、その理由として、
「とくに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だけで調べただけなので、
他のＯＳ・ブラウザで上手くいくかは分かりませんが。^^);;
[0回]
