グリッドレイアウトはレスポンシブデザインとの親和性が高く、容易にレスポンシブ化出来るため、初心者にとっては良い練習素材になります。
レスポンシブ化するために必要な作業
まずは今回のレイアウトでの必要なブレイクポイントの数とサイズを理解する。今回はPC、タブレット、SPの３種類のレイアウトを作りたいので、ブレイクポイントは2つです。
PCレイアウト 960px以上（3カラム）
タブレット 959px〜641px（2カラム）
SP 640px以下（1カラム）
で、作っていきます。今回は画像部分のレイアウトは３パターンとも共通なので、変更する箇所は器の部分です。3カラムを2カラムにする場合にどこの幅を変えれば良いか考えてみましょう。また、2カラムになった時にバランスを考えて、3つ目のカラムの幅を適切な幅に変えてみましょう。
PCレイアウト（3カラム）
タブレット 959px〜641px（2カラム）
SPレイアウト 640px以下（1カラム）
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>グリッドデザイン</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/rwd.css"> </head> <body> <div id="container"> <div class="column"> <header> <h1 class="size2x2">楽しいおかず</h1> <nav> <ul> <li id="concept"><a href="#">CONCEPT</a></li> <li id="menu"><a href="#">MENU</a></li> <li id="access"><a href="#">ACCESS</a></li> <li id="news"><a href="#">NEWS</a></li> </ul> </nav> </header> <ul> <li class="size2x2"><img src="img/ph01_l.jpg" alt=""></li> <li class="size1x2"><img src="img/ph02_mt.jpg" alt=""></li> <li><img src="img/ph03_s.jpg" alt=""></li> <li><img src="img/ph04_s.jpg" alt=""></li> <li class="size2x1"><img src="img/ph05_my.jpg" alt=""></li> <li><img src="img/ph06_s.jpg" alt=""></li> <li><img src="img/ph07_s.jpg" alt=""></li> </ul> </div> <div class="column"> <ul> <li class="size2x1"><img src="img/ph08_my.jpg" alt=""></li> <li><img src="img/ph09_s.jpg" alt=""></li> <li><img src="img/ph10_s.jpg" alt=""></li> <li class="size2x2"><img src="img/ph11_l.jpg" alt=""></li> <li><img src="img/ph12_s.jpg" alt=""></li> <li class="right size1x2"><img src="img/ph13_mt.jpg" alt=""></li> <li><img src="img/ph14_s.jpg" alt=""></li> <li class="size2x2"><img src="img/ph15_l.jpg" alt=""></li> <li><img src="img/ph16_s.jpg" alt=""></li> <li><img src="img/ph17_s.jpg" alt=""></li> <li class="size2x1"><img src="img/ph18_my.jpg" alt=""></li> </ul> </div> <div class="column third"> <ul> <li class="size2x2"><img src="img/ph19_l.jpg" alt=""></li> <li><img src="img/ph20_s.jpg" alt=""></li> <li class="right size1x2"><img src="img/ph21_mt.jpg" alt=""></li> <li><img src="img/ph22_s.jpg" alt=""></li> <li><img src="img/ph23_s.jpg" alt=""></li> <li><img src="img/ph24_s.jpg" alt=""></li> <li class="size2x1"><img src="img/ph25_my.jpg" alt=""></li> <li><img src="img/ph26_s.jpg" alt=""></li> <li><img src="img/ph27_s.jpg" alt=""></li> <li><img src="img/ph28_s.jpg" alt=""></li> <li><img src="img/ph29_s.jpg" alt=""></li> <li class="size2x2"><img src="img/ph30_l.jpg" alt=""></li> </ul> </div> </div><!-- /#container --> <footer id="pc"><p><small>Copyright © 2017 ○○○ All Rights Reserved.</small></p></footer> </body> </body> </html>
@charset "utf-8"; /*PCレイアウト*/ #container { width: 960px; margin: 10px auto; overflow: hidden; background:#FFFFFF; } .column { width:320px; float: left; } h1 { margin:10px; float:left; background: url(../img/logo01.png) no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; } nav li a { display: block; width: 140px; height: 140px; text-indent: 100%; white-space: nowrap; overflow: hidden; } #concept a { background: url(../img/nav01_01.png) no-repeat; } #menu a { background: url(../img/nav02_01.png) no-repeat; } #access a { background: url(../img/nav03_01.png) no-repeat; } #news a { background: url(../img/nav04_01.png) no-repeat; } ul { width:320px; overflow:hidden; } li{ width:140px; height: 140px; margin: 10px; float: left; } .size2x2 { width: 300px; height: 300px; } .size1x2 { width: 140px; height: 300px; } .size2x1 { width: 300px; height: 140px; } .right { float: right; } footer#pc { width: 100%; height: 100px; background: #281605; } footer#pc p { text-align: center; color: #FFF; font-size: 18px; line-height: 100px; } /*タブレットレイアウト*/ @media screen and (max-width:959px){ #container { width:640px; } .third { width:640px; } ul { width:100%; } } /*スマホレイアウト*/ @media screen and (max-width:640px){ #container { width:320px; overflow: visible; } .column { float: none; } .third { width:320px; } }
