グリッドレイアウト

グリッドレイアウトとは

グリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザインとの親和性が高く、最近よく見かけるレイアウトの1つです。

グリッドデザインを使用しているサイト
firadis.net

www.fujiya-peko.co.jp

画面幅に合わせてカラムが落ちていくグリッドデザイン
和洋女子大学

PCレイアウト　

使用素材

http://felica29.starfree.jp/okazu.zip

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アダプティブレイアウト</title>
</head>
<body>
<div class="container">
<div class="col">
<header>
<h1>ロゴ</h1>
<nav class="g-nav">
<ul>
<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>
</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><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">
<ul>
<li><img src="img/ph19_l.jpg" alt="#"></li>
<li><img src="img/ph20_s.jpg" alt="#"></li>
<li><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></footer>
</body>
</html>