グリッドレイアウト2

Lesson


HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習用</title>
<link href="css/style2.css" rel="stylesheet" type="text/css">

<!--[if It IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

</head>

<body>
<section id="container">
<section id="wrapper1">
<header>
<h1><a href="index.html"><img src="img/common/logo01.png"  
alt="" /></a></h1>
<nav id="navGlobal">
<ul>
<li><a href="#"><img src="img/nav/nav01_01.png" alt="about" 
class="btn1"></a></li>
<li><a href="#"> <img src="img/nav/nav02_01.png" alt="menu" 
class="btn2"></a> </li>
<li><a href="#"> <img src="img/nav/nav03_01.png" alt="access" 
class="btn3"></a></li>
<li><a href="#"><img src="img/nav/nav04_01.png" alt="news" 
class="btn4"></a> </li>
</ul>
</nav>
</header>
</section>

<section id="wrapper2">
<ul class="box3">
<li><a href="#"><img src="img/upload/ph26_l.jpg" alt="" />
</a></li>
</ul>

<ul class="box4">
<li><a href="#"><img src="img/upload/ph36_mt.jpg" alt="" 
class="menu_p_l1"></a></li>
<li><a href="#"><img src="img/upload/ph19_s.jpg"  alt="" 
class="menu_p_l2"></a></li>
<li><a href="#"><img src="img/upload/ph37_s.jpg" alt="" 
class="menu_p_l3"></a></li>
</ul>
</section>

<section id="wrapper3">
<ul class="box5">
<li><a href="#"><img src="img/upload/ph23_my.jpg" alt="" 
class="menu_p_t1"></a></li>
<li><a href="#"><img src="img/upload/ph28_s.jpg" alt="" 
class="menu_p_t2"></a></li>
<li><a href="#"><img src="img/upload/ph05_s.jpg" alt="" 
class="menu_p_t3"></a></li>
</ul>


<ul class="box6">
<li><a href="#"><img src="img/upload/ph12_my.jpg" alt="" 
class="menu_p_t1"></a></li>
<li><a href="#"><img src="img/upload/ph02_s.jpg" alt="" 
class="menu_p_t2"></a></li>
<li><a href="#"><img src="img/upload/ph22_s.jpg"  alt="" 
class="menu_p_t3"></a></li>
</ul>
</section>

<section id="wrapper4">
<ul class="box7">
<li><a href="#"><img src="img/upload/ph10_l.jpg"  alt="" >
</a></li>
</ul>

<ul class="box8">
<li><a href="#"><img src="img/upload/ph07_mt.jpg" alt="" 
class="menu_p_r1"></a></li>
<li><a href="#"><img src="img/upload/ph21_s.jpg" alt="" 
class="menu_p_r2"></a></li>
<li><a href="#"><img src="img/upload/ph03_s.jpg" alt="" 
class="menu_p_r3"></a></li>
</ul>
</section>

<section id="wrapper5">
<ul class="box9">
<li><a href="#"><img src="img/upload/ph09_l.jpg"  alt="" />
</a></li>
</ul>

<ul class="box10">
<li><a href="#"><img src="img/upload/ph13_s.jpg" alt="" 
class="menu_p_b1"></a></li>
<li><a href="#"><img src="img/upload/ph27_s.jpg"　alt="" 
class="menu_p_b2"></a></li>
<li><a href="#"><img src="img/upload/ph24_my.jpg" alt="" 
class="menu_p_b3"></a></li>
</ul>
</section>

<section id="wrapper6">
<ul class="box11">
<li><a href="#"><img src="img/upload/ph11_l.jpg" alt="">
</a></li>
</ul>

<ul class="box12">
<li><a href="#"><img src="img/upload/ph01_mt.jpg" alt="" 
class="menu_p_r1"></a></li>
<li><a href="#"><img src="img/upload/ph18_s.jpg" alt="" 
class="menu_p_r2"></a></li>
<li><a href="#"><img src="img/upload/ph17_s.jpg" alt="" 
class="menu_p_r3"></a></li>
</ul>
</section>

<ul class="box13">
<li><a href="#"><img src="img/upload/ph20_s.jpg" alt="" 
class="menu_p_b1"></a></li>
<li><a href="#"><img src="img/upload/ph06_s.jpg" alt="" 
class="menu_p_b2"></a></li>
<li><a href="#"><img src="img/upload/ph15_my.jpg" alt="" 
class="menu_p_b3"></a></</li>
</ul>

<ul class="box14">
<li><a href="#"><img src="img/upload/ph25_s.jpg"  alt="" 
class="menu_p_c1"></a></li>
<li><a href="#"><img src="img/upload/ph08_s.jpg"  alt="" 
class="menu_p_c2"></a></li>
<li><a href="#"><img src="img/upload/ph16_s.jpg" alt="" 
class="menu_p_c3"></a></li>
<li><a href="#"><img src="img/upload/ph04_s.jpg"  alt="" 
class="menu_p_c4"></a></li>
</ul>

<ul class="box15">
<li><a href="#"><img src="img/upload/ph14_l.jpg" alt="" >
</a></li>
</ul>
</section>
</body>
</html>

CSS

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

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

/* リセット */

html, body, h1, h2, h3, h4, h5, h6, p, address, blockquote, 
pre, form, ul, ol, li, dl, dt, dd, table, th, td, fieldset {
	margin:0 ;
	padding: 0;
	line-height: 1.0;
}

img {
	border: 0;
}

img, input {
	vertical-align: bottom;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul li, ol li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/* レイアウト */
body {
	background: #FFFFFF;
	}


#container {
	background: #FFFFFF;
	width:100%;
	margin: 40px 30px 0;
}

section #wrapper1 {
	width: 300px;
	margin: 0 20px 20px 0;
	float: left;
}

section #wrapper2{
	width: 300px;
	margin: 0 20px 0 0;
	float: left;
	} 

section #wrapper3 {
	width: 300px;
	margin: 0 20px 0 0;
	float: left;
	}
	
section #wrapper4{
	width: 300px;
	margin: 0 20px 0 0;
	float: left;
} 
	
section #wrapper5{
	width: 300px;
	margin: 0 20px 0 0;
	float: left;
} 
	
section #wrapper6{
	width: 300px;
	margin: 0 20px 0 0;
	float: left;
} 	

section #wrapper7 {
	width: 100%;
    float: left;
}
	


h1 {
	margin: 0 0 20px 0;
	float: left;
}

#navGlobal {
	width: 300px;
	height: 300px;
    margin:0 0 0  0;
}

/*  ボックス */
.box3 {
	width: 300px;
	height: 300px;
	margin: 0 0  20px 0;
}

.box4 {
	width: 300px;
	height: 300px;
    margin: 0 0 20px  0;
}

.box5 {
	width: 300px;
	height: 300px;
    margin: 0 0 20px  0;
}

.box6 {
	width: 300px;
	height: 300px;
    margin: 0 0 20px 0;
}

.box7 {
	width: 300px;
	height: 300px;
    margin: 0 0 20px 0;
}

.box8 {
	width: 300px;
	height: 300px;
    margin: 0 0 20px 0;
}

.box9 {
	width: 300px;
	height: 300px;
    margin: 0 0 20px 0;
}

.box10 {
	width: 300px;
	height: 300px;
    margin: 0 0 20px 0;
}

.box11 {
	width: 300px;
	height: 300px;
    margin: 0 0 20px 0;
}

.box12 {
	width: 300px;
	height: 300px;
    margin: 0 0 20px 0;
}

.box13 {
	width: 300px;
	height: 300px;
   margin: 0 20px 20px 0;
	float: left;
}

.box14 {
	width: 300px;
	height: 300px;
    margin: 0 20px 20px 0;
	float: left;
}

.box15 {
	width: 300px;
	height: 300px;
 　margin: 0 20px 20px 0;
	float: left;
}

/* ナビ　*/
.btn1 {
	margin: 0 20px 10px 0;
	float: left;
}

.btn2 {
	margin: 0 0 20px 0;
	float: left;
}

.btn3 {
	margin: 0 20px 0 0;
	float: left;
}

.btn4 {
	margin:0;
	float: left;
}
 
/* メニューセンター　*/ 
.menu_p_c1 {
	margin: 0 20px 10px 0;
	float: left;
}

.menu_p_c2 {
	margin: 0 0 20px 0;
	float: left;
}

.menu_p_c3 {
	margin: 0 20px 0 0;
	float: left;
}

.menu_p_c4 {
	margin:0;
	float: left;
}
 
/* メニュートップ　*/ 
.menu_p_t1 {
	margin: 0 0 20px 0;
	float: left;
}

.menu_p_t2 {
	margin: 0 20px 0 0;
	float: left;
}

.menu_p_t3 {
	margin:0;
	float: left;
}

 /* メニューボトム　*/ 
.menu_p_b1 {
	margin: 0 20px 20px 0;
	float: left;
}

.menu_p_b2 {
	margin: 0 0 20px 0;
	float: left;
}

.menu_p_b3 {
	margin:  0;
	float: left;
}

/* メニューレフト　*/ 
.menu_p_l1 {
	margin: 0 20px 0 0;
	float: left;
}

.menu_p_l2 {
	margin: 0 0 20px 0;
	float: left;
}

.menu_p_l3 {
	margin: 0;
}

/* メニューライト　*/ 
.menu_p_r1 {
	margin: 0 0 0 20px;
	float: right;
}

.menu_p_r2 {
	margin: 0 0 20px 0;
	float: right;
}

.menu_p_r3 {
	margin: 0;
	float: right;
}