【Chapter6】課題

概要と目標 HTMLの課題にチャレンジしよう。

完成例を参考にして、カフェのサイトを作成して下さい。

今回のゴール

RERUN

TOPページカフェサイトのTOPページを作成

完成例を参考にカフェのサイトのTOPページを作成して下さい。

TOPページの概要
項目	説明
目標タイム	30分
保存場所とファイル名	「chapter06」 › "index.html"
HTMLのバージョン	HTML5
文字コード	UTF-8
画像ファイルの場所	全ページ共通用「chapter06」 › 「images」 › 「common」
画像ファイルの場所	TOPページ用「chapter06」 › 「images」 › 「top」
リンク先	ロゴ・・・　"index.html" 文字列「ホーム」・・・　"index.html" 文字列「こだわり」・・・　「philosophy」 › "index.html" 文字列「メニュー」・・・　「menu」 › "index.html" 文字列「採用情報」・・・　「recruit」 › "index.html" 文字列「スタッフ募集」・・・　「recruit」 › "index.html" 文字列「スタッフブログ」・・・　"#" 文字列「お問い合わせ」・・・　「contact」 › "index.html"

文章

chapter06/index.html

Dummy Cafe
【ロゴ画像】

サイト内メニュー

ホーム
こだわり
メニュー
採用情報

【メインビジュアル画像】

「いつもの。」が通じる、あなたのカフェ。

Dummy Cafeに1度でもご来店頂いたお客様は、次回から「いつもの。」でご注文頂けます。
もちろんあなたのお好きな、コーヒーの苦さ、お砂糖やミルクの量もちゃんと把握しています。
あなたがDummy Cafeにいる間は、「いつもの。」というたったひとつの魔法の言葉で全てが通じる。
そんな架空のサービスを提供しています。

【コーヒーの画像】

当店のパティシエが作る！今月のおすすめスイーツ。

ブルーベリーのタルト

【タルトの画像】

採れたてのブルーベリーをたくさん使ったブルーベリーのタルトです。
苦目のコーヒーとよく合います。

¥ 500

お知らせ

スタッフ募集のお知らせ

あなたもDummy Cafeで一緒に働きませんか？私達と一緒に働いてくれるアルバイトを募集します。詳しくは、スタッフの募集ページへ

2017.2.10

Dummy Cafeがオープンしました。

ついにDummy Cafeがオープンしました。みなさん是非コーヒーを飲みに来て下さいね。

2017.1.25

Dummy CafeのWEBサイトが完成しました。

本日、Dummy CafeのWEBサイトを公開しました。

2017.1.21

関連情報

スタッフブログ
スタッフ募集

ホーム
こだわり
メニュー
採用情報
お問い合わせ

〒56X-00XX
大阪府架空市架空1-1-1

© 2018 Dummy Cafe

完成イメージ

ブラウザでの表示例

RERUN

新しいウインドウで表示する

こだわりページカフェサイトのこだわりページを作成

完成例を参考にカフェのサイトのこだわりページを作成して下さい。

こだわりページの概要
項目	説明
目標タイム	20分
保存場所とファイル名	「chapter06」 › 「philosophy」 › "index.html"
HTMLのバージョン	HTML5
文字コード	UTF-8
画像ファイルの場所	全ページ共通用「chapter06」 › 「images」 › 「common」
画像ファイルの場所	こだわりページ用「chapter06」 › 「images」 › 「philosophy」
リンク先	ロゴ・・・　"index.html" 文字列「ホーム」・・・　"index.html" 文字列「こだわり」・・・　「philosophy」 › "index.html" 文字列「メニュー」・・・　「menu」 › "index.html" 文字列「採用情報」・・・　「recruit」 › "index.html" 文字列「メニューを見る」・・・　「menu」 › "index.html" 文字列「スタッフブログ」・・・　"#" 文字列「スタッフ募集」・・・　「recruit」 › "index.html" 文字列「お問い合わせ」・・・　「contact」 › "index.html"

文章

chapter06/philosophy/index.html

Dummy Cafe
【ロゴ画像】

サイト内メニュー

ホーム
こだわり
メニュー
採用情報

こだわり
私たちは、たった1杯のコーヒーにとてつもなくこだわっています。

厳選したコーヒー豆。

ほんとうに美味しいコーヒーをお客様に提供するために、厳選された最高のコーヒー豆のみを焙煎して使用しています。また、焙煎したコーヒー豆は時間が立つと味が落ちてしまうので、Dummy Cafeでは、その日に提供するコーヒーは、その日に焙煎したコーヒー豆しか使用しません。

【コーヒー豆の画像】

93℃のハンドドリップ。

おいしいコーヒーの抽出するのに最適なお湯の温度は93℃です。Dummy Cafeでは、この93℃にこだわってコーヒーを抽出しています。もちろん、機械は使わず1杯ずつ丁寧にハンドドリップでコーヒーを抽出し、お客様に提供します。

【ハンドドリップの画像】

メニューを見る

関連情報

スタッフブログ
スタッフ募集

ホーム
こだわり
メニュー
採用情報
お問い合わせ

〒56X-00XX
大阪府架空市架空1-1-1

© 2018 Dummy Cafe

完成イメージ

ブラウザでの表示例

RERUN

新しいウインドウで表示する

メニューページカフェサイトのメニューページを作成

完成例を参考にカフェのサイトのメニューページを作成して下さい。

メニューページの概要
項目	説明
目標タイム	20分
保存場所とファイル名	「chapter06」 › 「menu」 › "index.html"
HTMLのバージョン	HTML5
文字コード	UTF-8
画像ファイルの場所	全ページ共通用「chapter06」 › 「images」 › 「common」
画像ファイルの場所	メニューページ用「chapter06」 › 「images」 › 「menu」
リンク先	ロゴ・・・　"index.html" 文字列「ホーム」・・・　"index.html" 文字列「こだわり」・・・　「philosophy」 › "index.html" 文字列「メニュー」・・・　「menu」 › "index.html" 文字列「採用情報」・・・　「recruit」 › "index.html" 文字列「フード」・・・　ページ内の「フード」コンテンツ文字列「ドリンク」・・・　ページ内の「ドリンク」コンテンツ文字列「スタッフブログ」・・・　"#" 文字列「スタッフ募集」・・・　「recruit」 › "index.html" 文字列「お問い合わせ」・・・　「contact」 › "index.html"

文章

chapter06/menu/index.html

Dummy Cafe
【ロゴ画像】

サイト内メニュー

ホーム
こだわり
メニュー
採用情報

メニュー

フード
ドリンク

フード

日替わりパスタ
【パスタの画像】
¥980

今週のガレット
【ガレットの画像】
¥980

ミックスサンド
【ミックスサンドの画像】
¥540

季節のケーキ
【ケーキの画像】
¥500

ドリンク

ブレンド・コーヒー
【ブレンド・コーヒーの画像】
¥360

カフェ・ラテ
【カフェ・ラテの画像】
¥400

ブレンド・ティ
【ブレンド・ティの画像】
¥380

関連情報

スタッフブログ
スタッフ募集

ホーム
こだわり
メニュー
採用情報
お問い合わせ

〒56X-00XX
大阪府架空市架空1-1-1

© 2018 Dummy Cafe

完成イメージ

ブラウザでの表示例

RERUN

新しいウインドウで表示する

採用情報ページカフェサイトの採用情報ページを作成

完成例を参考にカフェのサイトの採用情報ページを作成して下さい。

採用情報ページの概要
項目	説明
目標タイム	20分
保存場所とファイル名	「chapter06」 › 「recruit」 › "index.html"
HTMLのバージョン	HTML5
文字コード	UTF-8
画像ファイルの場所	全ページ共通用「chapter06」 › 「images」 › 「common」
リンク先	ロゴ・・・　"index.html" 文字列「ホーム」・・・　"index.html" 文字列「こだわり」・・・　「philosophy」 › "index.html" 文字列「メニュー」・・・　「menu」 › "index.html" 文字列「採用情報」・・・　「recruit」 › "index.html" 文字列「お問い合わせフォーム」・・・　「contact」 › "index.html" 文字列「スタッフブログ」・・・　"#" 文字列「スタッフ募集」・・・　「recruit」 › "index.html" 文字列「お問い合わせ」・・・　「contact」 › "index.html"

文章

chapter06/recruit/index.html

Dummy Cafe
【ロゴ画像】

サイト内メニュー

ホーム
こだわり
メニュー
採用情報

採用情報

私たちと一緒に働きませんか？

仕事内容	お客様への最高のサービス提供して頂きます
雇用形態	パート・アルバイトスタッフ
応募資格	高校生の方はお断りさせていただいております
勤務時間
10:00 〜 15:00
17:00 〜 23:00
給与	時給1400円 〜
待遇	当店のコーヒーをお好きに飲むことができます
応募方法	お問い合わせフォームよりご応募下さい

関連情報

スタッフブログ
スタッフ募集

ホーム
こだわり
メニュー
採用情報
お問い合わせ

〒56X-00XX
大阪府架空市架空1-1-1

© 2018 Dummy Cafe

完成イメージ

ブラウザでの表示例

RERUN

新しいウインドウで表示する

お問い合わせページカフェサイトのお問い合わせページを作成

完成例を参考にカフェのサイトのお問い合わせページを作成して下さい。

お問い合わせページの概要
項目	説明
目標タイム	20分
保存場所とファイル名	「chapter06」 › 「contact」 › "index.html"
HTMLのバージョン	HTML5
文字コード	UTF-8
画像ファイルの場所	全ページ共通用「chapter06」 › 「images」 › 「common」
リンク先	ロゴ・・・　"index.html" 文字列「ホーム」・・・　"index.html" 文字列「こだわり」・・・　「philosophy」 › "index.html" 文字列「メニュー」・・・　「menu」 › "index.html" 文字列「採用情報」・・・　「recruit」 › "index.html" 文字列「お問い合わせフォーム」・・・　「contact」 › "index.html" 文字列「スタッフブログ」・・・　"#" 文字列「スタッフ募集」・・・　「recruit」 › "index.html" 文字列「お問い合わせ」・・・　「contact」 › "index.html"
フォームの送信先	「contact」 › "conf.php" （存在しません）

文章

chapter06/contact/index.html

Dummy Cafe
【ロゴ画像】

サイト内メニュー

ホーム
こだわり
メニュー
採用情報

お問い合わせ

下記のフォームよりお問い合わせ下さい。

お問い合わせ種別

ご予約について
お店について
メニューについて
採用について
その他

お名前

メールアドレス

お問い合わせ内容

送信する

関連情報

スタッフブログ
スタッフ募集

ホーム
こだわり
メニュー
採用情報
お問い合わせ

〒56X-00XX
大阪府架空市架空1-1-1

© 2018 Dummy Cafe

完成イメージ

ブラウザでの表示例

RERUN

新しいウインドウで表示する

解答例解答例を確認しよう。

完成したら、解答例を確認しましょう。
絶対的な正解はないので、参考程度に確認しましょう。

TOPページ

chapter06/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Dummy Cafe - 最高のコーヒーとくつろぎの空間を提供する架空のカフェ</title>
</head>
<body>
  <header>
    <h1>
      Dummy Cafe<br>
      <a href="index.html"><img src="images/common/logo-dummy-cafe.png" width="160" height="30" alt="Dummy Cafe"></a>
    </h1>
    <nav>
      <h2>サイト内メニュー</h2>
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="philosophy/index.html">こだわり</a></li>
        <li><a href="menu/index.html">メニュー</a></li>
        <li><a href="recruit/index.html">採用情報</a></li>
      </ul>
    </nav>
    <p><img src="images/top/mainvisual-top.jpg" width="960" height="400" alt="たった1杯のコーヒーが、あなたの全てを変える。"></p>
  </header>
  <main>
    <section>
      <h2>「いつもの。」が通じる、あなたのカフェ。</h2>
      <p>
        Dummy Cafeに<em>1度でも</em>ご来店頂いたお客様は、次回から「いつもの。」でご注文頂けます。 もちろんあなたのお好きな、コーヒーの苦さ、お砂糖やミルクの量もちゃんと把握しています。 あなたがDummy Cafeにいる間は、「いつもの。」というたったひとつの魔法の言葉で全てが通じる。 そんな架空のサービスを提供しています。
      </p>
      <p><img src="images/top/img-coffee.jpg" width="360" height="255" alt="さぁ、いつもの苦目のブラックコーヒーと、いつものチョコレートをどうぞ。"></p>
    </section>
    <section>
      <h2>当店のパティシエが作る！今月のおすすめスイーツ。</h2>
      <section>
        <h3>ブルーベリーのタルト</h3>
        <img src="images/top/img-blueberry-tart.jpg" width="360" height="255" alt="今月のおすすめはブルーベリーをたくさん使ったタルト">
        <p>
          <em>採れたて</em>のブルーベリーをたくさん使ったブルーベリーのタルトです。苦目のコーヒーとよく合います。
        </p>
        <p>&yen; 500</p>
      </section>
    </section>
    <section>
      <h2>お知らせ</h2>
      <article>
        <h3>スタッフ募集のお知らせ</h3>
        <p>あなたもDummy Cafeで一緒に働きませんか？私達と一緒に働いてくれるアルバイトを募集します。詳しくは、<a href="recruit/index.html">スタッフ募集</a>ページへ</p>
        <p><time datetime="2017-02-10">2017.2.10</time></p>
      </article>
      <article>
        <h3>Dummy Cafeがオープンしました。</h3>
        <p>ついにDummy Cafeがオープンしました。みなさん是非コーヒーを飲みに来て下さいね。</p>
        <p><time datetime="2017-01-25">2017.1.25</time></p>
      </article>
      <article>
        <h3>Dummy CafeのWebサイトが完成しました。</h3>
        <p>Dummy CafeのWebサイトを公開しました。</p>
        <p><time datetime="2017-01-21">2017.1.21</time></p>
      </article>
    </section>
  </main>
  <aside>
    <h2>関連情報</h2>
    <ul>
      <li><a href="#">スタッフブログ</a></li>
      <li><a href="recruit/index.html">スタッフ募集</a></li>
    </ul>
  </aside>
  <footer>
    <ul>
      <li><a href="index.html">ホーム</a></li>
      <li><a href="philosophy/index.html">こだわり</a></li>
      <li><a href="menu/index.html">メニュー</a></li>
      <li><a href="recruit/index.html">採用情報</a></li>
      <li><a href="contact/index.html">お問い合わせ</a></li>
    </ul>
    <address>
      〒56X-00XX<br>
      大阪府架空市架空1-1-1
    </address>
    <p><small>&copy; 2018 Dummy Cafe</small></p>
  </footer>
</body>
</html>

答えを見る

こだわりページ

chapter06/philosophy/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>こだわり - Dummy Cafe</title>
</head>
<body>
  <header>
    <h1>
      Dummy Cafe<br>
      <a href="../index.html"><img src="../images/common/logo-dummy-cafe.png" width="160" height="30" alt="Dummy Cafe"></a>
    </h1>
    <nav>
      <h2>サイト内メニュー</h2>
      <ul>
        <li><a href="../index.html">ホーム</a></li>
        <li><a href="index.html">こだわり</a></li>
        <li><a href="../menu/index.html">メニュー</a></li>
        <li><a href="../recruit/index.html">採用情報</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>こだわり</h1>
    <p>私たちは、たった1杯のコーヒーに<em>とてつもなく</em>こだわっています。</p>
    <section>
      <h2>厳選したコーヒー豆。</h2>
      <p>
        ほんとうに美味しいコーヒーをお客様に提供するために、厳選された最高のコーヒー豆のみを焙煎して使用しています。また、焙煎したコーヒー豆は時間が立つと味が落ちてしまうので、Dummy Cafeでは、<strong>その日に提供するコーヒーは、その日に焙煎したコーヒー豆しか使用しません。</strong>
      </p>
      <p><img src="../images/philosophy/img-coffee-beans.jpg" width="360" height="255" alt="厳選されたコーヒー豆のおいしさを感じて下さい。"></p>
    </section>
    <section>
      <h2>93℃のハンドドリップ。</h2>
      <p>
        <strong>おいしいコーヒーの抽出するのに最適なお湯の温度は93℃です。</strong>Dummy Cafeでは、この93℃にこだわってコーヒーを抽出しています。もちろん、機械は使わず1杯ずつ丁寧にハンドドリップでコーヒーを抽出し、お客様に提供します。
      </p>
      <p><img src="../images/philosophy/img-hand-drip.jpg" width="360" height="255" alt="93℃のお湯でハンドドリップしたおいしいコーヒーをお楽しみ下さい。"></p>
    </section>
    <p><a href="../menu/index.html">メニューを見る</a></p>
  </main>
  <aside>
    <h2>関連情報</h2>
    <ul>
      <li><a href="#">スタッフブログ</a></li>
      <li><a href="../recruit/index.html">スタッフ募集</a></li>
    </ul>
  </aside>
  <footer>
    <ul>
      <li><a href="../index.html">ホーム</a></li>
      <li><a href="index.html">こだわり</a></li>
      <li><a href="../menu/index.html">メニュー</a></li>
      <li><a href="../recruit/index.html">採用情報</a></li>
      <li><a href="../contact/index.html">お問い合わせ</a></li>
    </ul>
    <address>
      〒56X-00XX<br>
      大阪府架空市架空1-1-1
    </address>
    <p><small>&copy; 2018 Dummy Cafe</small></p>
  </footer>
</body>
</html>

答えを見る

メニューページ

chapter06/menu/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>メニュー - Dummy Cafe</title>
</head>
<body>
  <header>
    <h1>
      Dummy Cafe<br>
      <a href="../index.html"><img src="../images/common/logo-dummy-cafe.png" width="160" height="30" alt="Dummy Cafe"></a>
    </h1>
    <nav>
      <h2>サイト内メニュー</h2>
      <ul>
        <li><a href="../index.html">ホーム</a></li>
        <li><a href="../philosophy/index.html">こだわり</a></li>
        <li><a href="index.html">メニュー</a></li>
        <li><a href="../recruit/index.html">採用情報</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>メニュー</h1>
    <ul>
      <li><a href="#food">フード</a></li>
      <li><a href="#drink">ドリンク</a></li>
    </ul>
    <section id="food">
      <h2>フード</h2>
      <ul>
        <li>
          <h3>日替わりパスタ</h3>
          <p><img src="../images/menu/img-pasta.jpg" width="360" height="255" alt="その日一番おいしいパスタをご提供します。"></p>
          <p>&yen;980</p>
        </li>
        <li>
          <h3>今週のガレット</h3>
          <p><img src="../images/menu/img-galette.jpg" width="360" height="255" alt="その週で一番おいしいガレットをご提供します。"></p>
          <p>&yen;980</p>
        </li>
        <li>
          <h3>ミックスサンド</h3>
          <p><img src="../images/menu/img-sand.jpg" width="360" height="255" alt="野菜をたくさん作ったヘルシーなサンドです。"></p>
          <p>&yen;540</p>
        </li>
        <li>
          <h3>季節のケーキ</h3>
          <p><img src="../images/menu/img-cake.jpg" width="360" height="255" alt="季節に合わせたケーキです。"></p>
          <p>&yen;500</p>
        </li>
      </ul>
    </section>
    <section id="drink">
      <h2>ドリンク</h2>
      <ul>
        <li>
          <h3>ブレンド・コーヒー</h3>
          <p><img src="../images/menu/img-coffee.jpg" width="360" height="255" alt="こだわりのブレンドコーヒーです。"></p>
          <p>&yen;360</p>
        </li>
        <li>
          <h3>カフェ・ラテ</h3>
          <p><img src="../images/menu/img-cafe-latte.jpg" width="360" height="255" alt="ラテアートにこだわったカフェラテです。"></p>
          <p>&yen;400</p>
        </li>
        <li>
          <h3>ブレンド・ティ</h3>
          <p><img src="../images/menu/img-tea.jpg" width="360" height="255" alt="とってもおいしい紅茶です。"></p>
          <p>&yen;380</p>
        </li>

      </ul>
    </section>
  </main>
  <aside>
    <h2>関連情報</h2>
    <ul>
      <li><a href="#">スタッフブログ</a></li>
      <li><a href="../recruit/index.html">スタッフ募集</a></li>
    </ul>
  </aside>
  <footer>
    <ul>
      <li><a href="../index.html">ホーム</a></li>
      <li><a href="../philosophy/index.html">こだわり</a></li>
      <li><a href="index.html">メニュー</a></li>
      <li><a href="../recruit/index.html">採用情報</a></li>
      <li><a href="../contact/index.html">お問い合わせ</a></li>
    </ul>
    <address>
      〒56X-00XX<br>
      大阪府架空市架空1-1-1
    </address>
    <p><small>&copy; 2018 Dummy Cafe</small></p>
  </footer>
</body>
</html>

答えを見る

採用情報ページ

chapter06/recruit/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>採用情報 - Dummy Cafe</title>
</head>
<body>
  <header>
    <h1>
      Dummy Cafe<br>
      <a href="../index.html"><img src="../images/common/logo-dummy-cafe.png" width="160" height="30" alt="Dummy Cafe"></a>
    </h1>
    <nav>
      <h2>サイト内メニュー</h2>
      <ul>
        <li><a href="../index.html">ホーム</a></li>
        <li><a href="../philosophy/index.html">こだわり</a></li>
        <li><a href="../menu/index.html">メニュー</a></li>
        <li><a href="index.html">採用情報</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>採用情報</h1>
    <p>私たちと一緒に働きませんか？</p>
    <table border="1">
      <tr>
        <th>仕事内容</th>
        <td>お客様への最高のサービス提供して頂きます</td>
      </tr>
      <tr>
        <th>雇用形態</th>
        <td>パート・アルバイトスタッフ</td>
      </tr>
      <tr>
        <th>応募資格</th>
        <td>高校生の方はお断りさせていただいております</td>
      </tr>
      <tr>
        <th>勤務時間</th>
        <td>
          <ul>
            <li><time>10:00</time> 〜 <time>15:00</time></li>
            <li><time>17:00</time> 〜 <time>23:00</time></li>
          </ul>
        </td>
      </tr>
      <tr>
        <th>給与</th>
        <td>時給1400円 〜</td>
      </tr>
      <tr>
        <th>待遇</th>
        <td>
          当店のコーヒーをお好きに飲むことができます
        </td>
      </tr>
      <tr>
        <th>応募方法</th>
        <td>
          <a href="../contact/index.html">お問い合わせフォーム</a>よりご応募下さい
        </td>
      </tr>
    </table>
  </main>
  <aside>
    <h2>関連情報</h2>
    <ul>
      <li><a href="#">スタッフブログ</a></li>
      <li><a href="index.html">スタッフ募集</a></li>
    </ul>
  </aside>
  <footer>
    <ul>
      <li><a href="../index.html">ホーム</a></li>
      <li><a href="../philosophy/index.html">こだわり</a></li>
      <li><a href="../menu/index.html">メニュー</a></li>
      <li><a href="index.html">採用情報</a></li>
      <li><a href="../contact/index.html">お問い合わせ</a></li>
    </ul>
    <address>
      〒56X-00XX<br>
      大阪府架空市架空1-1-1
    </address>
    <p><small>&copy; 2018 Dummy Cafe</small></p>
  </footer>
</body>
</html>

答えを見る

お問い合わせページ

chapter06/contact/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせ - Dummy Cafe</title>
</head>
<body>
  <header>
    <h1>
      Dummy Cafe<br>
      <a href="../index.html"><img src="../images/common/logo-dummy-cafe.png" width="160" height="30" alt="Dummy Cafe"></a>
    </h1>
    <nav>
      <h2>サイト内メニュー</h2>
      <ul>
        <li><a href="../index.html">ホーム</a></li>
        <li><a href="../philosophy/index.html">こだわり</a></li>
        <li><a href="../menu/index.html">メニュー</a></li>
        <li><a href="../recruit/index.html">採用情報</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>お問い合わせ</h1>
    <p>下記のフォームよりお問い合わせ下さい。</p>
    <form action="conf.php" method="post">
      <dl>
        <dt><label for="type">お問い合わせ種別</label></dt>
        <dd>
          <select id="type" name="type">
            <option value="予約について">ご予約について</option>
            <option value="お店について">お店について</option>
            <option value="メニューについて">メニューについて</option>
            <option value="採用について">採用について</option>
            <option value="その他">その他</option>
          </select>
        </dd>
        <dt><label for="your_name">お名前</label></dt>
        <dd>
          <input type="text" id="your_name" name="your_name">
        </dd>
        <dt><label for="your_mail">メールアドレス</label></dt>
        <dd>
          <input type="email" id="your_mail" name="your_mail">
        </dd>
        <dt><label for="inquiry">お問い合わせ内容</label></dt>
        <dd>
          <textarea id="inquiry" name="inquiry" rows="8" cols="80"></textarea>
        </dd>
      </dl>
      <p><input type="submit" value="送信する"></p>
    </form>
  </main>
  <aside>
    <h2>関連情報</h2>
    <ul>
      <li><a href="#">スタッフブログ</a></li>
      <li><a href="../recruit/index.html">スタッフ募集</a></li>
    </ul>
  </aside>
  <footer>
    <ul>
      <li><a href="../index.html">ホーム</a></li>
      <li><a href="../philosophy/index.html">こだわり</a></li>
      <li><a href="../menu/index.html">メニュー</a></li>
      <li><a href="../recruit/index.html">採用情報</a></li>
      <li><a href="index.html">お問い合わせ</a></li>
    </ul>
    <address>
      〒56X-00XX<br>
      大阪府架空市架空1-1-1
    </address>
    <p><small>&copy; 2018 Dummy Cafe</small></p>
  </footer>
</body>
</html>

答えを見る

まとめ HTMLはWebの土台。

HTMLはWebページの情報そのもの。
適切な要素を使うことで、全てのユーザーに情報がより伝わりやすくなる。

HTMLで全てのユーザーに情報を相違なく提供する
文章に対して適切な要素でマークアップする
視覚的な表現は、CSSで行う。

Chapter06 課題

文章

完成イメージ

文章

完成イメージ

文章

完成イメージ

文章

完成イメージ

文章

完成イメージ

TOPページ

こだわりページ

メニューページ

採用情報ページ

お問い合わせページ