2014-09-14

結果の記述を真似るのではなく、どうすればそうなるのか考えること
画像処理と準備が必要なものは、割愛しました

手順

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

リセット

リセットは、ブラウザが持っている固有のCSSの値をなしにして指定通りの値を反映しやすくするため

見出しを画像で飾る

画像は背景に読み込む（CSS）
.post 幅530px
h1 文字サイズ20px
他、適宜設定

画像素材：

Spread Experiment Web Site
カテゴリーＡ
段落内のテキスト1文字目をインデントします。段落を表す「p」を再定義し、［p の CSS ルール定義］ダイアログが表示されたらカテゴリから［ブロック］を選択します。続けて［Text-indent］に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、1文字目の左側に指定した値のスペースが追加されます。
段落全体をインデントします。STEP-01と同じように「p」を再定義し、カテゴリから［ボックス］を選択します。左右のみをインデントする場合は、最初に［Margin］にある［すべて同一］のチェックをはずします。これにより、上下左右個別にマージンが設定できるようになるので、［Right］と［Left］に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、段落の左右に指定した値のスペースが追加されます。

<body>
<divclass="post">
<h1>Spread Experiment Web Site</h1>
<h2>カテゴリーＡ</h2>
<p>段落内のテキスト1文字目をインデントします。段落を表す「p」を再定義し、［p の CSS ルール定義］ダイアログが表示されたらカテゴリから［ブロック］を選択します。続けて［Text-indent］に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、1文字目の左側に指定した値のスペースが追加されます。</p>
<p>段落全体をインデントします。STEP-01と同じように「p」を再定義し、カテゴリから［ボックス］を選択します。左右のみをインデントする場合は、最初に［Margin］にある［すべて同一］のチェックをはずします。これにより、上下左右個別にマージンが設定できるようになるので、［Right］と［Left］に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、段落の左右に指定した値のスペースが追加されます。</p>
</div>
</body>

html, body, div, h1, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  background: #FFF;
  padding: 30px;
}
.post {
  width: 530px;
}
.post h1 {
  font-size: 20px;
  background: url(img/mark_flower.png) no-repeat;
  border-bottom: 2px solid #FC0;
  padding: 7px 0 10px 45px;
}
.post h2  {
  font-size:14px;
  text-indent: 0;
  color: #FFF;
  margin: 10px 0 15px 0;
  background: #F80;
  padding: 4px 10px 3px 10px;
  display: inline-block;
}
.post p {
  font-size: 14px;
  line-height: 1.6;
  text-indent: 1em;
  margin-bottom: 20px;
}

１カラムレイアウト応用

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

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

パソコンで応募する方

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

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

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

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

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

応募先・お問い合わせ

素材

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>ガラスの靴の持ち主を捜しています！</title>
<style>

</style>
</head>
<body>
<divid="container">
<divid="header">
<h1><imgsrc="img/main.gif"alt="ガラスの靴の持ち主を捜しています！"width="600"height="445"></h1>
<h2><imgsrc="img/b_1.gif"alt="パソコンで応募する方"></h2>
<p>下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、<br>
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p>
</div><!-- /#header -->

<divid="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><ahref="#">（プライバシーポリシー）</a></p>

<h2><imgsrc="img/b_2.gif"alt="応募しますか？"></h2>
<p><imgsrc="img/b_yes.gif"alt="はい"class="yes"><imgsrc="img/b_no.gif"alt="いいえ"></p>
</div><!-- /#content -->

<divid="fooer">
<address><imgsrc="img/address.gif"alt="応募先・お問い合わせ"></address>
</div><!-- /#footer -->

</div><!-- /#container -->
</body>
</html>

Jimdo 好きなサイト100選の更新

よく見ること
幅などは、FirefoxのWeb Developerなどを使い、画像をどのサイズで入れれば良いか計ってみる

参考：講師サイト

解答例

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>Spread Experiment Web Site</title>
<style>
html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height:1.5;
}
</style>
</head>
<body>
<h1>Spread Experiment Web Site</h1>
<h2>カテゴリーＡ</h2>
<p>段落内のテキスト1文字目をインデントします。段落を表す「p」を再定義し、［p の CSS ルール定義］ダイアログが表示されたらカテゴリから［ブロック］を選択します。続けて［Text-indent］に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、1文字目の左側に指定した値のスペースが追加されます。</p>
<p>段落全体をインデントします。STEP-01と同じように「p」を再定義し、カテゴリから［ボックス］を選択します。左右のみをインデントする場合は、最初に［Margin］にある［すべて同一］のチェックをはずします。これにより、上下左右個別にマージンが設定できるようになるので、［Right］と［Left］に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、段落の左右に指定した値のスペースが追加されます。</p>
</body>
</html>

ここまでは、授業内で毎日記述していることです
考えるポイントは、画像をどうやって表示させればよいか、h2の面積をどう作ればよいか

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>ガラスの靴の持ち主を捜しています！</title>
<style>
html, body, h1, h2, h3, p, ul, li, div {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
img {
  border: none;
  vertical-align: bottom;
}
a {
  text-decoration: none;
}
body {
  color: #333;
  font-size: 14px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.5;
  background: url(img/bg.gif) repeat-y center top;
}
#container {
  width: 600px;
  margin: 0 auto;
}
#header {
  margin-bottom: 30px;
  text-align: center;
}
#header h1 {
  margin-bottom: 20px;
}
#header h2 {
  margin-bottom: 10px;
}
#header p {
  text-align: left;
  margin-left: 4em;
  line-height: 1.5;
}
#content {
  margin-bottom: 20px;
  padding: 0 20px;
}
#content h3 {
  margin-bottom: 10px;
}
#content p {
  line-height: 1.5;
  text-indent: 1em;
  margin-bottom: 25px;
  margin-left: 18px;
}
#content ul {
  margin-bottom: 25px;
  padding-left: 16px;
}
#content li {
  margin: 0 0 6px 1em;
  text-indent: -1em;
  line-height: 1.5;
}
#content h2 {
  text-align: center;
  margin-bottom: 10px;
}
#content p.button {
  text-align: center;
  margin-left: -10px
}
#content p.button img.yes {
  margin-right: 10px;
}
</style>
</head>
<body>
<divid="container">
<divid="header">
<h1><imgsrc="img/main.gif"alt="ガラスの靴の持ち主を捜しています！"width="600"height="445"></h1>
<h2><imgsrc="img/b_1.gif"alt="パソコンで応募する方"></h2>
<p>下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、<br>
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p>
</div><!-- /#header -->

<divid="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><ahref="#">（プライバシーポリシー）</a></p>

<h2><imgsrc="img/b_2.gif"alt="応募しますか？"></h2>
<pclass="button"><imgsrc="img/b_yes.gif"alt="はい"class="yes"><imgsrc="img/b_no.gif"alt="いいえ"></p>
</div><!-- /#content -->

<divid="fooer">
<address><imgsrc="img/address.gif"alt="応募先・お問い合わせ"></address>
</div><!-- /#footer -->

</div><!-- /#container -->
</body>
</html>

div要素のでのグループ化がポイントです
スタイルは正確に記述できなくとも、グループ化までできていれば、解決するまでの時間は短時間ですみます
リセットに「list-style: none;」が入っていますが、箇条書きリストの黒丸を除く処理になります

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>複数画像を並べる</title>
<style>
html, body, div, p, img {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#container {
  width: 525px;
  overflow: hidden;
  margin: 30px auto;
}
.disc {
  float: left;
  width: 170px;
  margin: 0 5px 15px 0;
  font-size: 12px;
  text-align: center;
}
.disc img {
  margin-bottom: 3px;
}
</style>
</head>
<body>
<divid="container">
<divclass="disc">
<p><imgsrc="img/s01.jpg"alt=""></p>
<p>Hard Rain</p>
</div>
<divclass="disc">
<p><imgsrc="img/s02.jpg"alt=""></p>
<p>Bob Dylan</p>
</div>
<divclass="disc">
<p><imgsrc="img/s03.jpg"alt=""></p>
<p>Freewheelin</p>
</div>
<divclass="disc">
<p><imgsrc="img/s04.jpg"alt=""></p>
<p>Blood on the Tracks</p>
</div>
<divclass="disc">
<p><imgsrc="img/s05.jpg"alt=""></p>
<p>Bob Dylan's Greatest Hits</p>
</div>
<divclass="disc">
<p><imgsrc="img/s06.jpg"alt=""></p>
<p>John Wesley Harding</p>
</div>
<divclass="disc">
<p><imgsrc="img/s07.jpg"alt=""></p>
<p>Times They Are A-Changin</p>
</div>
<divclass="disc">
<p><imgsrc="img/s08.jpg"alt=""></p>
<p>Blonde on Blonde</p>
</div>
<divclass="disc">
<p><imgsrc="img/s09.jpg"alt=""></p>
<p>Desire</p>
</div>
</div>
</body>
</html>

matsunamima’s diary

2014-09-14

文書構造とCSS

宿題

手順

リセット

見出しを画像で飾る

１カラムレイアウト応用

Jimdo 好きなサイト100選の更新

解答例