WEB 6時間目 - hiro

これも5月24日に行なわれたものです。

　お題は、サムネイル付きのフォトアルバム。フォトギャラリーを持ってはいるものの、いわゆる“型に流し込んで終わり”というものなので、ちょっと気合が入る。
　素材・写真を使って下の画像のようにレイアウトしていく。幅のサイズの指定によって見え方がかなり変わっていき、それがよく見えたりみっともなくなったりとかなり落差があるので気をつけていかなくては。
↓htmlタグ

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<title>[4.3 サンプル2] Photo Album</title>
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="section">
<h2>Photo Album</h2>
<ul class="thumbnail">
<li><img src="images/photo01.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo02.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo03.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo04.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo05.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo06.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo07.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo08.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo09.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo10.png" width="133" height="100" alt="代替テキスト" /></li>
</ul>
<p class="continue"><a href="album.html">Continue reading</a></p>
</div>
<pre>&nbsp;</pre>
</body>
</html>

↓cssタグ

@charset  "utf-8;

h2 {
   margin:  0.5em 16px;
   border-bottom: 5px solid #b3cd28;
   text-transform: uppercase;
   font-family: "Trebuchet MS";
   font-size: 105%;
   }

ul.thumbnail {
	margin: 0.5em 16px;
	padding: 0;
	list-style-type: none;
}

ul.thumbnail li {
	margin: 0 8px 8px 0;
	padding: 4px;
	border: 5px solid #eeeeee;
	float: left;
	width: 133px;
	}

ul.thumbnail li img {
	vertical-align: bottom;
}

p.continue {
	margin: 0.5em 16px;
	clear: both;
}

a {
	color:: #669933;
}
.section {
	clear: both;
	width: 830px;
}

↓完成画像

　サムネイルに関しては、縮小もしくは一部の画像を表示してクリックで拡大…というのも調べて作ってみたいと思っています。