１カラムレイアウト：演習（2）

１カラムレイアウト応用

画像のaltは空に
ボタンは、画像を横に並べること

手順

HTML基本構造の入力
body内にテキストをペーストしマークアップする
基本は、見出しと本文の関係
必然性があれば、div要素でグループ化する
head内にstyle要素を記述する
使用したセレクタを列挙し、margin: o; padding: 0; line-height: 1.0; としリセットする
body要素に文字サイズや文字色を行高を指定する
div要素など全体を囲む要素があれば、その幅指定から記述を始める
見出し要素や本文要素に対して、文字色・文字サイズを指定する
背景色が使用されている場合、paddingを調整しながら指定する
画像がimg要素で挿入する場合は、その幅に注意してその周りを指定する
次に、marginで下の空きを整えていく

ガラスの靴の持ち主を捜しています！

パソコンで応募する方

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

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

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

【個人情報のお取扱いについて】

（プライバシーポリシー）

応募先・お問い合わせ

素材

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ガラスの靴</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/main.gif" alt="ガラスの靴の持ち主を捜しています！"></h1>
<h2><img src="img/b_1.gif" alt="パソコンで応募する方"></h2>
<p>下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、<br>
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p>
</div><!-- /#header -->
<div id="content">
<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>

<p class="center"><img src="img/b_2.gif" alt="応募しますか？"></p>
<p class="center"><img src="img/b_yes.gif" alt="yes">　<img src="img/b_no.gif" alt="no"></p>
</div><!-- /#content -->
<div id="footer">
<p><img src="img/address.gif"></p>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>

《style.css》

@charset "utf-8";

/* reset */
html, body, div, h1, h2, h3, p, ul, li, img {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
img {
  border: none;
  vertical-align: bottom;
}

/* body */
body {
  background: #FFF url(img/bg.gif) repeat-y center top;
  color: #333;
  font-size: 14px;
}

/* layout */
#container {
  width: 600px;
  background: #FFF;
  margin: 0 auto;
}
#header {
  margin-bottom: 10px;
}
#content {
  padding: 20px;
  padding-bottom: 0;
}

/* item */
#header h2 {
  margin: 20px 0 15px 0;
  text-align: center;
}
#header p {
  line-height: 1.5;
  margin-left: 4em;
}
#content h3 {
  margin: 15px 0;
}
#content ul {
  margin-bottom: 30px;
}
#content li {
  line-height: 1.5;
  text-indent: -1em;
  margin: 0 1em 5px 1.6em;
}
#content p {
  line-height: 1.5;
  margin: 0 1em 30px 1.6em;
}
#content p.center {
  text-align: center;
  margin-bottom: 20px;
}