html5でグリッドレイアウト

CSS html5

140×140、300×300、140×300、300×140の画像だけでレイアウトを作る練習をしました。

完成形


html5形式で作ります。

作成のコツ
  • まず、pタグを使ってすべての画像を並べます。
  • html5ではpタグの代わりに
    を使うので、
    に打ち替えます。
  • html5ではdivタグの代わりに
    を使います。まとまりごとに
    で囲みます。
  • 大きなまとまりごとにレイアウトの順番を考えます。紙に書いたりして考えます。
  • ID名やclass名に「navi」は使わない。「nav」が良いです。


1つの四角形は300px×300pxです。
この順番で見せるようにするとほとんどfloat:left;で、縦長の写真を右側に配置する時だけfloat:right;にすれば上手く配置できます。
html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>楽しいおかず</title>
<!--[if lte IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/style.css" media="print,screen">
<style>
article, section, figure,header,nav{
	display:block;
	}
</style>
</head>
<body>
<article>
<header>
<h1><img src="img/logo01.png" width="300" height="300" alt="楽しいおかず"></h1>
<nav>
<ul>
<li class="concept"><a href="#"><img src="img/nav01_01.png" width="140" height="140"  alt="concept"></a></li>
<li class="menu"><a href="#"><img src="img/nav02_01.png" width="140" height="140" alt="menu" ></a></li>
<li class="access"><a href="#"><img src="img/nav03_01.png" width="140" height="140"  alt="access"></a></li>
<li class="news"><a href="#"><img src="img/nav04_01.png" width="140" height="140" alt="news"></a></li>
</ul>
</nav>
</header>
<section>
<figure><img src="img/ph12_my.jpg" width="300" height="140"></figure>
<figure><img src="img/ph02_s.jpg" width="140" height="140"></figure>
<figure><img src="img/ph22_s.jpg" width="140" height="140"></figure>
</section>
<section>
<figure><img src="img/ph11_l.jpg" width="300" height="300"></figure>
</section>
<section>
<figure><img src="img/ph10_l.jpg" width="300" height="300"></figure>
</section>
<section>
<figure><img src="img/ph18_s.jpg" width="140" height="140"></figure>
<figure class="right"><img src="img/ph01_mt.jpg" width="140" height="300"></figure>
<figure><img src="img/ph17_s.jpg" width="140" height="140"></figure>
</section>
<section>
<figure><img src="img/ph26_l.jpg" width="300" height="300"></figure>
</section>
<section>
<figure><img src="img/ph21_s.jpg" width="140" height="140"></figure>
<figure class="right"><img src="img/ph07_mt.jpg" width="140" height="300"></figure>
<figure><img src="img/ph03_s.jpg" width="140" height="140"></figure>
</section>
<section>
<figure><img src="img/ph20_s.jpg" width="140" height="140"></figure>
<figure><img src="img/ph06_s.jpg" width="140" height="140"></figure>
<figure><img src="img/ph15_my.jpg" width="300" height="140"></figure>
</section>
<section>
<figure><img src="img/ph36_mt.jpg" width="140" height="300"></figure>
<figure><img src="img/ph19_s.jpg" width="140" height="140"></figure>
<figure><img src="img/ph37_s.jpg" width="140" height="140"></figure>
</section>
<section>
<figure><img src="img/ph09_l.jpg" width="300" height="300"></figure>
</section>
<section>
<figure><img src="img/ph25_s.jpg" width="140" height="140"></figure>
<figure><img src="img/ph08_s.jpg" width="140" height="140"></figure>
<figure><img src="img/ph16_s.jpg" width="140" height="140"></figure>
<figure><img src="img/ph04_s.jpg" width="140" height="140"></figure>
</section>
<section>
<figure><img src="img/ph23_my.jpg" width="300" height="140"></figure>
<figure><img src="img/ph28_s.jpg" width="140" height="140"></figure>
<figure><img src="img/ph05_s.jpg" width="140" height="140"></figure>
</section>
<section>
<figure><img src="img/ph13_s.jpg" width="140" height="140"></figure>
<figure><img src="img/ph27_s.jpg" width="140" height="140"></figure>
<figure><img src="img/ph24_my.jpg" width="300" height="140"></figure>
</section>
<section>
<figure><img src="img/ph14_l.jpg" width="300" height="300"></figure>
</section>
</article>
</body>
</html>



CSS

*{
	margin:0;
	padding:0;
}

article{
	width:960px;
	margin:10px auto;
	overflow:hidden;
}

nav{

	 display:block;
}

li{
	 list-style-type:none;
	 float:left;
}


header,section{
	float:left;
	width:320px;
}

img{
	margin:10px;
	float:left;
}

.right{
	float:right;
}