【CSS】レスポンシブルで可変+固定レイアウトで組む

css

最近は、レスポンスWebが流行りそうというか話題になってるけど、デバイスが多すぎて対応が大変になってきてる。

レスポンスの方法はまぁたくさんあるので、今回は「レスポンシブルで可変+固定レイアウトで組む」ってことに注目してみました。

なぜかというと、サイバーに広告をはったりする場合はその広告のサイズが決まっていて変えられない事が多く、その場合はサイドバーを固定にして、メインのコンテンツの部分はタブレットやスマホのサイズによって可変するという方法。その方法をメモる。
ただし広告などは一応スマートフォンの場合も考慮して300pxあたりの想定。スマホの場合は○○pxに切り替えとかではないのでご注意。

コンテンツが重なってしまう失敗例

まずは失敗例として,サイドナビの幅を固定してメインコンテンツを「100%」にして、サイドバーの幅分のマージンを「ネガティブマージン」で開けているがコンテンツが重なっているのが分かると思う。
＊ネガティブマージンにしているのは幅を100%にしているので、横いっぱいに広がるので、ネガティブマージンを指定することでサイドバーがcssのfloatで回り込むようにするため。

これを防ぐためには、メインコンテンツの中にもうひとつ入れ子にする必要がある。

コンテンツを入れ子にして重なりを解消する

上記の失敗例のhtml上でdiv要素の「left-content」の中に入れ子としてdiv要素「inner-content」を入れます。＊名前はなんでもいいです。
そして「inner-content」のcssでネガティブマージン分のマージンを設定する。そうすることで「inner-content」の右側にマージンが設定されるので、重なりが解消される。

#left-content{
    width:100%;
    margin-right:-230px;  //ネガティブマージンを設定してサイドバーが回りこむようにする
    float:left;
}

#inner-content{
    margin-right:230px; //ネガティブマージン分のマージンを設定する
    background-color:#57D7EE;
}

上記の設定する事で、ブラウザの幅が変更されても「left-content」のcssの設定で常に幅が可変になりつつもネガティブマージンの設定でサイドバーがカラム落ちすることなく、「inner-content」の設定でサイドバーの幅分のマージンを設定することで常にサイドバーとのスペースを保つことが出来る。