2カラムのレスポンシブなリキッドレイアウトのページ(ネガティヴマージンを使う方法)

クリエイティブ

レスポンシブなWebページでリキッドレイアウトにするのは常套手段ですが、
基本的に1カラムか2カラムでも2つのカラムが同じ割合で大きさが変わるものが一般的ではないでしょうか?
でも例えば片方のカラムがサイドバーの場合、幅が変わってしまうと困ってしまいますよね。
ちょっと必要にかられて、片方が固定幅の2カラムのリキッドレイアウトの作成方法を調べてみました。

ネガティヴマージンとは

調べてみたところ、ネガティヴマージンを使うと簡単にできそうです。
マージンとは余白のことですが、値をマイナスにすると余白で作るのではなく、重なる方向に移動したように見えます。
負のマージンたからネガティヴマージンと呼ぶのでしょうね。

作ってみた

では作り方を。
2つのカラムはfloatで並べます。普通可変幅にするにはwidthを100%にします。横に並べるには2つの幅を足したものがそれらが入っているボックスより小さくないと無理です。
LL_01

横に並べるには2つの幅を足したものがそれらが入っているボックスより小さくないと無理です。
固定幅のカラムば幅が決まっています。当たり前ですが。
だから残りのカラムの幅は「100% – (固定幅のカラムの幅)にすればいいわけです。
いうは易しですが、、、。
まずどうにか横に並べてみましょう。
ここでネガティヴマージンの登場です。
固定幅のカラムAの端と可変幅Bのカラムの端が隣り合えば良いのでAに幅と同じ量のマイナスのマージンをかけます。

100% – (Aの幅) + (Aの幅と同じネガティヴマージン) = 100%

そうするとあーら不思議、BがAと同じ列にすっぽりはまって横並びになります。
LL_02

 

ただ、このままだとBはAと重なってしまいますよね。一方が他方に隠されてしまいます。
ここでBをAに重ならないように圧縮しなければなりません。
圧縮するためにどうするかというと、Bのボックスを二重にします。
LL_03

そして内側のボックスB2にAの幅と同じマージンをつけます。マージンをつけることによってAの端までBの端が後退するので重なりがなくなるわけです。
LL_04

まとめ

基本的なコードは以下のような感じになります。
まず、html。flexibl-1が外側でflexible-2が内側のカラムです。

<div class=”fixed”>A(固定幅)</div>
<div class=”flexble-1″>
<div class=”flexble-2″>B2(可変幅)</div>
</div>

cssは以下のような感じです。ここでは固定幅カラムの幅を150pxにしています。
.fixed{
float: left;
margin-right: -150px;
}
.flexible-1{
width: 100%;
}
.flexible-2{
margin-left: 150px;
}

サンプルはこちらです。

今回の記事を書くにあたり以下のページを参考にさせていただきました。
ありがとうございました。

みんな大好きリキッドレイアウト~固定幅+リキッドレイアウトに挑戦~ | SetucoCMSプロジェクト

コメント

  1. […] 前回のエントリーで、2カラムのリキッドレイアウトの勉強、「ネガティブマージンを利用したリキドレイアウト」を勉強しました。 実はそん方法を採用するより先に「フレックスボッ […]