- スライスした画像をコーディングする。
- 縦３列、一列ごとに、ユニットごとにまとめる。
- 縦の列は<div>のクラスで、ユニットは<ul>でまとめる。
- まずは整理整頓。
<body>
<div id="container">
<div class="leftColumn">
<h1 class="a1 size22"><img src="img/a01_logo.png"></h1>
<nav>
<ul class="a2">
<li class="size11"><img src="img/a02_nav01.png"></li>
<li class="size11"><img src="img/a03_nav02.png"></li>
<li class="size11"><img src="img/a04_nav03.png"></li>
<li class="size11"><img src="img/a05_nav04.png"></li>
</ul>
</nav>
<ul class="a3">
<li class="size22" class="size22"><img src="img/a06_large.png"></li>
</ul>
<ul class="a4">
<li class="size12"><img src="img/a07_portrait.png"></li>
<li class="size11"><img src="img/a08_small.png"></li>
<li class="size11"><img src="img/a09_small.png"></li>
</ul>
<ul class="a5">
<li class="size21"><img src="img/a10_landscape.png"></li>
<li class="size11"><img src="img/a11_small.png"></li>
<li class="size11"><img src="img/a12_small.png"></li>
</ul>
</div><!--leftColumn--><div class="centerColumn">
<ul class="b1">
<li class="size21"><img src="img/b01_landscape.png"></li>
<li class="size11"><img src="img/b02_small.png"></li>
<li class="size11"><img src="img/b03_small.png"></li>
</ul>
<ul class="b2">
<li class="size22"><img src="img/b04_large.png"></li>
</ul>
<ul class="b3">
<li class="size12"><img src="img/b06_portrait.png"></li>
<li class="size11"><img src="img/b05_small.png"></li>
<li class="size11"><img src="img/b07_small.png"></li>
</ul>
<ul class="b4">
<li class="size22"><img src="img/b08_large.png"></li>
</ul>
<ul class="b5">
<li class="size11"><img src="img/b09_small.png"></li>
<li class="size11"><img src="img/b10_small.png"></li>
<li class="size21"><img src="img/b11_landscape.png"></li>
</ul>
</div><!--centerColumn--><div class="rightColumn">
<ul class="c1">
<li class="size22"><img src="img/c01_large.png"></li>
</ul>
<ul class="c2">
<li class="size11"><img src="img/c03_portrait.png"></li>
<li class="size11"><img src="img/c02_small.png"></li>
<li class="size12"><img src="img/c04_small.png"></li>
</ul>
<ul class="c3">
<li class="size11"><img src="img/c05_small].png"></li>
<li class="size11"><img src="img/c06_small.png"></li>
<li class="size21"><img src="img/c07_landscape.png"></li>
</ul>
<ul class="c4">
<li class="size11"><img src="img/c08_small.png"></li>
<li class="size11"><img src="img/c09_small.png"></li>
<li class="size11"><img src="img/c10_small.png"></li>
<li class="size11"><img src="img/c11_small.png"></li>
</ul>
<ul class="c5">
<li class="size22"><img src="img/c12_large.png"></li>
</ul>
</div><!--rightColumn-->
</div><!--container-->
<footer>
<p>Copyright © 2016 KAMAKURA Bowls All Rights Reserved.</p>
</footer>
</body>
