楽しいおかず

CSS課題

完成しました。
制作時間30分
http://felica.boy.jp/tanosiiokazu/
短いコードは美しい！ってことで、CSSを結構削って作成してみました。

バランス調整で2行（padding: 10px 0 10px 0; overflow: hidden;）余計なもの入っているので、CSSは15行→13行で完了。

  • HTML
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>楽しいおかずレイアウト</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
	<article>
		<header>
			<h1>
				<img src="image/logo.png" alt="">
			</h1>
			<nav>
				<ul>
				<li><a><img src="image/nav01.png" alt=""></a></li>
				<li><a><img src="image/nav02.png" alt=""></a></li>
				<li><a><img src="image/nav03.png" alt=""></a></li>
				<li><a><img src="image/nav04.png" alt=""></a></li>
				</ul>
			</nav>
		</header>
		<section>
			<figure><img src="image/1-1.jpg" alt=""></figure>
			<figure><img src="image/1-2.jpg" alt=""></figure>
			<figure><img src="image/1-3.jpg" alt=""></figure>
		</section>
		<section>
			<figure><img src="image/2-1.jpg" alt=""></figure>
		</section>
		<section>
			<figure><img src="image/3-1.jpg" alt=""></figure>
		</section>
		<section>
			<figure><img src="image/4-1.jpg" alt=""></figure>
			<figure class="right"><img src="image/4-3.jpg" alt=""></figure>
			<figure><img src="image/4-2.jpg" alt=""></figure>
		</section>
			<figure><img src="image/11-1.jpg" alt=""></figure>
		<section>
			<figure><img src="image/12-1.jpg" alt=""></figure>
			<figure class="right"><img src="image/12-3.jpg" alt=""></figure>
			<figure><img src="image/12-2.jpg" alt=""></figure>
		</section>
		<section>
			<figure><img src="image/13-1.jpg" alt=""></figure>
			<figure><img src="image/13-2.jpg" alt=""></figure>
			<figure><img src="image/13-3.jpg" alt=""></figure>
		</section>
		<section>
			<figure><img src="image/5-1.jpg" alt=""></figure>
			<figure><img src="image/5-2.jpg" alt=""></figure>
			<figure><img src="image/5-3.jpg" alt=""></figure>
		</section>
		<section>
			<figure><img src="image/6-1.jpg" alt=""></figure>
		</section>
			<figure><img src="image/7-1.jpg" alt=""></figure>
			<figure><img src="image/7-2.jpg" alt=""></figure>
			<figure><img src="image/7-3.jpg" alt=""></figure>
			<figure><img src="image/7-4.jpg" alt=""></figure>
		<section>
			<figure><img src="image/8-1.jpg" alt=""></figure>
			<figure><img src="image/8-2.jpg" alt=""></figure>
			<figure><img src="image/8-3.jpg" alt=""></figure>
		</section>
		<section>
			<figure><img src="image/9-1.jpg" alt=""></figure>
			<figure><img src="image/9-2.jpg" alt=""></figure>
			<figure><img src="image/9-3.jpg" alt=""></figure>
		</section>
		<section>
			<figure><img src="image/10-1.jpg" alt=""></figure>
		</section>
	</article>

</body>

</html>

@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
}

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

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

section {
	width: 320px;
	height: 320px;
	float: left;
}

ul {
	list-style-type: none;
}

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

.right {
	float: right;
}