グリッドレイアウトとは
グリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザインとの親和性が高く、最近よく見かけるレイアウトの1つです。
グリッドデザインを使用しているサイト
firadis.net
画面幅に合わせてカラムが落ちていくグリッドデザイン
和洋女子大学
PCレイアウト
使用素材
http://yachin29.webcrow.jp/okazu.zip
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>グリッドレイアウト</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="outer"> <div id="container"> <div class="col"> <header> <h1>楽しいおかず</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><img src="img/ph01_l.jpg" alt=""></li> <li><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><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="col"> <ul> <li><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><img src="img/ph11_l.jpg" alt=""></li> <li><img src="img/ph12_s.jpg" alt=""></li> <li class="right"><img src="img/ph13_mt.jpg" alt=""></li> <li><img src="img/ph14_s.jpg" alt=""></li> <li><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><img src="img/ph18_my.jpg" alt=""></li> </ul> </div> <div class="col three"> <ul> <li><img src="img/ph19_l.jpg" alt=""></li> <li><img src="img/ph20_s.jpg" alt=""></li> <li class="right"><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><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><img src="img/ph30_l.jpg" alt=""></li> </ul> </div> </div> <footer> <p><small>Copyright © 2017 ○○○ All Rights Reserved.</small></p> </footer> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ html, body, h1, ul, li, p { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } img { border: none; vertical-align: bottom; } /*PCレイアウト*/ #container { width:960px; margin:0 auto; overflow:hidden; } .col { width:320px; float:left; } ul { overflow:hidden; } h1 { width:300px; height:300px; background:url(img/logo01.png) no-repeat; margin:10px; text-indent:100%; white-space:nowrap; overflow:hidden; } nav li { width:140px; height:140px; float:left; margin:10px; } nav li a { display:block; width:100%; height:140px; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(img/nav01_01.png) no-repeat; } nav li#menu a { background:url(img/nav02_01.png) no-repeat; } nav li#access a { background:url(img/nav03_01.png) no-repeat; } nav li#news a { background:url(img/nav04_01.png) no-repeat; } nav li a:hover { opacity:0.7; } .col li { float:left; margin:10px; } .col li.right { float:right; } footer { width:100%; height:100px; background:#281605; } footer p { color:#FFFFFF; text-align:center; line-height:100px; } .sp-on { display:none;/*PC時は非表示*/ } /*タブレットレイアウト*/ @media screen and (max-width:959px){ #container { width:640px; } .three { width:640px; } .sp-on { display:block;/*PC時は非表示*/ } #outer { width:640px; margin:0 auto; position: relative; } footer { width:300px; height:300px; background:#281605; position:absolute; bottom:10px; right:10px; } footer p { color:#FFFFFF; text-align:center; line-height:300px; } } /*SPレイアウト*/ @media screen and (max-width:639px){ #container { width:320px; overflow: visible; } .col { width:320px; float:none; } #outer { width:100%; margin:0 auto; position: static; } footer { width:100%; height:100px; background:#281605; position: static; bottom:0; right:0; } }