この記事は公開から9年、最終更新日からも9年経過しています。内容が古くなっている可能性があります。
左右サイドバーがあるサイトのレスポンシブレイアウト
概要
左右サイドバーがあるサイトのレスポンシブレイアウトを行う機会がありましたので、
デモサイトを使って簡単にまとめてみました。
こんな感じですね。
前提
・ブラウザのウインドウ幅が狭くなると、左右のサイドバーを下に回り込ませます。
・body要素の幅は、ウインドウ幅；800px以上では800px固定、800px未満では、ウインドウ幅と同じ幅(=100%指定)とします。
・p1・・・メイン要素、ウインドウ幅が狭まっても、一番上に表示したいエリア
・p2・・・左サイドバー要素、ウインドウ幅が狭まった時に、p3の次に下に回り込むエリア ※本例では600px以下で回り込みます
・p3・・・右サイドバー要素、ウインドウ幅が狭まった時に、一番最初に下に回り込むエリア ※本例では800px以下で回り込みます
・下に回り込んだらその要素の幅はウインドウ幅と連動させます。
・viewportの設定をお忘れなく。
HTMLとCSS
※もっと美しいコーディングがあるかもしれません。あと、HTML5では、article、section、aside要素とか使いこなしたいところですがとりあえず、divとpだけで記述しました。
※borderとbackgroundは各要素の配置をわかりやすくするために定義しています。
・HTML
<head> <!-- 省略 --> <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, minimum-scale=0.2, maximum-scale=2, user-scalable=yes"> <!-- 省略 --> </head> <body id="left_main_right"> <div class="wrap1 clearFix"> <p class="p1">p1</p> <p class="p2">p2</p> </div> <p class="p3">p3</p> </body>
・CSS
body#left_main_right {
width:800px;
margin:30px auto;
}
body#left_main_right div.wrap1 {
display:block;
float:left;
width:75%;
height:200px;
margin:0;
}
body#left_main_right p.p1 {
display:block;
float:right;
width:75%;
height:200px;
border:solid 1px red;
background-color:#CCC;
float:right;
margin:0;
box-sizing: border-box;
}
body#left_main_right p.p2 {
display:block;
width:25%;
height:200px;
border:solid 1px blue;
background-color:#8f8;
float:left;
margin:0;
box-sizing: border-box;
}
body#left_main_right p.p3 {
display:block;
float:right;
width:25%;
height:200px;
border:solid 1px black;
background-color:#88f;
float:right;
margin:0;
box-sizing: border-box;
}
@media only screen and (max-width: 800px) {
body#left_main_right {
width:95%;
margin:30px auto;
}
body#left_main_right div.wrap1 {
width:100%;
margin:0;
float:none;
overflow:hidden;
height:100%;
}
body#left_main_right p.p3 {
width:100%;
margin:0;
float:none;
}
@media only screen and (max-width: 600px) {
.clearFix:after{
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
zoom:1;
}
body#left_main_right p.p1 {
width:100%;
float:none;
}
body#left_main_right p.p2 {
width:100%;
float:none;
}
}
説明
◎幅800px以上での表示
・bodyの幅を800pxとしておきます。
・p1とp2を div で囲みます。
・この divを float:left、p3を float:rightとします。そうすると左から、 div → p3 の順に表示されます。divとp3の幅は、親要素に対する%で指定。
・p1を float:right、p2を float:leftとします。そうすると、divの中で p2 → p1 と並ぶため、全体的には p2 → p1 → p3 と並びます。p1とp2の幅は、親要素divに対する%で指定。
◎幅800px以下での表示
・body幅を100%とします。
・p1とp2を囲んだdiv要素の幅をウインドウ幅に合わせます。
・p3の幅をウインドウ幅に合わせます。
・div要素とp3要素のfloat:noneとします。
・p3要素が下に回り込みます。
◎幅600px以下での表示
・p1とp2の幅をともに親要素の100%とします。
・p1とp2のfloat:noneとします。
・これでp2要素が下に回り込みます。
・但し、div要素のafter擬似要素でclearfixを設定、かつ、div要素のoverflow:hidden;height:100%;の設定をしなければ、p2要素とp3要素が重なって表示されました。
※実はここは、少しはまってネット検索したところ。
結果を表示したサイト
最後に
お疲れ様でした！！
※他の方法があれば教えて下さい！
/////
