グリッドレイアウトとは
グリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックを組み合わせて、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザインとの親和性が高く、最近よく見かけるレイアウトの1つです。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>グリッドレイアウト</title> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <div id="container"> <div class="column"> <header> <h1><img src="img/logo01.png" alt=""></h1> <nav> <ul> <li><a href="#"><img src="img/nav01_01.png" alt="CONCEPT"></a></li> <li><a href="#"><img src="img/nav02_01.png" alt="MENU"></a></li> <li><a href="#"><img src="img/nav03_01.png" alt="ACCESS"></a></li> <li><a href="#"><img src="img/nav04_01.png" alt="NEWS"></a></li> </ul> </nav> </header> <ul> <li><img src="img/ph01_l.jpg" alt=""></li> </ul> <ul> <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> </ul> <ul> <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> <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> </ul> <ul> <li><img src="img/ph11_l.jpg" alt=""></li> </ul> <ul> <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> </ul> <ul> <li><img src="img/ph15_l.jpg" alt=""></li> </ul> <ul> <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><!-- /.column --> <div class="column three"> <ul> <li><img src="img/ph19_l.jpg" alt=""></li> </ul> <ul> <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> </ul> <ul> <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> </ul> <ul> <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> </ul> <ul> <li><img src="img/ph30_l.jpg" alt=""></li> </ul> </div><!-- /.column --> </div><!-- /#container --> <footer id="pc"> <p> <small>Copyright © 2016 ○○○ All Rights Reserved.</small> </p> </footer> </body> </html>
/*====reset======*/ html, body, header, nav, h1, ul, li, img, p, small, a, section, footer { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } img { border: none; vertical-align: bottom; } /*IE8用リセット*/ article, aside, dialog, figure, footer, header, hgroup, menu, main, nav, section { display: block; } /* layout =========================*/ #container { width: 960px; margin: 10px auto; overflow: hidden; } .column { float: left; } header { width: 320px; overflow: hidden; } h1 { margin: 10px; } ul { width: 320px; overflow: hidden; } .column ul li{ margin: 10px; float: left; } .column ul li.right { float: right; } footer#pc { width: 100%; height: 50px; background: #281605; } footer#pc p { text-align: center; color: #FFF; font-size: 18px; line-height: 50px; }