グリッドレイアウトとは
グリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザインとの親和性が高く、最近よく見かけるレイアウトの1つです。
グリッドデザインを使用しているサイト
firadis.net
画面幅に合わせてカラムが落ちていくグリッドデザイン
和洋女子大学
PCレイアウト
使用素材
http://yachin29.webcrow.jp/okazu.zip
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>グリッドレイアウトその2</title> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"> <link rel="stylesheet" href="css/style.css"> <!-- iOS Safari and Chrome --> <link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png"> </head> <body> <div class="container"> <div class="column"> <div class="header"> <h1>ロゴ</h1> <ul class="nav"> <li class="concept"><a href="#">concept</a></li> <li class="menu"><a href="#">menu</a></li> <li class="access"><a href="#">access</a></li> <li class="news"><a href="#">news</a></li> </ul> </div><!--/.header--> <ul class="grid"> <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><!--/.column--> <div class="column"> <ul class="grid"> <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="column three"> <ul class="grid"> <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> <li class="tab-on"><img src="img/ph01_l.jpg" alt="#"></li> </ul> </div><!--/.column--> </div><!--/.container--> <div class="footer"> <p><small>© Felica</small></p> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,p,ul,li,small { margin:0; padding:0; } ul { list-style:none; } a { text-decoration:none; } img { vertical-align:bottom; } .container { width:960px; margin:0 auto; overflow:hidden; padding:10px; } .column { width:320px; float:left; } .grid { overflow:hidden; } .grid li { float:left; margin:10px; } .grid li.right { float:right; } h1 { width:300px; height:300px; background:url(../img/logo01.png) no-repeat; white-space:nowrap; text-indent:100%; overflow:hidden; margin:10px; } .nav { overflow:hidden; } .nav li { width:140px; height:140px; float:left; margin:10px; } .nav li a { display:block; height:140px; background:url(../img/nav01_01.png) no-repeat; white-space:nowrap; text-indent:100%; overflow:hidden; } .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; } .footer { width:100%; height:50px; background: #281605; } .footer p { color:#FFF; text-align:center; line-height:50px; } .tab-on { display:none; } @media screen and (max-width:979px){ .container { width:640px;/*この時点で実際の.containerの幅を把握する*/ } .column.three { width:640px; } .tab-on { display:block; } } @media screen and (max-width:659px){ .container { width:320px; overflow:visible; } .column { float:none; } .column.three { width:320px; } .tab-on { display:none; } }