【RWD】グリッドデザインの演習 - PCゲーマーのWebデザイン備忘録

グリッドデザインの演習です。
f:id:game-web-design:20141009121655p:plain

レスポンシブWEBデザインに対応させるために、メディアクエリーを使ってます。2カラム目に表示させるときは一番最後のカラムが広がるようにしています。

3番目のカラムを3カラム目に表示させるときは、2カラム目の表示のプロパティを上書きさせることで、上に引き戻すことが出来ます。

ソース

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device=width">
<title>グリッドデザイン</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>

<body>
<div id="container">
<div class="content">
<header>
<h1><img src="http://placehold.jp/300x300.png" alt="ロゴ"></h1>
<nav>
<ul>
<li><img src="http://placehold.jp/140x140.png" alt="CONTACT"></li>
<li><img src="http://placehold.jp/140x140.png" alt="MENU"></li>
<li><img src="http://placehold.jp/140x140.png" alt="ACCESS"></li>
<li><img src="http://placehold.jp/140x140.png" alt="NEWS"></li>
</ul>
</nav>
</header>
<section>
<figure><img src="http://placehold.jp/300x300.png" alt=""></figure>
</section>
<section>
<figure><img src="http://placehold.jp/140x300.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
</section>
<section>
<figure><img src="http://placehold.jp/300x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
</section>
</div><!--first-->

<div class="content">
<section>
<figure><img src="http://placehold.jp/300x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
</section>
<section>
<figure><img src="http://placehold.jp/300x300.png" alt=""></figure>
</section>
<section>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure class="right"><img src="http://placehold.jp/140x300.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
</section>
<section>
<figure><img src="http://placehold.jp/300x300.png" alt=""></figure>
</section>
<section>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/300x140.png" alt=""></figure>
</section>
</div><!--second-->

<div class="content">
<section>
<figure><img src="http://placehold.jp/300x300.png" alt=""></figure>
</section>
<section>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure class="right"><img src="http://placehold.jp/140x300.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
</section>
<section>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/300x140.png" alt=""></figure>
</section>
<section>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
<figure><img src="http://placehold.jp/140x140.png" alt=""></figure>
</section>
<section>
<figure><img src="http://placehold.jp/300x300.png" alt=""></figure>
</section>
</div><!--third-->
</div><!--/#container-->
</body>
</html>

css

@charset "utf-8";

/* reset */

html,body,div,header,h1,ul,li,section,figure,img{
  margin: 0;
  padding: 0;
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
}

img{
  border: none;
  vertical-align: bottom;
  margin: 10px;
  float: left;
}

/* layout */
#container {
  margin: 0 auto;
}
header, section {
  width: 320px;
  float: left;
}

header li {
  float: left;
  display: inline;
}

.content{
  width: 320px;
  float: left;
  margin: 10px 0;
  display: inline;
  overflow: hidden;
}

.right{
  float: right;
}
@media screen and (max-width: 639px){
#container{
  width: 320px;
}
}

@media screen and (min-width: 640px){
#container{
  width: 640px;
}

.content:last-child{
  width: 640px;
}
}
@media screen and (min-width: 960px){
#container{
  width: 960px;
}

.content:last-child{
  width: 320px;
}
}