【CSS課題02】１カラムレイアウト

作ってみた

VERSION 2

h2をテキストにして、背景画像を付けてみました。



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-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>川崎アゼリア</title>
<style type="text/css" media="screen, print">

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
		"ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro",
		"Hiragino Kaku Gothic Pro W3",
		"メイリオ",
		Meiryo,
		Osaka,
		"ＭＳ Ｐゴシック",
		"MS PGothic",
		sans-serif;
}
img {
	border: 0;
}
img, input {
	vertical-align: bottom;
}

/* layout */
body{
	color: #7c3523;
	font-size: 0.80em;
	background: #FFF url("images/haikei.gif") repeat-y center;
}
#container {
	width: 600px;
	margin: 0 auto;
	text-align: left;
}
#header {
	width: 600px;
	height: 445px;
}
#content {
	width: 600px;

}
#footer{
	width: 600px;
	height: 96px;
}

/* decoration */
h2{
	color: #7c0823;
	font-size: 120%;
	text-align: center;
	width: 450;
	height: 30;
	background-image: url(images/h2.gif);
	background-repeat: no-repeat;
	background-position: center;
	padding: 8px 0 5px 0;
	margin: 30px 0 15px 0;
}
p.lead{
	line-height: 1.5;
	margin: 0 65px 0 65px;
}
h3{
	margin: 30px 0 10px 10px;
}
ul{
	font-size: 0.90em;
	margin: 0 30px 0 35px;
}
li{
	list-style-type: circle;
	line-height: 1.5em;
	margin: 0 0 5px 0;
}
p{
	line-height:1.5;
	margin: 0 30px 10px 30px;
}
.indent1{
	text-indent: 1em;
}
	form {
	text-align: center;
	margin: 0 0 30px 0;
}
-->
</style>
</head>

<body>
<!-- ▼#container -->
<div id="container">
<!-- ▼#header -->
<div id="header">
<h1><img src="images/main.gif" width="600" height="445" alt="ガラスの靴の持ち主を探しています！" /></h1>
</div>
<!-- ▲#header -->
<!-- ▼#content -->
<div id="content">
<h2>■川崎アゼリア・オープン懸賞　パソコンでご応募する方は</h2>
<p class="lead">下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。<br /></p>
<h3>【応募規約】</h3>
<ul>
<li>パソコンでのご応募は、お一人様一回限り（複数ご応募いただいた場合は最終応募のみ有効）とさせていただきます。<br />
  <span class="indent1">※但し、郵便ハガキでのご応募は、ハガキ１通を１口として、お一人様何口でもご応募できます。</span></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>■上記の内容に同意して応募しますか？</h2>
<form action="" method="post">
<label>
<input type="image" src='images/b_yes.gif' name="button"alt="はい" />
</label>
<label>
<input type="image" src='images/b_no.gif' name="button" alt="いいえ" />
</label>
</form>
</div>
<!-- ▲#content -->
<!-- ▼#footer -->
<div id="footer">
<address><img src="images/footer.gif" width="600" height="96" alt="応募先・お問い合わせ" /></address>
</div>
<!-- ▲#footer -->
</div>
<!-- ▲#container -->
</body>
</html>


VERSION 1

h2は、背景画像に見出し文字を乗せた方がいいんだろうなと思いながら、
自信がなかったので画像で指定しました。



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-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>川崎アゼリア・オープン懸賞</title>
<style type="text/css" media="screen, print">
-->
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
		"ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro",
		"Hiragino Kaku Gothic Pro W3",
		"メイリオ",
		Meiryo,
		Osaka,
		"ＭＳ Ｐゴシック",
		"MS PGothic",
		sans-serif;
}
img {
	border: 0;
}
img, input {
	vertical-align: bottom;
}

/* layout */
body{
	color: #7c3523;
	font-size: 0.80em;
	background: #FFF url("images/haikei.gif") repeat-y center;
}
#container {
	width: 600px;
	margin: 0 auto;
	text-align: left;
}
#header {
	width: 600px;
	height: 445px;
}
#content {
	width: 600px;
}
#footer{
	width: 600px;
	height: 96px;
}

/* decoration */
h2{
	text-alight: center;
	margin: 30px 75px 15px 75px;
}
p.lead{
	line-height: 1.5;
	margin: 0 65px 0 65px;
}
h3{
	margin: 30px 0 10px 10px;
}
ul{
	font-size: 0.90em;
	margin: 0 30px 0 35px;
}
li{
	list-style-type: circle;
	line-height: 1.5em;
	margin: 0 0 5px 0;
}
p{
	line-height:1.5;
	margin: 0 30px 10px 30px;
}
span.indent1{
	text-indent: 1em;　/* これで、インデントは付かないんですよねぇ・・・ */
}
	form {
	text-align: center;
	margin: 0 0 30px 0;
}
-->
</style>
</head>

<body>
<!-- ▼#container -->
<div id="container">
<!-- ▼#header -->
<div id="header">
<h1><img src="images/main.gif" width="600" height="445" alt="ガラスの靴の持ち主を探しています！" /></h1>
</div>
<!-- ▲#header -->
<!-- ▼#content -->
<div id="content">
<h2><img src="images/b_1.gif" width="450" height="30" alt="川崎アゼリア・オープン懸賞　パソコンでご応募する方は" /></h2>
<p class="lead">下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。<br /></p>
<h3>【応募規約】</h3>
<ul>
<li>パソコンでのご応募は、お一人様一回限り（複数ご応募いただいた場合は最終応募のみ有効）とさせていただきます。<br />
  <span class="indent1">※但し、郵便ハガキでのご応募は、ハガキ１通を１口として、お一人様何口でもご応募できます。</span></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/b_2.gif" width="450" height="30" alt="上記の内容に同意して応募しますか？" /></h2>
<form action="" method="post">
<label>
<input type="image" src='images/b_yes.gif' name="button"alt="はい" />
</label>
<label>
<input type="image" src='images/b_no.gif' name="button" alt="いいえ" />
</label>
</form>
</div>
<!-- ▲#content -->
<!-- ▼#footer -->
<div id="footer">
<address><img src="images/footer.gif" width="600" height="96" alt="応募先・お問い合わせ" /></address>
</div>
<!-- ▲#footer -->
</div>
<!-- ▲#container -->
</body>
</html>

BOSSの解答例

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>川崎アゼリア・オープン懸賞</title>
<style>
<!--
* {
	margin: 0;
	padding: 0;
}
body {
	color: #7C3523;
	font-size: 0.8em; /* 約13px相当 */
	font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo, 
		"メイリオ", 
		Osaka, 
		"MS P Gothic", 
		"ＭＳ Ｐゴシック", 
		sans-serif;
	text-align: center;
	background: url(images/haikei.gif) repeat-y center;
}
img {
	border: none;
	vertical-align: bottom;
}
#container {
	margin: 0 auto;
	width: 600px;
	text-align: left;
}
#header {
	height: 445px;
	width: 600px;
}
#content h2 {
	text-align: center;
	margin: 30px 0 10px 0;
}
#content .lead {
	margin: 0 35px;
}
#content h3 {
	margin: 15px 0 5px 10px;
}
#content ul {
	list-style-type: none;
	text-indent: -13px; /* 1emでOK */
	margin: 0 20px 0 30px;
}
#content li {
	line-height: 1.3;
	margin: 0 0 5px 0;
}
#content p {
	margin: 0 20px 10px 27px;
}
form {
	text-align: center;
}
#footer {
	margin: 30px 0 0 0;
	padding: 0;
}
-->
</style>
</head>

<body>
<!-- #container -->
<div id="container">
<!-- #header -->
<div id="header">
<h1><img src="images/main.gif" width="600" height="445" alt="ガラスの靴の持ち主を探しています！"></h1>
</div>
<!-- / #header -->
<!-- #content -->
<div id="content">
<h2><img src="images/b_1.gif" width="450" height="30" alt="川崎アゼリア・オープン懸賞　パソコンでご応募する方は"></h2>
<p class="lead">下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、<br>
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</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/b_2.gif" width="450" height="30" alt="上記の内容に同意して応募しますか？"></h2>
<form action="#" method="post">
<label>
<input type="image" src="images/b_yes.gif" name="button" alt="はい">
</label>
&nbsp;
<label>
<input type="image" src="images/b_no.gif" name="button" alt="いいえ">
</label>
</form>
</div>
<!-- / #content -->
<!-- #footer -->
<div id="footer">
<address><img src="images/footer.gif" width="600" height="96" alt="応募先・お問い合わせ"></address>
</div>
<!-- / #footer -->
</div>
<!-- / #container -->
</body>
</html>
  • 本来、address要素は連絡先の住所（テキスト）に設定されるべきです
  • formボタンの間を空けるために全角スペース（ ）を入れています
  •  （ノンブレイクスペース）