Chapter01 HTMLで適切な要素をマークアップ

概要と目標 完成例を確認し、
HTML部分を完成さる

HTMLのマークアップ手順を参考にし、適切な要素をマークアップしましょう。

今回のゴール

RERUN

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

完成イメージ架空のカフェのサイトを、
HTML + CSSでコーディング。

HTML + CSSを使って、
架空のカフェのサイトを制作しましょう。
対応ブラウザは、 IE9 〜。その他のブラウザは最新版のみとする。

センタリングするボックス
完成イメージ

ディレクトリ構造ファイルの保存場所を確認しよう。

今回は下記のようなフォルダ構造でファイルを作成し保存しよう。

ディレクトリ構造
ディレクトリ構造

HTMLの雛形 新規ファイルを作って
HTML5の骨格を作成。

まずは、新規HTMLファイルを作成し、HTMLの雛形を作成する。

HTML5の雛形を記述しよう

  1. 「www」フォルダ内に「index.html」を作成
  2. HTML5の雛形を作成し、タイトルを入力をする。
    （ タイトル： "Dummy Cafe | 「いつもの。」が通じるあなたのカフェ" ）
www/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Dummy Cafe | 「いつもの。」が通じるあなたのカフェ</title>
</head>
<body>

</body>
</html>

答えを見る

  1. 上書き保存
  2. ブラウザで「www」フォルダ内の「index.html」にアクセスし、
    タイトルが表示されているかを確認
ブラウザでの表示例

RERUN

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

文章の入力ユーザーに伝える順番に文章を書く。

画面に表示する文章を、ユーザーに伝える順番に記述しましょう。
特殊な記述が必要な記号は文字参照しましょう。 （画像の部分は alt属性 の文字を入力しておく）

文章を入力しよう。

  1. 「www」フォルダ内の「index.html」を開く
  2. body 要素内に以下の文章をコピー&ペースト
  Dummy Cafe

  Dummy Cafe

  Home
  About
  Menu
  Blog
  Access

  ゆったりとした時間が流れる店内でおしゃべりをしている二人の女性。
  「いつもの。」 が通じる、あなたのカフェ。

  人気のメニュー

  ブレンドコーヒー
  淹れたての香りが引き立つ最高のコーヒー。
  毎日厳選したコーヒー豆のみを使ったオリジナルブレンド
  ¥ 320

  トマトソースパスタ
  トマトソースがよく絡んだパスタをお皿に盛り付け。
  新鮮なトマトを惜しみなく使った自慢のトマトソースパスタ
  ¥ 750

  チーズバーガーセット
  溢れんばかりのボリュームたっぷりハンバーガーとあみあみポテト。
  架空村のたまねぎとレタスを使ったチーズバーガーとポテトのセット
  ¥ 750

  チョコレートケーキ
  チョコレートのスポンジとクリームで作られたきれいな断層のケーキ。
  当店の優秀なパティシエが愛情を込めて作ったチョコレートケーキ
  ¥ 500

  全てのメニューを見る

  ニュース & ブログ

  プロが教える！おいしいコーヒー豆の選び方
  2018.12.11
  大量のコーヒー豆をひとすくい

  自宅でもおいしいコーヒーが飲めるハンドドリップの方法
  2018.12.09
  ハンドドリップで淹れたてコーヒー

  2018年〜2019年の年末年始のお休みについて
  2018.12.04
  1組のお客様しかいない店内の様子

  ノマドワーカの皆さん！ついに無料Wifi設置しました
  2018.12.01
  Macを持ち込んで楽しむコーヒー

  2018年12月のおいしいコーヒーの淹れ方セミナーについて
  2018.11.20
  挽きたてのコーヒーを入れる

  ラテアートが上手にできる方法を解説してみた
  2018.11.11
  きれいなハート型のラテアート

  全ての記事を見る

  このページの先頭に戻る

  Lunch
  10:00 ~ 16:00

  Dinner
  16:00 ~ 22:00

  Holiday
  毎週木曜日

  Seats
  40席（全席禁煙）

  Parking
  10台

  Dummy Cafe

  Dummy Cafe

  架空県架空市架空0-0-0 / 0X-1234-5678

  © 2018 Dummy Cafe All Rights Reserved.
  1. 特殊な記述が必要な文字を文字参照する
www/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Dummy Cafe | 「いつもの。」が通じるあなたのカフェ</title>
</head>
<body>
  Dummy Cafe

  Dummy Cafe

  Home
  About
  Menu
  Blog
  Access

  ゆったりとした時間が流れる店内でおしゃべりをしている二人の女性。
  「いつもの。」 が通じる、あなたのカフェ。

  人気のメニュー

  ブレンドコーヒー
  淹れたての香りが引き立つ最高のコーヒー。
  毎日厳選したコーヒー豆のみを使ったオリジナルブレンド
  &yen; 320

  トマトソースパスタ
  トマトソースがよく絡んだパスタをお皿に盛り付け。
  新鮮なトマトを惜しみなく使った自慢のトマトソースパスタ
  &yen; 750

  チーズバーガーセット
  溢れんばかりのボリュームたっぷりハンバーガーとあみあみポテト。
  架空村のたまねぎとレタスを使ったチーズバーガーとポテトのセット
  &yen; 750

  チョコレートケーキ
  チョコレートのスポンジとクリームで作られたきれいな断層のケーキ。
  当店の優秀なパティシエが愛情を込めて作ったチョコレートケーキ
  &yen; 500

  全てのメニューを見る

  ニュース &amp; ブログ

  プロが教える！おいしいコーヒー豆の選び方
  2018.12.11
  大量のコーヒー豆をひとすくい

  自宅でもおいしいコーヒーが飲めるハンドドリップの方法
  2018.12.09
  ハンドドリップで淹れたてコーヒー

  2018年〜2019年の年末年始のお休みについて
  2018.12.04
  1組のお客様しかいない店内の様子

  ノマドワーカの皆さん！ついに無料Wifi設置しました
  2018.12.01
  Macを持ち込んで楽しむコーヒー

  2018年12月のおいしいコーヒーの淹れ方セミナーについて
  2018.11.20
  挽きたてのコーヒーを入れる

  ラテアートが上手にできる方法を解説してみた
  2018.11.11
  きれいなハート型のラテアート

  全ての記事を見る

  このページの先頭に戻る

  Lunch
  10:00 ~ 16:00

  Dinner
  16:00 ~ 22:00

  Holiday
  毎週木曜日

  Seats
  40席（全席禁煙）

  Parking
  10台

  Dummy Cafe

  Dummy Cafe

  架空県架空市架空0-0-0 / 0X-1234-5678

  &copy; 2018 Dummy Cafe All Rights Reserved.
</body>
</html>

答えを見る

  1. 上書き保存
  2. ブラウザで「www」フォルダ内の「index.html」にアクセスし、
    文章が表示されるかを確認
ブラウザでの表示例

RERUN

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

文章に意味や役割を持たせる HTMLのタグをマークアップしましょう。

見出し、段落、リスト、テーブル、強調、重要、日時、リンク、画像など、
文章に対して適切なタグをマークアップしましょう。

初登場の要素
要素名 意味・役割 カテゴリ コンテンツ・モデル
figure 図版（イラスト、図、写真、コード）を表す
  • フロー・コンテンツ
  • セクショニング・ルート
 任意でfigcaption要素と、フロー・コンテンツ

文章に意味や役割を持たせよう

  1. 「www」フォルダ内の「index.html」を開く
  2. 文章をよく読み、適切な意味や役割の要素をマークアップ
www/index.html
  <h1>
    Dummy Cafe
    <a href="index.html"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
  </h1>

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Access</a></li>
  </ul>

  <figure>
    <img src="images/top/hero-home.jpg" alt="ゆったりとした時間が流れる店内でおしゃべりをしている二人の女性。">
  </figure>
  <p>「<em>いつもの。</em>」 が通じる、<br>あなたのカフェ。</p>


  <h2>人気のメニュー</h2>

  <a href="#">
    <h3>ブレンドコーヒー</h3>
    <figure>
      <img src="images/menu/menu-blend-coffee.jpg" alt="淹れたての香りが引き立つ最高のコーヒー。">
    </figure>
    <p>毎日厳選したコーヒー豆のみを使ったオリジナルブレンド</p>
    <p>&yen; 320</p>
  </a>

  <a href="#">
    <h3>トマトソースパスタ</h3>
    <figure>
      <img src="images/menu/menu-tomato-pasta.jpg" alt="トマトソースがよく絡んだパスタをお皿に盛り付け。">
    </figure>
    <p>新鮮なトマトを惜しみなく使った自慢のトマトソースパスタ</p>
    <p>&yen; 750</p>
  </a>

  <a href="#">
    <h3>チーズバーガーセット</h3>
    <figure>
      <img src="images/menu/menu-cheeseburger.jpg" alt="溢れんばかりのボリュームたっぷりハンバーガーとあみあみポテト。">
    </figure>
    <p>架空村のたまねぎとレタスを使ったチーズバーガーとポテトのセット</p>
    <p>&yen; 750</p>
  </a>

  <a href="#">
    <h3>チョコレートケーキ</h3>
    <figure>
      <img src="images/menu/menu-chocolate-cake.jpg" alt="チョコレートのスポンジとクリームで作られたきれいな断層のケーキ。">
    </figure>
    当店の優秀なパティシエが愛情を込めて作ったチョコレートケーキ
    <p>&yen; 500</p>
  </a>

  <p><a href="#">全てのメニューを見る</a></p>

  <h2>ニュース &amp; ブログ</h2>

  <a href="#">
    <h3>プロが教える！おいしいコーヒー豆の選び方</h3>
    <p><time datetime="2018-12-11">2018.12.11</time></p>
    <figure>
      <img src="images/post/post-coffee-beans.jpg" alt="大量のコーヒー豆をひとすくい">
    </figure>
  </a>

  <a href="#">
    <h3>自宅でもおいしいコーヒーが飲めるハンドドリップの方法</h3>
    <p><time datetime="2018-12-09">2018.12.09</time></p>
    <figure>
      <img src="images/post/post-hand-drip.jpg" alt="ハンドドリップで淹れたてコーヒー">
    </figure>
  </a>

  <a href="#">
    <h3>2018年〜2019年の年末年始のお休みについて</h3>
    <p><time datetime="2018-12-09">2018.12.04</time></p>
    <figure>
      <img src="images/post/post-in-store.jpg" alt="1組のお客様しかいない店内の様子">
    </figure>
  </a>

  <a href="#">
    <h3>ノマドワーカの皆さん！ついに無料Wifi設置しました</h3>
    <p><time datetime="2018-12-01">2018.12.01</time></p>
    <figure>
      <img src="images/post/post-nomad.jpg" alt="Macを持ち込んで楽しむコーヒー">
    </figure>
  </a>

  <a href="#">
    <h3>2018年12月のおいしいコーヒーの淹れ方セミナーについて</h3>
    <p><time datetime="2018-11-20">2018.11.20</time></p>
    <figure>
      <img src="images/post/post-coffee-seminar.jpg" alt="挽きたてのコーヒーを入れる">
    </figure>
  </a>

  <a href="#">
    <h3>ラテアートが上手にできる方法を解説してみた</h3>
    <p><time datetime="2018-11-11">2018.11.11</time></p>
    <figure>
      <img src="images/post/post-latte-art.jpg" alt="きれいなハート型のラテアート">
    </figure>
  </a>

  <p><a href="#">全ての記事を見る</a></p>

  <p><a href="#top">このページの先頭に戻る</a></p>

  <dl>
    <dt>Lunch</dt>
    <dd><time datetime="10:00:00">10:00</time> ~ <time datetime="16:00:00">16:00</time></dd>
    <dt>Dinner</dt>
    <dd><time datetime="16:00:00">16:00</time> ~ <time datetime="22:00:00">22:00</time></dd>
    <dt>Holiday</dt>
    <dd>毎週木曜日</dd>
    <dt>Seats</dt>
    <dd>40席<small>（全席禁煙）</small></dd>
    <dt>Parking</dt>
    <dd>10台</dd>
  </dl>

  <address>
    Dummy Cafe
    <a href="#"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
    架空県架空市架空0-0-0 / <a href="tel:0X-1234-5678">0X-1234-5678</a>
  </address>

  <p><small>&copy; 2018 <a href="contact/">Dummy Cafe</a> All Rights Reserved.</small></p>

答えを見る

  1. 上書き保存
  2. ブラウザで「www」フォルダ内の「index.html」にアクセス
ブラウザでの表示例

RERUN

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

話題の範囲を明示的に表すセクショニング・コンテンツを使う

セクショニング・コンテンツ要素を用いて、話題の範囲を明示的に表しましょう。
(必要に応じて、classやIDを指定しておく)

話題の範囲を明示的に表そう

  1. 「www」フォルダ内の「index.html」を開く
  2. 文章をよく読み、セクショニング・コンテンツの要素をマークアップ
www/index.html
  <h1>
    Dummy Cafe
    <a href="index.html"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
  </h1>

  <nav id="header-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Access</a></li>
    </ul>
  </nav>

  <figure>
    <img src="images/top/hero-home.jpg" alt="ゆったりとした時間が流れる店内でおしゃべりをしている二人の女性。">
  </figure>
  <p>「<em>いつもの。</em>」 が通じる、<br>あなたのカフェ。</p>


  <section class="section">
    <h2>人気のメニュー</h2>

    <article class="grid-item">
      <a href="#">
        <h3>ブレンドコーヒー</h3>
        <figure>
          <img src="images/menu/menu-blend-coffee.jpg" alt="淹れたての香りが引き立つ最高のコーヒー。">
        </figure>
        <p>毎日厳選したコーヒー豆のみを使ったオリジナルブレンド</p>
        <p>&yen; 320</p>
      </a>
    </article>

    <article class="grid-item">
      <a href="#">
        <h3>トマトソースパスタ</h3>
        <figure>
          <img src="images/menu/menu-tomato-pasta.jpg" alt="トマトソースがよく絡んだパスタをお皿に盛り付け。">
        </figure>
        <p>新鮮なトマトを惜しみなく使った自慢のトマトソースパスタ</p>
        <p>&yen; 750</p>
      </a>
    </article>

    <article class="grid-item">
      <a href="#">
        <h3>チーズバーガーセット</h3>
        <figure>
          <img src="images/menu/menu-cheeseburger.jpg" alt="溢れんばかりのボリュームたっぷりハンバーガーとあみあみポテト。">
        </figure>
        <p>架空村のたまねぎとレタスを使ったチーズバーガーとポテトのセット</p>
        <p>&yen; 750</p>
      </a>
    </article>

    <article class="grid-item">
      <a href="#">
        <h3>チョコレートケーキ</h3>
        <figure>
          <img src="images/menu/menu-chocolate-cake.jpg" alt="チョコレートのスポンジとクリームで作られたきれいな断層のケーキ。">
        </figure>
        当店の優秀なパティシエが愛情を込めて作ったチョコレートケーキ
        <p>&yen; 500</p>
      </a>
    </article>

    <p><a href="#">全てのメニューを見る</a></p>
  </section>

  <section class="section">
    <h2>ニュース &amp; ブログ</h2>

    <article class="grid-item">
      <a href="#">
        <h3>プロが教える！おいしいコーヒー豆の選び方</h3>
        <p><time datetime="2018-12-11">2018.12.11</time></p>
        <figure>
          <img src="images/post/post-coffee-beans.jpg" alt="大量のコーヒー豆をひとすくい">
        </figure>
      </a>
    </article>

    <article class="grid-item">
      <a href="#">
        <h3>自宅でもおいしいコーヒーが飲めるハンドドリップの方法</h3>
        <p><time datetime="2018-12-09">2018.12.09</time></p>
        <figure>
          <img src="images/post/post-hand-drip.jpg" alt="ハンドドリップで淹れたてコーヒー">
        </figure>
      </a>
    </article>

    <aricle class="grid-item">
      <a href="#">
        <h3>2018年〜2019年の年末年始のお休みについて</h3>
        <p><time datetime="2018-12-09">2018.12.04</time></p>
        <figure>
          <img src="images/post/post-in-store.jpg" alt="1組のお客様しかいない店内の様子">
        </figure>
      </a>
    </aricle>

    <article class="grid-item">
      <a href="#">
        <h3>ノマドワーカの皆さん！ついに無料Wifi設置しました</h3>
        <p><time datetime="2018-12-01">2018.12.01</time></p>
        <figure>
          <img src="images/post/post-nomad.jpg" alt="Macを持ち込んで楽しむコーヒー">
        </figure>
      </a>
    </article>

    <article class="grid-item">
      <a href="#">
        <h3>2018年12月のおいしいコーヒーの淹れ方セミナーについて</h3>
        <p><time datetime="2018-11-20">2018.11.20</time></p>
        <figure>
          <img src="images/post/post-coffee-seminar.jpg" alt="挽きたてのコーヒーを入れる">
        </figure>
      </a>
    </article>

    <article class="grid-item">
      <a href="#">
        <h3>ラテアートが上手にできる方法を解説してみた</h3>
        <p><time datetime="2018-11-11">2018.11.11</time></p>
        <figure>
          <img src="images/post/post-latte-art.jpg" alt="きれいなハート型のラテアート">
        </figure>
      </a>
    </article>

    <p><a href="#">全ての記事を見る</a></p>
  </section>

  <p><a href="#top">このページの先頭に戻る</a></p>

  <dl>
    <dt>Lunch</dt>
    <dd><time datetime="10:00:00">10:00</time> ~ <time datetime="16:00:00">16:00</time></dd>
    <dt>Dinner</dt>
    <dd><time datetime="16:00:00">16:00</time> ~ <time datetime="22:00:00">22:00</time></dd>
    <dt>Holiday</dt>
    <dd>毎週木曜日</dd>
    <dt>Seats</dt>
    <dd>40席<small>（全席禁煙）</small></dd>
    <dt>Parking</dt>
    <dd>10台</dd>
  </dl>

  <address>
    Dummy Cafe
    <a href="#"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
    架空県架空市架空0-0-0 / <a href="tel:0X-1234-5678">0X-1234-5678</a>
  </address>

  <p><small>&copy; 2018 <a href="contact/">Dummy Cafe</a> All Rights Reserved.</small></p>

答えを見る

  1. 上書き保存
  2. ブラウザで「www」フォルダ内の「index.html」を開く
ブラウザでの表示例

RERUN

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

ページの構造を表すヘッダー、メイン、フッターをつける。

ページの構造を表す、header要素、main要素、footer要素をマークアップしましょう。
(必要に応じて、classやIDを指定しておく)

ページの構造を表そう

  1. 「www」フォルダ内の「index.html」を開く
  2. 文章をよく読み、ページの構造をマークアップ
www/index.html
  <header id="header">
    <h1>
      Dummy Cafe
      <a href="index.html"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
    </h1>

    <nav id="header-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Access</a></li>
      </ul>
    </nav>
  </header>

  <main id="main">
    <figure>
      <img src="images/top/hero-home.jpg" alt="ゆったりとした時間が流れる店内でおしゃべりをしている二人の女性。">
    </figure>
    <p>「<em>いつもの。</em>」 が通じる、<br>あなたのカフェ。</p>

    <section class="section">
      <h2>人気のメニュー</h2>

      <article class="grid-item">
        <a href="#">
          <h3>ブレンドコーヒー</h3>
          <figure>
            <img src="images/menu/menu-blend-coffee.jpg" alt="淹れたての香りが引き立つ最高のコーヒー。">
          </figure>
          <p>毎日厳選したコーヒー豆のみを使ったオリジナルブレンド</p>
          <p>&yen; 320</p>
        </a>
      </article>

      <article class="grid-item">
        <a href="#">
          <h3>トマトソースパスタ</h3>
          <figure>
            <img src="images/menu/menu-tomato-pasta.jpg" alt="トマトソースがよく絡んだパスタをお皿に盛り付け。">
          </figure>
          <p>新鮮なトマトを惜しみなく使った自慢のトマトソースパスタ</p>
          <p>&yen; 750</p>
        </a>
      </article>

      <article class="grid-item">
        <a href="#">
          <h3>チーズバーガーセット</h3>
          <figure>
            <img src="images/menu/menu-cheeseburger.jpg" alt="溢れんばかりのボリュームたっぷりハンバーガーとあみあみポテト。">
          </figure>
          <p>架空村のたまねぎとレタスを使ったチーズバーガーとポテトのセット</p>
          <p>&yen; 750</p>
        </a>
      </article>

      <article class="grid-item">
        <a href="#">
          <h3>チョコレートケーキ</h3>
          <figure>
            <img src="images/menu/menu-chocolate-cake.jpg" alt="チョコレートのスポンジとクリームで作られたきれいな断層のケーキ。">
          </figure>
          当店の優秀なパティシエが愛情を込めて作ったチョコレートケーキ
          <p>&yen; 500</p>
        </a>
      </article>

      <p><a href="#">全てのメニューを見る</a></p>
    </section>

    <section class="section">
      <h2>ニュース &amp; ブログ</h2>

      <article class="grid-item">
        <a href="#">
          <h3>プロが教える！おいしいコーヒー豆の選び方</h3>
          <p><time datetime="2018-12-11">2018.12.11</time></p>
          <figure>
            <img src="images/post/post-coffee-beans.jpg" alt="大量のコーヒー豆をひとすくい">
          </figure>
        </a>
      </article>

      <article class="grid-item">
        <a href="#">
          <h3>自宅でもおいしいコーヒーが飲めるハンドドリップの方法</h3>
          <p><time datetime="2018-12-09">2018.12.09</time></p>
          <figure>
            <img src="images/post/post-hand-drip.jpg" alt="ハンドドリップで淹れたてコーヒー">
          </figure>
        </a>
      </article>

      <aricle class="grid-item">
        <a href="#">
          <h3>2018年〜2019年の年末年始のお休みについて</h3>
          <p><time datetime="2018-12-09">2018.12.04</time></p>
          <figure>
            <img src="images/post/post-in-store.jpg" alt="1組のお客様しかいない店内の様子">
          </figure>
        </a>
      </aricle>

      <article class="grid-item">
        <a href="#">
          <h3>ノマドワーカの皆さん！ついに無料Wifi設置しました</h3>
          <p><time datetime="2018-12-01">2018.12.01</time></p>
          <figure>
            <img src="images/post/post-nomad.jpg" alt="Macを持ち込んで楽しむコーヒー">
          </figure>
        </a>
      </article>

      <article class="grid-item">
        <a href="#">
          <h3>2018年12月のおいしいコーヒーの淹れ方セミナーについて</h3>
          <p><time datetime="2018-11-20">2018.11.20</time></p>
          <figure>
            <img src="images/post/post-coffee-seminar.jpg" alt="挽きたてのコーヒーを入れる">
          </figure>
        </a>
      </article>

      <article class="grid-item">
        <a href="#">
          <h3>ラテアートが上手にできる方法を解説してみた</h3>
          <p><time datetime="2018-11-11">2018.11.11</time></p>
          <figure>
            <img src="images/post/post-latte-art.jpg" alt="きれいなハート型のラテアート">
          </figure>
        </a>
      </article>

      <p><a href="#">全ての記事を見る</a></p>
    </section>
  </main>

  <footer id="footer">
    <p><a href="#top">このページの先頭に戻る</a></p>

    <dl>
      <dt>Lunch</dt>
      <dd><time datetime="10:00:00">10:00</time> ~ <time datetime="16:00:00">16:00</time></dd>
      <dt>Dinner</dt>
      <dd><time datetime="16:00:00">16:00</time> ~ <time datetime="22:00:00">22:00</time></dd>
      <dt>Holiday</dt>
      <dd>毎週木曜日</dd>
      <dt>Seats</dt>
      <dd>40席<small>（全席禁煙）</small></dd>
      <dt>Parking</dt>
      <dd>10台</dd>
    </dl>

    <address>
      Dummy Cafe
      <a href="#"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
      架空県架空市架空0-0-0 / <a href="tel:0X-1234-5678">0X-1234-5678</a>
    </address>

    <p><small>&copy; 2018 <a href="contact/">Dummy Cafe</a> All Rights Reserved.</small></p>
  </footer>

答えを見る

  1. 上書き保存
  2. ブラウザで「www」フォルダ内の「index.html」を開く
ブラウザでの表示例

RERUN

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

div要素の挿入レイアウト上必要な範囲に、
divタグを挿入。

センタリングするためのボックスや、floatに必要なボックスで、
他に適切な要素がない場合は、div要素を用いて範囲を指定する。
なお、初心者のうちはどこにdiv要素が必要かを判断しにくいため、
CSSを書きながら必要に応じてdiv要素を追加してもOK。
(必要に応じて、classやIDを指定しておく)

divタグを挿入しよう

  1. 「www」フォルダ内の「index.html」を開く
  2. センタリングに必要なボックスと、メインビジュアルのボックスをdiv要素でマークアップ
www/index.html
  <header id="header">
    <div class="container">
      <h1>
        Dummy Cafe
        <a href="index.html"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
      </h1>

      <nav id="header-nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Access</a></li>
        </ul>
      </nav>
    </div>
    <!-- /.container -->
  </header>

  <main id="main">
    <div class="hero">
      <figure>
        <img src="images/top/hero-home.jpg" alt="ゆったりとした時間が流れる店内でおしゃべりをしている二人の女性。">
      </figure>
      <p>「<em>いつもの。</em>」 が通じる、<br>あなたのカフェ。</p>
    </div>
    <!-- /.hero -->

    <section class="section">
      <div class="container">
        <h2>人気のメニュー</h2>

        <article class="grid-item">
          <a href="#">
            <h3>ブレンドコーヒー</h3>
            <figure>
              <img src="images/menu/menu-blend-coffee.jpg" alt="淹れたての香りが引き立つ最高のコーヒー。">
            </figure>
            <p>毎日厳選したコーヒー豆のみを使ったオリジナルブレンド</p>
            <p>&yen; 320</p>
          </a>
        </article>

        <article class="grid-item">
          <a href="#">
            <h3>トマトソースパスタ</h3>
            <figure>
              <img src="images/menu/menu-tomato-pasta.jpg" alt="トマトソースがよく絡んだパスタをお皿に盛り付け。">
            </figure>
            <p>新鮮なトマトを惜しみなく使った自慢のトマトソースパスタ</p>
            <p>&yen; 750</p>
          </a>
        </article>

        <article class="grid-item">
          <a href="#">
            <h3>チーズバーガーセット</h3>
            <figure>
              <img src="images/menu/menu-cheeseburger.jpg" alt="溢れんばかりのボリュームたっぷりハンバーガーとあみあみポテト。">
            </figure>
            <p>架空村のたまねぎとレタスを使ったチーズバーガーとポテトのセット</p>
            <p>&yen; 750</p>
          </a>
        </article>

        <article class="grid-item">
          <a href="#">
            <h3>チョコレートケーキ</h3>
            <figure>
              <img src="images/menu/menu-chocolate-cake.jpg" alt="チョコレートのスポンジとクリームで作られたきれいな断層のケーキ。">
            </figure>
            当店の優秀なパティシエが愛情を込めて作ったチョコレートケーキ
            <p>&yen; 500</p>
          </a>
        </article>

        <p><a href="#">全てのメニューを見る</a></p>
      </div>
      <!-- /.container -->
    </section>

    <section class="section">
      <div class="container">
        <h2>ニュース &amp; ブログ</h2>

        <article class="grid-item">
          <a href="#">
            <h3>プロが教える！おいしいコーヒー豆の選び方</h3>
            <p><time datetime="2018-12-11">2018.12.11</time></p>
            <figure>
              <img src="images/post/post-coffee-beans.jpg" alt="大量のコーヒー豆をひとすくい">
            </figure>
          </a>
        </article>

        <article class="grid-item">
          <a href="#">
            <h3>自宅でもおいしいコーヒーが飲めるハンドドリップの方法</h3>
            <p><time datetime="2018-12-09">2018.12.09</time></p>
            <figure>
              <img src="images/post/post-hand-drip.jpg" alt="ハンドドリップで淹れたてコーヒー">
            </figure>
          </a>
        </article>

        <aricle class="grid-item">
          <a href="#">
            <h3>2018年〜2019年の年末年始のお休みについて</h3>
            <p><time datetime="2018-12-09">2018.12.04</time></p>
            <figure>
              <img src="images/post/post-in-store.jpg" alt="1組のお客様しかいない店内の様子">
            </figure>
          </a>
        </aricle>

        <article class="grid-item">
          <a href="#">
            <h3>ノマドワーカの皆さん！ついに無料Wifi設置しました</h3>
            <p><time datetime="2018-12-01">2018.12.01</time></p>
            <figure>
              <img src="images/post/post-nomad.jpg" alt="Macを持ち込んで楽しむコーヒー">
            </figure>
          </a>
        </article>

        <article class="grid-item">
          <a href="#">
            <h3>2018年12月のおいしいコーヒーの淹れ方セミナーについて</h3>
            <p><time datetime="2018-11-20">2018.11.20</time></p>
            <figure>
              <img src="images/post/post-coffee-seminar.jpg" alt="挽きたてのコーヒーを入れる">
            </figure>
          </a>
        </article>

        <article class="grid-item">
          <a href="#">
            <h3>ラテアートが上手にできる方法を解説してみた</h3>
            <p><time datetime="2018-11-11">2018.11.11</time></p>
            <figure>
              <img src="images/post/post-latte-art.jpg" alt="きれいなハート型のラテアート">
            </figure>
          </a>
        </article>

        <p><a href="#">全ての記事を見る</a></p>
      </div>
      <!-- /.container -->
    </section>
  </main>

  <footer id="footer">
    <div class="container">
      <p><a href="#top">このページの先頭に戻る</a></p>

      <dl>
        <dt>Lunch</dt>
        <dd><time datetime="10:00:00">10:00</time> ~ <time datetime="16:00:00">16:00</time></dd>
        <dt>Dinner</dt>
        <dd><time datetime="16:00:00">16:00</time> ~ <time datetime="22:00:00">22:00</time></dd>
        <dt>Holiday</dt>
        <dd>毎週木曜日</dd>
        <dt>Seats</dt>
        <dd>40席<small>（全席禁煙）</small></dd>
        <dt>Parking</dt>
        <dd>10台</dd>
      </dl>

      <address>
        Dummy Cafe
        <a href="#"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
        架空県架空市架空0-0-0 / <a href="tel:0X-1234-5678">0X-1234-5678</a>
      </address>

      <p><small>&copy; 2018 <a href="contact/">Dummy Cafe</a> All Rights Reserved.</small></p>
    </div>
    <!-- /.container -->
  </footer>

答えを見る

  1. 上書き保存
  2. ブラウザで「www」フォルダ内の「index.html」を開く
ブラウザでの表示例

RERUN

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