1カラムレイアウトのテスト - Web制作はじめの一歩

今までやったことのおさらいとして、１カラムレイアウトのテストを行った。

html部分は特に間違えなかった
img srcでalt,width,heightを忘れない
CSSのfont-familyは日本語名以外はすべて書けたこと

div idはcontentの範囲を間違える
h1〜h3の指定で失敗
ulとliは・が消せないのでpにした
#footerのimg src部分をaddressではなくpで囲んだ
CSS部分がボロボロ

1と2はcontentの範囲を間違えたため、h2になっている部分をp、h3の部分をh2とした。3はulでliとしていたが「・」が消せないためpにしてしまった。4はaddressを使わなかったことが失敗。大問題は5の部分でクラスセレクタと子孫セレクタが理解できていなかったことで細かい指定が全くできなかった。整理して理解する必要がある。プロパティは半分ぐらいの理解であったので、ここは練習量が足りない。

右の画像のHTMLソースは以下の通り。

<!DOCTYPE HTML>
<html lang="ja">
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<head>
<title>川崎アゼリア・オープン懸賞</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
body {
	color: #7C3523;
	font-size: 0.875em;
	font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo,
		"メイリオ",
		Osaka,
		"MS P Gothic",
		"ＭＳ Ｐゴシック",
		sans-serif;
	line-height: 1.0;
	text-align: center; /* IE6以前のセンター揃え指定 */
	background: url("images/bg.gif") repeat-y center;
}
img {
	border-style: none; /* border: none; でも同じ */
}
ul li {
	list-style-type: none;
}

div#container {
	text-align: left;
	width: 600px;
	margin: 0 auto;
}
div#header {
	width: 600px;
	height: 445px;
	margin: 0 0 30px 0;
}

div#content {
	margin: 0 0 20px 0;
}
div#content h2 {
	text-align: center;
	margin: 0 0 15px 0;
}
div#content p.lead {
	line-height: 1.5;
	margin: 0 0 0 4em;
}
div#content h3 {
	margin: 30px 0 10px 10px;
}
div#content ul {
	text-indent: -14px; /* -1emのほうがいい */
	margin: 0 24px 0 42px;
}
div#content li {
	line-height: 1.5;
	margin: 0 0 5px 0;	
}
div#content p {
	line-height: 1.5;
	margin: 0 20px 10px 42px;;
}
div#content p.btn {
	text-align: center;
}
div#content p.btn img{
	margin: 0 15px 0 0;
}

div#footer {
	width: 600px;
	height: 96px;
}
#footer address {
	line-height: 0; /* 文字の空きを消すための指定 */
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="images/main.gif" width="600" height="445" alt="ガラスの靴の持ち主を探しています！" title="川崎アゼリア・オープン懸賞 ガラスの靴の持ち主を探しています！"></h1>
<!-- /#header --></div>
<div id="content">
<h2><img src="images/b2.gif" width="450" height="30" alt="川崎アゼリア・オープン懸賞　パソコンでご応募する方は"></h2>

<p class="lead">下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p>

<h3>【応募規約】</h3>

<ul>
<li>○パソコンでのご応募は、お一人様一回限り（複数ご応募いただいた場合は最終応募のみ有効）とさせていただきます。<br>
※但し、郵便ハガキでのご応募は、ハガキ１通を１口として、お一人様何口でもご応募できます。</li>
<li>○川崎アゼリアで同時期に行われる他のキャンペーンと重複して当選することはできません。</li>
<li>○当選後の権利譲渡、換金はできません。</li>
<li>○応募の際の必要事項に、不備や虚偽があった場合は、無効になります。</li>
<li>○ご応募は日本国内在住の方に限らせていただきます。</li>
<li>○応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。</li>
<li>○景品の”ガラスの靴”は、11月17日から12月25日まで川崎アゼリア街内（サンライト広場）に展示した靴となりますので、予めご了承ください。また、サイズは23.5ｃｍとなります。</li>
</ul>

<h3>【個人情報のお取扱いについて】</h3>

<p>ご応募にあたり、ご記入いただいた個人情報（郵便番号、住所、氏名、電話番号、年齢）は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。</p>

<h3>【個人情報のお取扱いについて】</h3>

<p><a href="#">（川崎アゼリアプライバシーポリシー）</a></p>
<h2><img src="images/b1.gif" width="450" height="30"alt="上記の内容に同意して応募しますか？"></h2>
<p class="btn">
<img src="images/b_yes_20110301015115.gif" width="72" height="31" alt="はい"><img src="images/b_no_20110301015124.gif" width="72" height="31" alt="いいえ">
</p>
<!-- / #content --></div>
<div id="footer">
<address><img src="images/address.gif" width="600" height="96" alt="応募先・お問い合わせ"></address>
<!-- / #footer --></div>
<!-- / #container --></div>
</body>
</html>