忍者ブログ
[616] [269] [270] [271] [272] [273] [274] [275] [276] [277] [278]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

 BLOCKBLOGのメルマガで
サンプルCSSには、左メニューばかりで、
右メニューがないといようなことが書いてあった。

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

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

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

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

拍手[0回]



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

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

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

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

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

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

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

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

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

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

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

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

すなわち、CSSでコメントにするには、
   /* コメントにするところ */
というように、コメントにするところの前後に/*と*/で括ります。

複数行を括る場合は、
   /*
    行1
    行2
    :
    行n
   */

とします。

ただし注意点として、入れ子は駄目です。
   /*
    /* aaaa */
       :
   */

とか

   /* aaaa  /*  bb */  ccc*/

は、おかしくなります。

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

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

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

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

     :

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

2)このCSSを上書きで保存します。
  「ファイル」→「上書き保存」

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

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

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

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

  そして2)へ戻ります。


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

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

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

ただし、これでは原因が分からないので、
ずれないkimono-blueにおいて、
上記と同じところを抜き出したCSSで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のCSSを使ってその秘密部分を探します。
探し方は、mikaeriと同じようにやればいいです。

その結果、

    #box {
        WIDTH: 770px;
    }

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

【原因】

このことから推測するに、
CSSでのレイアウト制御は、
親DIV領域と子DIV領域があるときに、

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

【対策】

なので、BOX領域のWIDTH指定で
メニュー領域と本文領域の合計サイズより大きなサイズを
指定しておけばいい。

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

PR

コメント


コメントフォーム
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字


トラックバック
この記事にトラックバックする:
忍者ブログ [PR]
カレンダー
07 2017/08 09
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
フリーエリア
[-]最新トラックバック
プロフィール
HN:
7maru
性別:
非公開
自己紹介:

バーコード
ブログ内検索
[+]アーカイブ
アクセス解析