[Blogger #011] メディアクエリの辻褄あわせ

ブラウザの幅をいじくったら、中身の折り返しは自動的に変わるし、スマホでみたら、それなりに”よしな”に合わせてくれる。はず、はずなのですが、なぜか、崩れてる。今回はそれを修正。

起きている現象

こんな感じで、ブラウザ幅が狭まっても、中身の幅が修正されない領域がある。右側がブチ切れた感じになっているのがわかるだろうか。

メディアクエリとは？

さて、あちこちからCSS/HTMLを強引にコピペしてきてるので、メディアクエリの整合性がとれていないところがあるのだろう。ワンカラム化したときに修正できていないところだ。

メディアクエリって、要はブラウザ幅に合わせてレイアウト調整するよって話なんだけど、機能が豊富なので分かりやすい記事が少ないですね。網羅しようとすると、膨大になってしまってて、基本要素だけ、パパっと理解できるようにできてないです。以下、２つのサイトが割と、要点絞っててわかりやすいので、メディアクエリって何？って方はそちらへどうぞ。

メディアクエリとviewportの使い方について - Qiita

【CSS】max-widthとmin-widthの使い方まとめ

さて、HTML/CSSを眺めていくと、追加・修正したりしたところには、思い当たる記載がない。で、検索してみると、ありました。

基本いじらないって、いう、QooQのオリジナル部分でした。見にくいので、エディタで整形したのが以下。メディアクエリは768px以下で設定されていて、通常のbody/container 内では、min-widthが960px。なので、960px以下で、768px以上だと、右側が欠けちゃう現象になるのだった。多分、2カラムレイアウトだと、整合してて、1カラム化したので、整合していないのじゃないかと思う。２カラムでどう整合してたかは、もうあまり興味がない。だって、１カラムにしちゃったので。

 body {
    text-align    : left;
    word-wrap     : break-word;
    overflow-wrap : break-word;
    font-size     : 1.7rem;
    font-weight   : 500;
    line-height   : 1.2;
    letter-spacing: .02em;
    min-width     : 960px >> 768px
}
.container {
    margin   : auto;
    width    : 86%;
    min-width: 960px; >>768px
    max-width: 1180px
}
//　間は、省略
@media(max-width:768px) {
    body {
        font-size: 1.6rem;
        min-width: 0
    }
    .container {
        width    : 96%;
        min-width: 0
 // 以下略
}
@media(max-width:480px) {
    #main.width-100 .container {
        width: 100%
    }
    .width-100 #sub-content,
    .width-100 .breadcrumbs {
        width       : 96%;
        margin-right: auto;
        margin-left : auto
    }
}

で、修正箇所に悩む

なにせ、基本いじらない、ですよ。追加部分に書こうかなとも思いましたが、もう２カラムに戻したりなんてしないだろうと思う。ならば、ここで書き換えちゃえ、ってんで、書き換えました。768pxに。

無事、幅いじくってもそれなりに、あわせてくれるようになりました。

では、また次回。