概要

メアリーから「友達がオープンするカフェのホームページを作ってるんだけど、HTMLを手伝ってほしい」と頼まれた。Chapter21までで学習した要素を使って、「カフェのサイト」を作ってみましょう。

クリア条件
完成イメージを参考に適切な要素がマークアップされていること
目標タイム
60分
作成ファイル
  • 「Chapter23」フォルダ内の「index.html」
  • 「Chapter23」-> 「philosophy」フォルダ内の「index.html」
  • 「Chapter23」-> 「munu」フォルダ内の「index.html」
  • 「Chapter23」-> 「recruit」フォルダ内の「index.html」
  • 「Chapter23」-> 「contact」フォルダ内の「index.html」

完成イメージ

ブラウザでの表示例

RERUN

問題

解けた問題は問題文の横のチェックボックスをオンにしましょう。

トップページの作成

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

    • ファイル名: "index.html" (「Chapter23」フォルダ内に作成)
    • HTMLのバージョン: "HTML5"
    • 文字コード: "UTF-8"
    • タイトル: "Dummy Cafe – 最高のコーヒーとくつろぎの空間を提供する架空のカフェ"
  1. 【ロゴ画像】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
    • 文字列「ロゴ画像」: 「Chapter23」フォルダ直下の "index.html"
    • 文字列「ホーム」: 「Chapter23」フォルダ直下の "index.html"
    • 文字列「こだわり」: 「philosophy」フォルダ内の"index.html"
    • 文字列「メニュー」: 「menu」フォルダ内の"index.html"
    • 文字列「採用情報」: 「recruit」フォルダ内の"index.html"
    • 文字列「スタッフ募集」: 「recruit」フォルダ内の"index.html"
    • 文字列「スタッフブログ」: リンク先のページが存在しないため "#"
    • 文字列「お問い合わせ」: 「contact」フォルダ内の"index.html"
    • 文字列「【ロゴ画像】」
      • 画像ファイル: 「images」-> 「common」フォルダ内の"logo-dummy-cafe.jpg"
      • 画像の横幅: "960px"
      • 画像の高さ: "400px"
      • 代替えテキスト: "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"
      • 代替えテキスト: "今月のおすすめはブルーベリーをたくさん使ったタルト"
トップページの完成イメージ

RERUN

こだわりページの作成

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

    • フォルダ名: "philosophy" (「Chapter23」フォルダ内に作成)
    • ファイル名: "index.html" (「philosophy」フォルダ内に作成)
    • HTMLのバージョン: "HTML5"
    • 文字コード: "UTF-8"
    • タイトル: "こだわり – Dummy Cafe"
  1. 【ロゴ画像】Dummy Cafe
    
    サイト内メニュー
    
    ホーム
    こだわり
    メニュー
    採用情報
    
    こだわり
    私たちは、たった1杯のコーヒーにとてつもなくこだわっています。
    
    厳選したコーヒー豆。
    
    ほんとうに美味しいコーヒーをお客様に提供するために、厳選された最高のコーヒー豆のみを焙煎して使用しています。また、焙煎したコーヒー豆は時間が立つと味が落ちてしまうので、Dummy Cafeでは、その日に提供するコーヒーは、その日に焙煎したコーヒー豆しか使用しません。
    
    【コーヒー豆の画像】
    
    93℃のハンドドリップ。
    
    おいしいコーヒーの抽出するのに最適なお湯の温度は93℃です。Dummy Cafeでは、この93℃にこだわってコーヒーを抽出しています。もちろん、機械は使わず1杯ずつ丁寧にハンドドリップでコーヒーを抽出し、お客様に提供します。
    
    【ハンドドリップの画像】
    
    メニューを見る
    
    関連情報
    
    スタッフブログ
    スタッフ募集
    
    ホーム
    こだわり
    メニュー
    採用情報
    お問い合わせ
    
    〒129-0816
    東京都架空区架空6-1-1
    
    © 2016 Dummy Cafe
    • 文字列「ロゴ画像」: 「Chapter23」フォルダ直下の "index.html"
    • 文字列「ホーム」: 「Chapter23」フォルダ直下の "index.html"
    • 文字列「こだわり」: 「philosophy」フォルダ内の"index.html"
    • 文字列「メニュー」: 「menu」フォルダ内の"index.html"
    • 文字列「採用情報」: 「recruit」フォルダ内の"index.html"
    • 文字列「メニューを見る」: 「menu」フォルダ内の"index.html"
    • 文字列「スタッフ募集」: 「recruit」フォルダ内の"index.html"
    • 文字列「スタッフブログ」: リンク先のページが存在しないため "#"
    • 文字列「お問い合わせ」: 「contact」フォルダ内の"index.html"
    • 文字列「【ロゴ画像】」
      • 画像ファイル: 「images」-> 「common」フォルダ内の"logo-dummy-cafe.jpg"
      • 画像の横幅: "960px"
      • 画像の高さ: "400px"
      • 代替えテキスト: "Dummy Cafe"
    • 文字列「【コーヒー豆の画像】」
      • 画像ファイル: 「images」-> 「philosophy」フォルダ内の"img-coffee-beans.jpg"
      • 画像の横幅: "360px"
      • 画像の高さ: "255px"
      • 代替えテキスト: "厳選されたコーヒー豆のおいしさを感じて下さい。"
    • 文字列「【ハンドドリップの画像】」
      • 画像ファイル: 「images」-> 「philosophy」フォルダ内の"img-hand-drip.jpg"
      • 画像の横幅: "360px"
      • 画像の高さ: "255px"
      • 代替えテキスト: "93℃のお湯でハンドドリップしたおいしいコーヒーをお楽しみ下さい。"
こだわりページの完成イメージ

RERUN

メニューページの作成

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

    • フォルダ名: "menu" (「Chapter23」フォルダ内に作成)
    • ファイル名: "index.html" (「menu」フォルダ内に作成)
    • HTMLのバージョン: "HTML5"
    • 文字コード: "UTF-8"
    • タイトル: "メニュー – Dummy Cafe"
  1. 【ロゴ画像】Dummy Cafe
    
    サイト内メニュー
    
    ホーム
    こだわり
    メニュー
    採用情報
    
    メニュー
    
    フード
    ドリンク
    フード
    
    日替わりパスタ
    【パスタの画像】
    ¥980
    
    今週のガレット
    【ガレットの画像】
    ¥980
    
    ミックスサンド
    【ミックスサンドの画像】
    ¥540
    
    季節のケーキ
    【ケーキの画像】
    ¥500
    
    ドリンク
    
    ブレンド・コーヒー
    【ブレンド・コーヒーの画像】
    ¥360
    
    カフェ・ラテ
    【カフェ・ラテの画像】
    ¥400
    
    ブレンド・ティ
    【ブレンド・ティの画像】
    ¥380
    
    関連情報
    
    スタッフブログ
    スタッフ募集
    
    ホーム
    こだわり
    メニュー
    採用情報
    お問い合わせ
    
    〒129-0816
    東京都架空区架空6-1-1
    
    © 2016 Dummy Cafe
    • 文字列「ロゴ画像」: 「Chapter23」フォルダ直下の "index.html"
    • 文字列「ホーム」: 「Chapter23」フォルダ直下の "index.html"
    • 文字列「こだわり」: 「philosophy」フォルダ内の"index.html"
    • 文字列「メニュー」: 「menu」フォルダ内の"index.html"
    • 文字列「採用情報」: 「recruit」フォルダ内の"index.html"
    • 文字列「フード」: 同一ページ内の「フード」のコンテンツへリンク
    • 文字列「ドリンク」: 同一ページ内の「ドリンク」のコンテンツへリンク
    • 文字列「スタッフ募集」: 「recruit」フォルダ内の"index.html"
    • 文字列「スタッフブログ」: リンク先のページが存在しないため "#"
    • 文字列「お問い合わせ」: 「contact」フォルダ内の"index.html"
    • 文字列「【ロゴ画像】」
      • 画像ファイル: 「images」-> 「common」フォルダ内の"logo-dummy-cafe.jpg"
      • 画像の横幅: "960px"
      • 画像の高さ: "400px"
      • 代替えテキスト: "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"
      • 代替えテキスト: "とってもおいしい紅茶です。"
メニューページの完成イメージ

RERUN

採用情報ページの作成

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

    • フォルダ名: "recruit" (「Chapter23」フォルダ内に作成)
    • ファイル名: "index.html" (「recruit」フォルダ内に作成)
    • HTMLのバージョン: "HTML5"
    • 文字コード: "UTF-8"
    • タイトル: "採用情報 – Dummy Cafe"
  1. 【ロゴ画像】Dummy Cafe
    
    サイト内メニュー
    
    ホーム
    こだわり
    メニュー
    採用情報
    
    採用情報
    
    私たちと一緒に働きませんか?
    
    仕事内容	お客様への最高のサービス提供して頂きます
    雇用形態	パート・アルバイトスタッフ
    応募資格	高校生の方はお断りさせていただいております
    勤務時間
    10:00 〜 15:00
    17:00 〜 23:00
    給与	時給1400円 〜
    待遇	当店のコーヒーをお好きに飲むことができます
    応募方法	お問い合わせフォームよりご応募下さい
    
    関連情報
    
    スタッフブログ
    スタッフ募集
    
    ホーム
    こだわり
    メニュー
    採用情報
    お問い合わせ
    
    〒129-0816
    東京都架空区架空6-1-1
    
    © 2016 Dummy Cafe
    • 文字列「ロゴ画像」: 「Chapter23」フォルダ直下の "index.html"
    • 文字列「ホーム」: 「Chapter23」フォルダ直下の "index.html"
    • 文字列「こだわり」: 「philosophy」フォルダ内の"index.html"
    • 文字列「メニュー」: 「menu」フォルダ内の"index.html"
    • 文字列「採用情報」: 「recruit」フォルダ内の"index.html"
    • 文字列「お問い合わせフォーム」: 「contact」フォルダ内の"index.html"
    • 文字列「スタッフ募集」: 「recruit」フォルダ内の"index.html"
    • 文字列「スタッフブログ」: リンク先のページが存在しないため "#"
    • 文字列「お問い合わせ」: 「contact」フォルダ内の"index.html"
    • 文字列「【ロゴ画像】」
      • 画像ファイル: 「images」-> 「common」フォルダ内の"logo-dummy-cafe.jpg"
      • 画像の横幅: "960px"
      • 画像の高さ: "400px"
      • 代替えテキスト: "Dummy Cafe"
採用情報ページの完成イメージ

RERUN

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

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

    • フォルダ名: "contact" (「Chapter23」フォルダ内に作成)
    • ファイル名: "index.html" (「contact」フォルダ内に作成)
    • HTMLのバージョン: "HTML5"
    • 文字コード: "UTF-8"
    • タイトル: "お問い合わせ – Dummy Cafe"
  1. 【ロゴ画像】Dummy Cafe
    
    サイト内メニュー
    
    ホーム
    こだわり
    メニュー
    採用情報
    
    お問い合わせ
    
    下記のフォームよりお問い合わせ下さい。
    
    お問い合わせ種別
    
    お名前
    
    メールアドレス
    
    お問い合わせ内容
    
    送信する
    
    関連情報
    
    スタッフブログ
    スタッフ募集
    
    ホーム
    こだわり
    メニュー
    採用情報
    お問い合わせ
    
    〒129-0816
    東京都架空区架空6-1-1
    
    © 2016 Dummy Cafe
    • 項目「お問い合わせ種別」
      • コントロール部品の種類: セレクトボックス
      • コントロール部品の名前: "type"
      • コントロール部品の選択肢: "ご予約について"、"お店について"、"メニューについて"、"採用について"、"その他"
    • 項目「お名前」
      • コントロール部品の種類: 1行分のテキストフィールド
      • コントロール部品の名前: "your_name"
    • 項目「メールアドレス」
      • コントロール部品の種類: メールアドレスのテキストフィールド
      • コントロール部品の名前: "your_mail"
    • 項目「お問い合わせ内容」
      • コントロール部品の種類: 複数行のテキストエリア
      • コントロール部品の名前: "inquiry"
      • 1行に表示する文字数: "80"
      • 表示する行数: "8"
    • 文字列「送信する」
      • コントロール部品の種類: 送信ボタン
      • ボタンの文字列: "送信する"
    • 文字列「ロゴ画像」: 「Chapter23」フォルダ直下の "index.html"
    • 文字列「ホーム」: 「Chapter23」フォルダ直下の "index.html"
    • 文字列「こだわり」: 「philosophy」フォルダ内の"index.html"
    • 文字列「メニュー」: 「menu」フォルダ内の"index.html"
    • 文字列「採用情報」: 「recruit」フォルダ内の"index.html"
    • 文字列「スタッフ募集」: 「recruit」フォルダ内の"index.html"
    • 文字列「スタッフブログ」: リンク先のページが存在しないため "#"
    • 文字列「お問い合わせ」: 「contact」フォルダ内の"index.html"
    • 文字列「【ロゴ画像】」
      • 画像ファイル: 「images」-> 「common」フォルダ内の"logo-dummy-cafe.jpg"
      • 画像の横幅: "960px"
      • 画像の高さ: "400px"
      • 代替えテキスト: "Dummy Cafe"
お問い合わせページの完成イメージ

RERUN

解答

解答

これで、HTML入門講座は終了になります。次はCSS講座を受講してみて下さい。