CSS基礎確認テスト - web-0127のブログ

CSS基礎：演習課題

以下のように表示するよう記述しなさい（値は適宜）

課題01

宮沢賢治作品
いてふの実
そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。
いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。

課題02

課題03

課題04

課題05

課題06

課題07

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

パソコンで応募する方

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

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

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

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

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

同意して応募しますか？

はい
いいえ

応募先・お問い合わせ

素材

課題08

ナビゲーションボタンを「Photoshop」で作成しなさい
http://ashung.deviantart.com/art/chameleon-style-no-2-110302805

【課題01】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>いてふの実</title>
<style>
html, body, div, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  font-size: 16px;
}
#container {
  width: 530px;
  margin: 50px 0 0 50px;
}
h1 {
  margin-bottom: 20px;
}
h2 {
  font-size: 24px;
  color: #FFF;
  background: #64AD53;
  padding: 10px 0 8px 16px;
  border: 1px solid #64AD53;
}
p {
  line-height: 1.6;
  padding: 16px;
  border: 1px solid #64AD53;
}
</style>
</head>
<body>
<div id="container">
<h1>宮沢賢治作品</h1>
<h2>いてふの実</h2>
<p>そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。<br>
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。<br>
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。<br>
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。
いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。<br>
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。</p>
</div>
</body>
</html>

【課題02】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>いてふの実</title>
<style>
html, body, div, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  font-size: 16px;
}
#container {
  width: 530px;
  margin: 50px 0 0 50px;
}
h1 {
  margin-bottom: 20px;
}
h2 {
  margin-bottom: 20px;
  padding-bottom: 43px;
  background: url(img/01.jpg) no-repeat left bottom;
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    serif;
  font-weight: bold;
  text-align: center;
}
p {
  line-height: 1.6;
}
</style>
</head>
<body>
<div id="container">
<h1>宮沢賢治作品</h1>
<h2>いてふの実</h2>
<p>そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。<br>
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。<br>
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。<br>
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。
いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。<br>
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。</p>
</div>
</body>
</html>

【課題03】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>いてふの実</title>
<style>
html, body, div, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  font-size: 16px;
}
#container {
  width: 530px;
  margin: 50px 0 0 50px;
}
h1 {
  margin-bottom: 20px;
}
h2 {
  font-size: 24px;
  background: url(img/01.jpg) no-repeat left top;
  margin-bottom: 20px;
  line-height: 40px;
  padding-left: 16px
}
p {
  line-height: 1.6;
}
</style>
</head>
<body>
<div id="container">
<h1>宮沢賢治作品</h1>
<h2>いてふの実</h2>
<p>そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。<br>
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。<br>
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。<br>
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。
いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。<br>
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。</p>
</div>
</body>
</html>

【課題04】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【課題04】横ナビゲーション</title>
<link rel="stylesheet" href="css/style4.css">
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">サービス概要</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">プレスリリース</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>
</body>
</html>

@charset "utf-8";

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

/* layout */
#nav {
  width: 896px;
  margin: 50px;
}
#nav ul {
  overflow: hidden;
}
#nav ul li {
  float:left;
  font-weight: bold;
}
#nav ul li a {
  display: block;
  width: 128px;
  height: 40px;
  line-height: 40px;
  background: url(../img/04.jpg) no-repeat left top;
  color: #FFF;
  text-align: center;
}
#nav ul li a:hover {
  background: url(../img/04.jpg) no-repeat -128px top;
}

【課題05】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Miles Davis</title>
<style>
html, body, div, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  font-size: 16px;
}
.section {
  margin: 50px 0 0 50px;
  overflow: hidden;
  width: 420px;
}
.disc {
  float: left;
  width: 120px;
  margin-right: 20px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 13px;
  }

.disc img {
  margin-bottom: 3px;
}
</style>
</head>
<body>
<div class="section">
<div class="disc">
<p><img src="01.jpg" width="120" height="120" alt="画像の説明"></p>
<p>画像のキャプション</p>
</div>
<div class="disc">
<p><img src="02.jpg" width="120" height="120" alt="画像の説明"></p>
<p>画像のキャプション</p>
</div>
<div class="disc">
<p><img src="03.jpg" width="120" height="120" alt="画像の説明"></p>
<p>画像のキャプション</p>
</div>
<div class="disc">
<p><img src="04.jpg" width="120" height="120" alt="画像の説明"></p>
<p>画像のキャプション</p>
</div>
<div class="disc">
<p><img src="05.jpg" width="120" height="120" alt="画像の説明"></p>
<p>画像のキャプション</p>
</div>
<div class="disc">
<p><img src="06.jpg" width="120" height="120" alt="画像の説明"></p>
<p>画像のキャプション</p>
</div>
<div class="disc">
<p><img src="07.jpg" width="120" height="120" alt="画像の説明"></p>
<p>画像のキャプション</p>
</div>
<div class="disc">
<p><img src="08.jpg" width="120" height="120" alt="画像の説明"></p>
<p>画像のキャプション</p>
</div>
<div class="disc">
<p><img src="09.jpg" width="120" height="120" alt="画像の説明"></p>
<p>画像のキャプション</p>
</div>
</div>
</body>
</html>

【課題06】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>表組</title>
<style>
html, body, table {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
  font-size: 14px;
}
table {
  margin: 50px 0 0 50px;
  width: 500px;
  border-collapse: collapse;
}
caption {
  margin-bottom: 5px;
}
th {
  width: 100px;
  border: solid 1px #AAA;
  padding: 8px;
  background-color: #F1FDE2;
  text-align: center;
}
td {
  border: solid 1px #AAA;
  padding: 8px;
}
</style>
</head>
<body>
<table>
<caption>テーブルのキャプション</caption>
<tr>
<th>見出しＡ</th>
<td>データＡの内容です。データＡの内容です。データＡの内容です。データＡの内容です。</td>
</tr>
<tr>
<th>見出しＢ</th>
<td>データＢの内容です。データＢの内容です。データＢの内容です。データＢの内容です。</td>
</tr>
<tr>
<th>見出しＣ</th>
<td>データＣの内容です。データＣの内容です。データＣの内容です。データＣの内容です。</td>
</tr>
</table>
</body>
</html>

【課題07】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ガラスの靴の持ち主を捜しています！</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1><img src="img/main.gif" width="600" height="445" alt="ガラスの靴の持ち主を捜しています！"></h1>
<div id="content">
<h2><img src="img/b_1.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>○景品の"ガラスの靴"は、11月17日から12月25日まで商店街内（サン広場）に展示した靴となりますので、予めご了承ください。また、サイズは23.5ｃｍとなります。</li>
</ul>

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

<h3>【個人情報のお取扱いについて】</h3>
<p>（プライバシーポリシー）</p>

<h2><img src="img/b_2.gif" width="450" height="30" alt="同意して応募しますか？"></h2>
<table>
<tr><td><img src="img/b_yes.gif" width="72" height="31" alt="はい"></td><td><img src="img/b_no.gif" width="72" height="31" alt="いいえ"></td></tr>
</table>
</div><!-- /#content -->

<p class="footer"><img src="img/address.gif" width="600" height="96" alt="応募先・お問い合わせ"></p>

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

@charset "utf-8";

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

/* body */
body {
  color: #333;
  font-size: 16px;
  background: url(../img/bg.gif) repeat-y center top;
}
#container {
  width: 600px;
  margin: 0 auto;
}
#content {
  width: 560px;
  padding: 20px;
  color: #9A0505;
}
#content h2 {
  text-align: center;
  margin: 20px 0 15px 0;
}
#content h3 {
  font-size: 20px;
  margin-bottom: 15px;
}
#content p {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 30px;
  text-indent: 1em;
}
#content p.lead {
  margin: 0 40px 30px 40px;
}
#content ul {
  margin-bottom: 30px;
}
#content li {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 5px;
  padding-left: 1em;
  text-indent:-1em;
}
#content table {
  width: 120px;
  margin: auto;
}