トップページの作成

完成例を参考にトップページのHTMLを完成させましょう。

1. 新規ファイルを作成し、全体構造の要素を記述してください
   • ファイル名： "index.html" （「Chapter23」フォルダ内に作成）
   • HTMLのバージョン： "HTML5"
   • 文字コード： "UTF-8"
   • タイトル： "Dummy Cafe – 最高のコーヒーとくつろぎの空間を提供する架空のカフェ"
2. 以下の文章を適切な箇所に貼り付け、特殊な記述が必要な文字を適切な記述に変更してください

   【ロゴ画像】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
   
   関連情報
   
   スタッフブログ
   スタッフ募集
   
   ホーム
   こだわり
   メニュー
   採用情報
   お問い合わせ
   
   〒129-0816
   東京都架空区架空6-1-1
   
   © 2016 Dummy Cafe

3. 完成例を参考に、段落や見出し、リスト、連絡先、強調、改行、著作権表記文の要素を用いて全てのコンテンツをマークアップしてください
4. 以下の文字列にリンクを設定してください。
   • 文字列「ロゴ画像」： 「Chapter23」フォルダ直下の "index.html"
   • 文字列「ホーム」： 「Chapter23」フォルダ直下の "index.html"
   • 文字列「こだわり」： 「philosophy」フォルダ内の"index.html"
   • 文字列「メニュー」： 「menu」フォルダ内の"index.html"
   • 文字列「採用情報」： 「recruit」フォルダ内の"index.html"
   • 文字列「スタッフ募集」： 「recruit」フォルダ内の"index.html"
   • 文字列「スタッフブログ」： リンク先のページが存在しないため "#"
   • 文字列「お問い合わせ」： 「contact」フォルダ内の"index.html"
5. 以下の文字列を画像に置き換えてください。
   • 文字列「【ロゴ画像】」
     • 画像ファイル： 「images」-> 「common」フォルダ内の"logo-dummy-cafe.png"
     • 画像の横幅： "160px"
     • 画像の高さ： "30px"
     • 代替えテキスト： "Dummy Cafe"
   • 文字列「【メインビジュアル画像】」
     • 画像ファイル： 「images」-> 「top」フォルダ内の"mainvisual-top.jpg"
     • 画像の横幅： "960px"
     • 画像の高さ： "400px"
     • 代替えテキスト： "たった1杯のコーヒーが、あなたの全てを変える。"
   • 文字列「【コーヒーの画像】」
     • 画像ファイル： 「images」-> 「top」フォルダ内の"img-coffee.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "さぁ、いつもの苦目のブラックコーヒーと、いつものチョコレートをどうぞ。"
   • 文字列「【タルトの画像】」
     • 画像ファイル： 「images」-> 「top」フォルダ内の"img-blueberry-tart.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "今月のおすすめはブルーベリーをたくさん使ったタルト"
6. ヘッダーやフッターなどのページ内の基本構造や、セクションの範囲を示して下さい

RERUN

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

こだわりページの作成

完成例を参考にこだわりページのHTMLを完成させましょう。

1. 新規フォルダと新規ファイルを作成し、全体構造の要素を記述してください
   • フォルダ名： "philosophy" （「Chapter23」フォルダ内に作成）
   • ファイル名： "index.html" （「philosophy」フォルダ内に作成）
   • HTMLのバージョン： "HTML5"
   • 文字コード： "UTF-8"
   • タイトル： "こだわり – Dummy Cafe"
2. 以下の文章を適切な箇所に貼り付け、特殊な記述が必要な文字を適切な記述に変更してください

   【ロゴ画像】Dummy Cafe
   
   サイト内メニュー
   
   ホーム
   こだわり
   メニュー
   採用情報
   
   こだわり
   私たちは、たった1杯のコーヒーにとてつもなくこだわっています。
   
   厳選したコーヒー豆。
   
   ほんとうに美味しいコーヒーをお客様に提供するために、厳選された最高のコーヒー豆のみを焙煎して使用しています。また、焙煎したコーヒー豆は時間が立つと味が落ちてしまうので、Dummy Cafeでは、その日に提供するコーヒーは、その日に焙煎したコーヒー豆しか使用しません。
   
   【コーヒー豆の画像】
   
   93℃のハンドドリップ。
   
   おいしいコーヒーの抽出するのに最適なお湯の温度は93℃です。Dummy Cafeでは、この93℃にこだわってコーヒーを抽出しています。もちろん、機械は使わず1杯ずつ丁寧にハンドドリップでコーヒーを抽出し、お客様に提供します。
   
   【ハンドドリップの画像】
   
   メニューを見る
   
   関連情報
   
   スタッフブログ
   スタッフ募集
   
   ホーム
   こだわり
   メニュー
   採用情報
   お問い合わせ
   
   〒129-0816
   東京都架空区架空6-1-1
   
   © 2016 Dummy Cafe

3. 完成例を参考に、段落や見出し、リスト、連絡先、強調、重要、改行、著作権表記文の要素を用いて全てのコンテンツをマークアップしてください
4. 以下の文字列にリンクを設定してください。
   • 文字列「ロゴ画像」： 「Chapter23」フォルダ直下の "index.html"
   • 文字列「ホーム」： 「Chapter23」フォルダ直下の "index.html"
   • 文字列「こだわり」： 「philosophy」フォルダ内の"index.html"
   • 文字列「メニュー」： 「menu」フォルダ内の"index.html"
   • 文字列「採用情報」： 「recruit」フォルダ内の"index.html"
   • 文字列「メニューを見る」： 「menu」フォルダ内の"index.html"
   • 文字列「スタッフ募集」： 「recruit」フォルダ内の"index.html"
   • 文字列「スタッフブログ」： リンク先のページが存在しないため "#"
   • 文字列「お問い合わせ」： 「contact」フォルダ内の"index.html"
5. 以下の文字列を画像に置き換えてください。
   • 文字列「【ロゴ画像】」
     • 画像ファイル： 「images」-> 「common」フォルダ内の"logo-dummy-cafe.png"
     • 画像の横幅： "160px"
     • 画像の高さ： "30px"
     • 代替えテキスト： "Dummy Cafe"
   • 文字列「【コーヒー豆の画像】」
     • 画像ファイル： 「images」-> 「philosophy」フォルダ内の"img-coffee-beans.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "厳選されたコーヒー豆のおいしさを感じて下さい。"
   • 文字列「【ハンドドリップの画像】」
     • 画像ファイル： 「images」-> 「philosophy」フォルダ内の"img-hand-drip.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "93℃のお湯でハンドドリップしたおいしいコーヒーをお楽しみ下さい。"
6. ヘッダーやフッターなどのページ内の基本構造や、セクションの範囲を示して下さい

RERUN

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

メニューページの作成

完成例を参考にこだわりページのHTMLを完成させましょう。

1. 新規フォルダと新規ファイルを作成し、全体構造の要素を記述してください
   • フォルダ名： "menu" （「Chapter23」フォルダ内に作成）
   • ファイル名： "index.html" （「menu」フォルダ内に作成）
   • HTMLのバージョン： "HTML5"
   • 文字コード： "UTF-8"
   • タイトル： "メニュー – Dummy Cafe"
2. 以下の文章を適切な箇所に貼り付け、特殊な記述が必要な文字を適切な記述に変更してください

   【ロゴ画像】Dummy Cafe
   
   サイト内メニュー
   
   ホーム
   こだわり
   メニュー
   採用情報
   
   メニュー
   
   フード
   ドリンク
   フード
   
   日替わりパスタ
   【パスタの画像】
   ¥980
   
   今週のガレット
   【ガレットの画像】
   ¥980
   
   ミックスサンド
   【ミックスサンドの画像】
   ¥540
   
   季節のケーキ
   【ケーキの画像】
   ¥500
   
   ドリンク
   
   ブレンド・コーヒー
   【ブレンド・コーヒーの画像】
   ¥360
   
   カフェ・ラテ
   【カフェ・ラテの画像】
   ¥400
   
   ブレンド・ティ
   【ブレンド・ティの画像】
   ¥380
   
   関連情報
   
   スタッフブログ
   スタッフ募集
   
   ホーム
   こだわり
   メニュー
   採用情報
   お問い合わせ
   
   〒129-0816
   東京都架空区架空6-1-1
   
   © 2016 Dummy Cafe

3. 完成例を参考に、段落や見出し、リスト、連絡先、改行、著作権表記文の要素を用いて全てのコンテンツをマークアップしてください
4. 以下の文字列にリンクを設定してください。
   • 文字列「ロゴ画像」： 「Chapter23」フォルダ直下の "index.html"
   • 文字列「ホーム」： 「Chapter23」フォルダ直下の "index.html"
   • 文字列「こだわり」： 「philosophy」フォルダ内の"index.html"
   • 文字列「メニュー」： 「menu」フォルダ内の"index.html"
   • 文字列「採用情報」： 「recruit」フォルダ内の"index.html"
   • 文字列「フード」： 同一ページ内の「フード」のコンテンツへリンク
   • 文字列「ドリンク」： 同一ページ内の「ドリンク」のコンテンツへリンク
   • 文字列「スタッフ募集」： 「recruit」フォルダ内の"index.html"
   • 文字列「スタッフブログ」： リンク先のページが存在しないため "#"
   • 文字列「お問い合わせ」： 「contact」フォルダ内の"index.html"
5. 以下の文字列を画像に置き換えてください。
   • 文字列「【ロゴ画像】」
     • 画像ファイル： 「images」-> 「common」フォルダ内の"logo-dummy-cafe.png"
     • 画像の横幅： "160px"
     • 画像の高さ： "30px"
     • 代替えテキスト： "Dummy Cafe"
   • 文字列「【パスタの画像】」
     • 画像ファイル： 「images」-> 「menu」フォルダ内の"img-pasta.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "その日一番おいしいパスタをご提供します。"
   • 文字列「【ガレットの画像】」
     • 画像ファイル： 「images」-> 「menu」フォルダ内の"img-galette.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "その週で一番おいしいガレットをご提供します。"
   • 文字列「【ミックスサンドの画像】」
     • 画像ファイル： 「images」-> 「menu」フォルダ内の"img-sand.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "野菜をたくさん作ったヘルシーなサンドです。"
   • 文字列「【ケーキの画像】」
     • 画像ファイル： 「images」-> 「menu」フォルダ内の"img-cake.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "季節に合わせたケーキです。"
   • 文字列「【ブレンド・コーヒーの画像】」
     • 画像ファイル： 「images」-> 「menu」フォルダ内の"img-coffee.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "こだわりのブレンドコーヒーです。"
   • 文字列「【カフェ・ラテの画像】」
     • 画像ファイル： 「images」-> 「menu」フォルダ内の"img-cafe-latte.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "ラテアートにこだわったカフェラテです。"
   • 文字列「【ブレンド・ティの画像】」
     • 画像ファイル： 「images」-> 「menu」フォルダ内の"img-tea.jpg"
     • 画像の横幅： "360px"
     • 画像の高さ： "255px"
     • 代替えテキスト： "とってもおいしい紅茶です。"
6. ヘッダーやフッターなどのページ内の基本構造や、セクションの範囲を示して下さい

RERUN

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

採用情報ページの作成

完成例を参考にこだわりページのHTMLを完成させましょう。

1. 新規フォルダと新規ファイルを作成し、全体構造の要素を記述してください
   • フォルダ名： "recruit" （「Chapter23」フォルダ内に作成）
   • ファイル名： "index.html" （「recruit」フォルダ内に作成）
   • HTMLのバージョン： "HTML5"
   • 文字コード： "UTF-8"
   • タイトル： "採用情報 – Dummy Cafe"
2. 以下の文章を適切な箇所に貼り付け、特殊な記述が必要な文字を適切な記述に変更してください

   【ロゴ画像】Dummy Cafe
   
   サイト内メニュー
   
   ホーム
   こだわり
   メニュー
   採用情報
   
   採用情報
   
   私たちと一緒に働きませんか？
   
   仕事内容	お客様への最高のサービス提供して頂きます
   雇用形態	パート・アルバイトスタッフ
   応募資格	高校生の方はお断りさせていただいております
   勤務時間
   10:00 〜 15:00
   17:00 〜 23:00
   給与	時給1400円 〜
   待遇	当店のコーヒーをお好きに飲むことができます
   応募方法	お問い合わせフォームよりご応募下さい
   
   関連情報
   
   スタッフブログ
   スタッフ募集
   
   ホーム
   こだわり
   メニュー
   採用情報
   お問い合わせ
   
   〒129-0816
   東京都架空区架空6-1-1
   
   © 2016 Dummy Cafe

3. 完成例を参考に、段落や見出し、リスト、テーブル、連絡先、改行、著作権表記文の要素を用いて全てのコンテンツをマークアップしてください
4. 以下の文字列にリンクを設定してください。
   • 文字列「ロゴ画像」： 「Chapter23」フォルダ直下の "index.html"
   • 文字列「ホーム」： 「Chapter23」フォルダ直下の "index.html"
   • 文字列「こだわり」： 「philosophy」フォルダ内の"index.html"
   • 文字列「メニュー」： 「menu」フォルダ内の"index.html"
   • 文字列「採用情報」： 「recruit」フォルダ内の"index.html"
   • 文字列「お問い合わせフォーム」： 「contact」フォルダ内の"index.html"
   • 文字列「スタッフ募集」： 「recruit」フォルダ内の"index.html"
   • 文字列「スタッフブログ」： リンク先のページが存在しないため "#"
   • 文字列「お問い合わせ」： 「contact」フォルダ内の"index.html"
5. 以下の文字列を画像に置き換えてください。
   • 文字列「【ロゴ画像】」
     • 画像ファイル： 「images」-> 「common」フォルダ内の"logo-dummy-cafe.png"
     • 画像の横幅： "160px"
     • 画像の高さ： "30px"
     • 代替えテキスト： "Dummy Cafe"
6. ヘッダーやフッターなどのページ内の基本構造や、セクションの範囲を示して下さい

RERUN

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

お問い合わせページの作成

完成例を参考にこだわりページのHTMLを完成させましょう。

1. 新規フォルダと新規ファイルを作成し、全体構造の要素を記述してください
   • フォルダ名： "contact" （「Chapter23」フォルダ内に作成）
   • ファイル名： "index.html" （「contact」フォルダ内に作成）
   • HTMLのバージョン： "HTML5"
   • 文字コード： "UTF-8"
   • タイトル： "お問い合わせ – Dummy Cafe"
2. 以下の文章を適切な箇所に貼り付け、特殊な記述が必要な文字を適切な記述に変更してください

   【ロゴ画像】Dummy Cafe
   
   サイト内メニュー
   
   ホーム
   こだわり
   メニュー
   採用情報
   
   お問い合わせ
   
   下記のフォームよりお問い合わせ下さい。
   
   お問い合わせ種別
   
   お名前
   
   メールアドレス
   
   お問い合わせ内容
   
   送信する
   
   関連情報
   
   スタッフブログ
   スタッフ募集
   
   ホーム
   こだわり
   メニュー
   採用情報
   お問い合わせ
   
   〒129-0816
   東京都架空区架空6-1-1
   
   © 2016 Dummy Cafe

3. 完成例を参考に、段落や見出し、リスト、用語説明リスト、フォーム、ラベル、連絡先、改行、著作権表記文の要素を用いて全てのコンテンツをマークアップしてください
4. 完成例を参考に、フォームの各コントロール部品を作成してください。なお、フォームの送信先は "receive.html" にしておいて下さい。
   • 項目「お問い合わせ種別」
     • コントロール部品の種類： セレクトボックス
     • コントロール部品の名前： "type"
     • コントロール部品の選択肢： "ご予約について"、"お店について"、"メニューについて"、"採用について"、"その他"
   • 項目「お名前」
     • コントロール部品の種類： 1行分のテキストフィールド
     • コントロール部品の名前： "your_name"
   • 項目「メールアドレス」
     • コントロール部品の種類： メールアドレスのテキストフィールド
     • コントロール部品の名前： "your_mail"
   • 項目「お問い合わせ内容」
     • コントロール部品の種類： 複数行のテキストエリア
     • コントロール部品の名前： "inquiry"
     • 1行に表示する文字数： "80"
     • 表示する行数： "8"
   • 文字列「送信する」
     • コントロール部品の種類： 送信ボタン
     • ボタンの文字列： "送信する"
5. 以下の文字列にリンクを設定してください。
   • 文字列「ロゴ画像」： 「Chapter23」フォルダ直下の "index.html"
   • 文字列「ホーム」： 「Chapter23」フォルダ直下の "index.html"
   • 文字列「こだわり」： 「philosophy」フォルダ内の"index.html"
   • 文字列「メニュー」： 「menu」フォルダ内の"index.html"
   • 文字列「採用情報」： 「recruit」フォルダ内の"index.html"
   • 文字列「スタッフ募集」： 「recruit」フォルダ内の"index.html"
   • 文字列「スタッフブログ」： リンク先のページが存在しないため "#"
   • 文字列「お問い合わせ」： 「contact」フォルダ内の"index.html"
6. 以下の文字列を画像に置き換えてください。
   • 文字列「【ロゴ画像】」
     • 画像ファイル： 「images」-> 「common」フォルダ内の"logo-dummy-cafe.png"
     • 画像の横幅： "160px"
     • 画像の高さ： "30px"
     • 代替えテキスト： "Dummy Cafe"
7. ヘッダーやフッターなどのページ内の基本構造や、セクションの範囲を示して下さい

RERUN

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

解答

下記はあくまで解答例です。この課題に絶対的な正解はありませんので、参考程度にご確認下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Dummy Cafe - 最高のコーヒーとくつろぎの空間を提供する架空のカフェ</title>
</head>
<body>
  <header>
    <h1>
      <a href="index.html"><img src="images/common/logo-dummy-dummy.png" width="160" height="30" alt="Dummy Cafe"></a>
      Dummy Cafe
    </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>2017.2.10</p>
      </article>
      <article>
        <h3>Dummy Cafeがオープンしました。</h3>
        <p>ついにDummy Cafeがオープンしました。みなさん是非コーヒーを飲みに来て下さいね。</p>
        <p>2017.1.25</p>
      </article>
      <article>
        <h3>Dummy CafeのWEBサイトが完成しました。</h3>
        <p>Dummy CafeのWEBサイトを公開しました。</p>
        <p>2017.1.21</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>
      〒129-0816<br>
      東京都架空区架空6-1-1
    </address>
    <p><small>&copy; 2016 Dummy Cafe</small></p>
  </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>こだわり - Dummy Cafe</title>
</head>
<body>
  <header>
    <h1>
      <a href="../index.html"><img src="../images/common/logo-dummy-dummy.png" width="160" height="30" alt="Dummy Cafe"></a>
      Dummy Cafe
    </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="../about-us/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="../about-us/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="../about-us/index.html">店舗情報</a></li>
      <li><a href="../contact/index.html">お問い合わせ</a></li>
    </ul>
    <address>
      〒129-0816<br>
      東京都架空区架空6-1-1
    </address>
    <p><small>&copy; 2016 Dummy Cafe</small></p>
  </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>メニュー - Dummy Cafe</title>
</head>
<body>
  <header>
    <h1>
      <a href="../index.html"><img src="../images/common/logo-dummy-cafe.png" width="160" height="30" alt="Dummy Cafe"></a>
      Dummy Cafe
    </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>
      〒129-0816<br>
      東京都架空区架空6-1-1
    </address>
    <p><small>&copy; 2016 Dummy Cafe</small></p>
  </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>採用情報 - Dummy Cafe</title>
</head>
<body>
  <header>
    <h1>
      <a href="../index.html"><img src="../images/common/logo-dummy-cafe.png" width="160" height="30" alt="Dummy Cafe"></a>
      Dummy Cafe
    </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 scope="row">仕事内容</th>
        <td>お客様への最高のサービス提供して頂きます</td>
      </tr>
      <tr>
        <th scope="row">雇用形態</th>
        <td>パート・アルバイトスタッフ</td>
      </tr>
      <tr>
        <th scope="row">応募資格</th>
        <td>高校生の方はお断りさせていただいております</td>
      </tr>
      <tr>
        <th scope="row">勤務時間</th>
        <td>
          <ol>
            <li>10:00 〜 15:00</li>
            <li>17:00 〜 23:00</li>
          </ol>
        </td>
      </tr>
      <tr>
        <th scope="row">給与</th>
        <td>時給1400円 〜</td>
      </tr>
      <tr>
        <th scope="row">待遇</th>
        <td>
          当店のコーヒーをお好きに飲むことができます
        </td>
      </tr>
      <tr>
        <th scope="row">応募方法</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>
      〒129-0816<br>
      東京都架空区架空6-1-1
    </address>
    <p><small>&copy; 2016 Dummy Cafe</small></p>
  </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせ - Dummy Cafe</title>
</head>
<body>
  <header>
    <h1>
      <a href="../index.html"><img src="../images/common/logo-dummy-cafe.png" width="160" height="30" alt="Dummy Cafe"></a>
      Dummy Cafe
    </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="receive.html" 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="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>
      〒129-0816<br>
      東京都架空区架空6-1-1
    </address>
    <p><small>&copy; 2016 Dummy Cafe</small></p>
  </footer>
</body>
</html>