雑が喰おう

ボックスの高さをそろえる設定方法を変更しなおした

前回、overflowの指定を解除してBOX要素で配置した 1のですが、今度はスマホで表示が崩れていました。

どうやら、レスポンシブWebデザインにし忘れていたようです。

見にくいので、早急に対処です。

症状

症状としては、iPhone5でみるとこんな感じ。

真ん中で別れてメインカラムとサイドバーカラムが表示されています。
これは、レスポンシブWEBデザインの指定し忘れです。

修正

現在指定しているdisplay:box;ですが、BOXを解除する方法はないです。
別のinlineとかblockなどという指定はできますが。

今回はスマホでの表示用に、BOX指定はそのままに、並び方を指定する方法で修正しました。

横並びを縦並びにする

具体的には、以下のようにCSSを追記しました。

#container {
    display:box;
    display: -webkit-box; /* Safari,Google Chrome用 */
    display: -moz-box; /* Firefox用 */
    }
@media screen and (max-width: 640px) {#container{ -webkit-box-orient: vertical;}}

#main {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 70%;
    }
@media screen and (max-width: 640px) {#main{width:100%;}}

#sidebar {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    }

containerとmainの@media screen and (max-width: 640px)以降に追記している部分です。

#container{ -webkit-box-orient: vertical;でBOXの並び順を横並びから縦並びに変更して
media screen and (max-width: 640px) {#main{width:100%;}}で最小の横幅を100%に指定しています。

メインカラムで横幅を指定しているために、それが引き継がれているので、横幅を100%にしています。

これで、iPhone5で見た時にはサイドバーカラムはメインカラムの後に表示されるようになりました。

おまけ

ついでに以下のようなCSSも追加してみました。

    @media screen and (max-width: 720px) {
    #container{ -webkit-box-orient: vertical;}
    #main{width:100%;}
    #sidebar{width: 100%}
    }

スマホ用とは別にブラウザサイズ720pxでアクセスした時も、スマホ用のようにBOXの並びを縦並びにして表示するようにしています。

これは、私の使用するMacBook Airでの表示用で、エディッターとブラウザをディスプレイの半々で表示して内容確認するためです。

その際にはサイドバーは必要ないですからね。
スクロールバーを出してあれするよりもましかなぁという程度です。

完全に個人用なんですけどねw

スポンサード リンク

スポンサード リンク

»関連してそうな記事
タグ: ,