HTML5でのカラムレイアウト

授業

グリッドレイアウト

本家サイトがあるので、metaなどは入れない。全てが同じfloat命令だけでは入らないので注意。


【HTML】

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おかず</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lte IE 9]>
<script  src="http://html5shiv.googlecode.com/svn/trunk/html5.>
</script>
<!--[endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">
</script>
<!--[endif]-->
<style>
article,section,figure,header,nav{display:block}
</style>
</head>
<body>

<article>

<div id="line1">
<header>
<p><img src="img/logo01.png" width="300" height="300" alt="おいしいおかず"></p>
</header>
<nav>
<p><a href="#"><img src="img/nav01_01.png" width="140" height="140" alt="consept"></a></p>
<p><a href="#"><img src="img/nav02_01.png" width="140" height="140" alt="menu"></a></p>
<p><a href="#"><img src="img/nav03_01.png" width="140" height="140" alt="accsess"></a></p>
<p><a href="#"><img src="img/nav04_01.png" width="140" height="140" alt="news"></p>
</nav>
<section>
<p><img src="img/ph26_l.jpg"></p>
</section>
<section>
<p><img src="img/ph36_mt.jpg"></p>
<p><img src="img/ph19_s.jpg"></p>
<p><img src="img/ph37_s.jpg"></p>
</section>
<section>
<p><img src="img/ph23_my.jpg"></p>
<p><img src="img/ph28_s.jpg"></p>
<p><img src="img/ph05_s.jpg"></p>
</section>
</div>

<div id="line2">
<section>
<p><img src="img/ph12_my.jpg"></p>
<p><img src="img/ph02_s.jpg"></p>
<p><img src="img/ph22_s.jpg"></p>
</section>
<section>
<p><img src="img/ph10_l.jpg"></p>
</section>
<section>
<p><img src="img/ph21_s.jpg"></p>
<p2><img src="img/ph07_mt.jpg"></p2>
<p><img src="img/ph03_s.jpg"></p>
</section>
<section>
<p><img src="img/ph09_l.jpg"><p>
</section>
<section>
<p><img src="img/ph13_s.jpg"></p>
<p><img src="img/ph27_s.jpg"></p>
<p><img src="img/ph24_my.jpg"></p>
</section>
</div>

<div id="line3">
<section>
<p><img src="img/ph11_l.jpg"></p>
</section>
<section>
<p><img src="img/ph18_s.jpg"></p>
<p2><img src="img/ph01_mt.jpg"></p2>
<p><img src="img/ph17_s.jpg"></p>
</section>
<section>
<p><img src="img/ph20_s.jpg"></p>
<p><img src="img/ph06_s.jpg"></p>
<p><img src="img/ph15_my.jpg"></p>
</section>
<section>
<p><img src="img/ph25_s.jpg"></p>
<p><img src="img/ph08_s.jpg"></p>
<p><img src="img/ph16_s.jpg"></p>
<p><img src="img/ph04_s.jpg"></p>
</section>
<section>
<p><img src="img/ph14_l.jpg"></p>
</section>
</div>


</article>
</body>
</html>

【css】

@charset "utf-8";
/* CSS Document */

/*reset
*/

html, body, article, header, section, ul, li,img{
  margin: 0;
  padding: 0;
}
img{
	margin:10px;
	float:left;
}
article {
  width: 960px;
  margin: 10px auto;
  overflow: hidden;
}
nav{
	width:320px;
	height:320px;
}
header, section{
  width: 320px;
	height: 320px;
	display:block;
}
 p2{
	float:right;
}
#line1,#line2,#line3{
	width:320px;
	float:left;
}