レスポンシブWebデザインの考え方
レスポンシブWebデザインの基本
- メディアクエリを設定
- ブレイクポイント(767px 以下の場合)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン</title> <style> #container { width: 80%; height: auto; margin: 0 auto; } .box { text-align: center; line-height: 100px; } .wrapA { overflow: hidden; } .box1 { width: 100%; height: 100px; background: #FBE4EE; border: 4px solid #EA6094; box-sizing: border-box; } .box2, .box3 { float: left; height: 300px; box-sizing: border-box; } .box2 { width: 75%; background: #F3F7E0; border: 4px solid #B5D22F; } .box3 { width: 25%; background: #EDF7FD; border: 4px solid #4188C9; } @media screen and (max-width:797px){ .wrapA>.box { width: 100%; height: 100px; float:none; } } </style> </head> <body> <div id="container"> <div class="box box1">BOX1</div> <div class="wrapA"> <div class="box box2">BOX2</div> <div class="box box3">BOX3</div> </div><!-- /.wrapA --> </div><!-- /#container --> </body> </html>
レスポンシブWebデザインの応用
- 上記「基礎」の内容を変更します
- 「.box2」「.box3」「.box4」を変更します
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン</title> <style> #container { width: 80%; height: auto; margin: 0 auto; } .box { text-align: center; line-height: 100px; } .wrapA { overflow: hidden; } .box1 { width: 100%; height: 100px; background: #FBE4EE; border: 4px solid #EA6094; box-sizing: border-box; } .box2, .box3, .box4 { float: left; height: 300px; box-sizing: border-box; } .box2 { width: 20%; background: #FFFBCB; border: 4px solid #FFE500; } .box3 { width: 60%; background: #EDF7FD; border: 4px solid #4188C9; } .box4 { width: 20%; background: #F3F7E0; border: 4px solid #B5D22F; } @media screen and (max-width:797px){ .wrapA>.box { width: 100%; height: 100px; float:none; } } </style> </head> <body> <div id="container"> <div class="box box1">BOX1</div> <div class="wrapA"> <div class="box box2">BOX2</div> <div class="box box3">BOX3</div> <div class="box box4">BOX4</div> </div><!-- /.wrapA --> </div><!-- /#container --> </body> </html>
文書構造を整理する
- メインコンテンツである「BOX2」を優先する(並び順を変える)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブWebデザインの考え方(1)</title> <style> #container { width: 50%; height: auto; margin: 50px auto; } .box { height: 300px; text-align: center; line-height: 300px; } .wrapA { overflow: hidden; } .wrapA>.box { float: left; box-sizing: border-box; /*paddingとborderをwidthとheightに含める*/ } .wrapB { float: left; overflow: hidden; width: 80%; } .wrapB>.box { float: right; box-sizing: border-box; /*paddingとborderをwidthとheightに含める*/ } .box1 { height: 50px; background: #FFCCFF; border: 4px solid #FF99CC; line-height: 50px; } .box2 { width: 75%; background: #FFFBCB; border: 4px solid #FFE500; } .box3 { width: 25%; background: #EDF7FD; border: 4px solid #4188C9; } .box4 { width: 20%; background: #D9F8BA; border: 4px solid #66CC00; } .box5 { height: 50px; background: #F4E7BD; border: 4px solid #FF9900; line-height: 50px; } @media screen and (max-width:797px) { #container { width: 100%; } .wrapA>.box{ width: 100%; float: none; } .wrapB, .wrapB>.box { width: 100%; float: none; } } </style> </head> <body> <div id="container"> <div class="box box1">BOX1</div> <div class="wrapA"> <div class="wrapB"> <div class="box box2">BOX2</div> <div class="box box3">BOX3</div> </div><!-- /.wrapB --> <div class="box box4">BOX4</div> </div><!-- /.wrapA --> <div class="box box5">BOX5</div> </div><!-- /#container --> </body> </html>
バリエーション
- 「wrapB」と「BOX4」の float:none にした場合
- 「wrapB」と「BOX4」の幅を「100%」に変更
- 「BOX2」と「BOX3」の float:none にし、幅を100%にした場合
- 「BOX4」の高さは、「BOX2の高さ」+「BOX3の高さ」に変更