課題 : 楽しいおかず

授業メモ

作成リンク

http://web-study.lolipop.jp/kadai/css/side_dish/

CSSを削っった！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>楽しいおかず♪</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
	<section class="left"><!-- col1▼ -->
		<figure class="box">
			<h1 class="left"><img src="images/01.png"></h1>
		</figure>
		
		<nav class="box">
		<ul>
			<li class="left"><a href="#">
			<img src="images/02.png" class="m-r">
			</a></li>
			<li><a href="#"><img src="images/03.png" class="m-b">
			</a></li>
			<li><a href="#" class="left">
			<img src="images/04.png" class="m-r"></a></li>
			<li><a href="#"><img src="images/05.png">
			</a></li>
		</ul>
		</nav>
	
		<figure class="box">
			<img src="images/11.jpg">
		</figure>
		
		<figure class="box">
			<p class="left"><img src="images/12.jpg" class="m-r"></p>
			<p><img src="images/13.jpg" class="m-b"></p>
			<p><img src="images/14.jpg"></p>
		</figure>
		
		<figure class="box">
			<p class="left"><img src="images/15.jpg" class="m-b"></p>
			<p class="left"><img src="images/16.jpg" class="m-r"></p>
			<p class="left"><img src="images/17.jpg" ></p>
		</figure>
	</section>
	
	<section class="left"><!-- col2▼ -->
		<figure class="box">
			<p class="left"><img src="images/07.jpg" class="m-b"></p>
			<figure class="box">
				<p class="left"><img src="images/08.jpg" class="m-r"></p>
				<p class="left"><img src="images/09.jpg"></p>
			</figure>
		</figure>
		
		<figure class="box">
			<p><img src="images/18.jpg"></p>
		</figure>
		
		<figure class="box"><!-- ( ･´ω･｀) --><!-- 不思議 -->
			<p class="right"><img src="images/21.jpg"></p><!-- right!! -->
			<p><img src="images/19.jpg" class="m-b"></p>
			<p><img src="images/20.jpg" class="left"></p>
			
		</figure>
		
		<figure class="box">
			<p><img src="images/22.jpg"></p>
		</figure>
		
		<figure class="box">
			<p class="left"><img src="images/23.jpg" class="m-b"></p>
			<p class="right"><img src="images/24.jpg"></p>
			<p><img src="images/25.jpg"></p>
		</figure>
	</section>
	
	<section class="left"><!-- col3▼ -->
		<figure class="box">
			<p class="left"><img src="images/10.jpg"></p>
		</figure>
		
		<figure class="box">
			<p><img src="images/06.jpg" class="right"></p>
			<p class="left"><img src="images/26.jpg" class="m-b"></p>
			<p><img src="images/27.jpg" class="left"></p>
		</figure>
		
		<figure class="box">
			<p class="left"><img src="images/28.jpg" class="m-r"></p>
			<p><img src="images/34.jpg" class="m-b"></p>
			<p><img src="images/35.jpg" class="left"></p>
		</figure>
		
		<figure class="box">
			<p class="left"><img src="images/33.jpg" class="m-r" ></p>
			<p><img src="images/29.jpg" class="m-b"></p><!-- なんだここ！！？？( ﾟДﾟ)！ -->
			<p  class="left"><img src="images/30.jpg" class="m-r"></p>
			<p><img src="images/31.jpg"></p>
		</figure>
		
		<figure class="box">
			<p><img src="images/32.jpg"></p>
		</figure>
		</section>
</div>
</body>
</html>

@charset "UTF-8";

* {
	padding: 0;
	margin: 0;
}
ul {
	list-style-type: none;
}
#container {
	width: 960px;
	margin: 20px auto;
}
.left {
	float: left;
}
.right {
	float: right;
}
.box {
	width: 300px;
	height: 300px;
	padding: 0 20px 20px 0;
}
.m-r {
	margin-right: 20px;
}
.m-b {
	margin-bottom: 14px;
}