Chap8-3 HTMLで実践

Chap8-3 HTMLで実践

Chap08 Webページの基本構造

猫カフェを使って、ページの骨組みと本文を分類します。
各タグの使う場所や、ページを作成する流れを理解することが目的です。

前回までの完成データです。
時間がない・間に合わない等の場合は、以下のソースコードを使ってください。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>保護猫カフェ/にゃんルーム</title>
    <style>
        body{
            font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
            line-height: 100%;
        }
        ul{
            padding: 0;
            display: flex;
            justify-content: space-around;
            width:960px;
            margin: auto;
            list-style-type: none;
        }
       a{
            display: block;
            padding: 20px 10px;
        }
        a:link,a:visited{
            color:rgb(51,51,51);
            text-decoration: none;
        }
        a:hover{
            background-color:rgb(255,210,210) ;
            color: rgb(200,50,0);
        }
        h1{
            background-image: url(images/bg_h1.jpg);
            background-size: cover;
            background-position: center;
            padding: 60vh 0 0 0;
        }
    </style>
</head>
<body>
    <p><a href="index.html"><img src="images/logo.png" alt="にゃんルームのロゴ"></a></p>

    <ul>
        <li><a href="index.html">トップページ</a></li>
        <li><a href="cat.html">お部屋のご案内</a></li>
        <li><a href="#">同居猫の紹介</a></li>
        <li><a href="#">カフェメニュー</a></li>
        <li><a href="#">保護猫カフェについて</a></li>
        <li><a href="#">ご予約・お問い合わせ</a></li>
    </ul>

    <h1>にゃんルームは、<br>あなたと猫だけのくつろぎスペース</h1>
    <p>猫が飼えない方や、猫が大好きな方に、ゆっくりと自分の部屋のように寛いでもらうためのスペースです。<br>
      お部屋では、同居している猫ちゃんが、あなたの帰りを待っています。<br>
      早く帰って、猫ちゃんとたくさん遊んで、ゆっくり寛いでくださいね。</p>

    <h2>同居中の猫ちゃんたち</h2>
    <dl>
      <dt>ブウくん 3歳</dt>
      <dd>エキゾチックショートヘアー</dd>
      <dd><img src="images/neko_1.jpg" alt="ブウくんの画像"></dd>
      <dt>ワラビくん 3歳</dt>
      <dd>シンガプーラ</dd>
      <dd><img src="images/neko_2.jpg" alt="ワラビくんの画像"></dd>
      <dt>キイくん 2歳</dt>
      <dd>スコティッシュフォールド</dd>
      <dd><img src="images/neko_3.jpg" alt="キイくんの画像"></dd>
      <dt>ミイちゃん 2歳</dt>
      <dd>スコティッシュフォールド</dd>
      <dd><img src="images/neko_4.jpg" alt="ミイちゃんの画像"></dd>
    </dl>
    <p>お部屋によって、待っている猫ちゃんが違います。</p>

    <h2>お部屋のご案内</h2>
    <p>今日はどの部屋でくつろぎますか？</p>
    <h3><a href="room.html#room3">3Fにゃんルーム</a></h3>
    <p><img src="images/room_3f.jpg" alt="3Fにゃんルームの画像"></p>
    <p>3Fにゃんルームで待つ猫ちゃんは2匹。<br>
        おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。</p>
    <h3><a href="room.html#room2">2Fにゃんルーム</a></h3>
    <p><img src="images/room_2f.jpg" alt="2Fにゃんルームの画像"></p>
    <p>元気で遊び盛りの猫ちゃんが4匹。<br>
        広々としたリビングで思う存分、猫ちゃんたちと遊べます。</p>
    <h3><a href="room.html#room1">1Fにゃんルーム</a></h3>
    <p><img src="images/room_1f.jpg" alt="1Fにゃんルーム画像"></p>
    <p>人懐っこい4匹の猫ちゃんがお出迎え。<br>
        お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。</p>
    <p><a href="room.html">この他にも、お部屋は3室あります。</a></p>

    <h2>ご利用案内と料金について</h2>
    <p>猫が大好き！でも飼えない。<br>
        気に入った猫ちゃんと暮らしてみたい。<br>
        「ただいま！」と、まるで自分のおうちに帰ってきたように、猫ちゃんたちが待つお部屋で、ゆっくりとくつろいで欲しい。<br>
        あなたと猫ちゃんとの時間を、大切にしている保護猫カフェです。</p>
    <h3>基本料金</h3>
    <p>基本60分でフリードリンク付きです。<br>
        一般の方は1000円、大学生は700円、高校生以下は500円となります。</p>
    <p>最初の60分以降、30分ごとに300円の追加料金で予約できます。</p>
    <p>お部屋によって、料金は変わりません</p>
    <h3>ご予約について</h3>
    <p>ご利用は、完全予約制です。<br>
        <a href="#">予約ページ</a>から、ご希望の日時とお部屋をご予約できます。</p>
    <h3>お食事について</h3>
    <p>お食事は、1Fにゃんルームのみのご利用となります。</p>
    <p>お食事は別途料金が必要になります。<br>
        <a href="#">カフェメニューのページ</a>をご覧ください。</p>

    <h2>営業時間・交通アクセス</h2>
    <h3>営業時間について</h3>
    <p>営業時間は、11:30から21:00まで（最終入店時間は20:00）となります。<br>
        定休日は毎週月曜日です。月曜が祝日の場合は、翌平日をお休みとさせていただきます。</p>
    <p>その他、年末年始等の営業につきましては、<a href="#">お知らせ</a>でご確認ください。</p>
    <h3>交通アクセス</h3>
    <p>所在地は、東京都新宿区西新宿1-x-x<br>
        電話番号は、01-2345-6789</p>
    <p>新宿西口駅前、徒歩3分です。<br>
        東京駅からJR中央線で14分、上野駅からJR山手線で24分。<br>
        JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結しています。</p>
    <p>お車でお越しの方は、お近くのコインパーキングをご利用ください。</p>

    <h2>お知らせ</h2>
    <dl>
      <dt>2022年10月1日</dt>
      <dd>秋にピッタリな、スイーツとお食事はいかが？</dd>
      <dd><img src="images/news_10.jpg" alt="食欲の秋の画像"></dd>
      <dt>2022年9月1日</dt>
      <dd>読書の秋！ゆっくりと、読書をしながら…</dd>
      <dd><img src="images/news_9.jpg" alt="読書の秋の画像"></dd>
      <dt>2022年8月1日</dt>
      <dd>猫ちゃんたちも、暑さでぐったりしています。</dd>
      <dd><img src="images/news_8.jpg" alt="夏の画像"></dd>
      <dt>2022年7月1日</dt>
      <dd>猫ちゃんたちの夏ファッションが楽しめます。</dd>
      <dd><img src="images/news_7.jpg" alt="ネコファッションの画像"></dd>
      <dt>2022年6月1日</dt>
      <dd>雨の日は、ねこ部屋でゆっくりしませんか？</dd>
      <dd><img src="images/news_6.jpg" alt="梅雨の画像"></dd>
    </dl>
    <p>2022 © <a href="mailto:sample@tou-xxxx">TOU-WEB</a></p>
</body>
</html>
Master
Master

作業途中の「index.html」は別名で保存しておき、あとで作成してみましょう

Contents
  1. HTMLコーディングの作業フロー
  2. 「index.html」でページの基本構造を作成
    1. <header>と<nav>の作成
    2. <footer>の作成
    3. <main>の作成
  3. <main>内の本文を分類
    1. <section>の範囲
  4. 「お部屋のご案内」の<section>範囲に注意
  5. ご利用案内と料金について
  6. 営業時間・交通アクセス
  7. 見出しの階層構造とセクショニングコンテンツ

HTMLコーディングの作業フロー

HTMLファイルの新規作成と保存

フォルダやファイル名は、必ず半角英数文字で！

HTMLの基本構造を記述

<html> <head> <title> <body>のほか文書型宣言や文字エンコーディングなど

文章を入力

画像ファイルを表示する部分には、代替テキストを入力しておくとスムーズに作業できます。
あらかじめ、VScodeで文章部分だけを作成しておくと良いでしょう。

文章に適切なタグを使ってマークアップ

見出し<h1>…<h6>、段落<p>、改行<br>、リスト<li> <ul> <ol>、説明定義リスト<dl> <dt> <dd>、画像<img>、リンク<a>の順番で記述します。
他に<table>や<form>といったタグは、この後で作成すると良いでしょう。

ページの基本構造

④の文章に、<header> <nav> <main> <footer>を使って範囲を囲む

ページの内容を見出し単位で分類

<main>内の本文を、<article> <aside> <section>を使って範囲を囲む

「index.html」でページの基本構造を作成

<header>と<nav>の作成

<nav>の場所はデザインによって変わりますが、基本は<header>とは別の場所に記述するのが良いでしょう。（但し、CSSのレイアウトは難易度が上がります）

<header>
  <p><a href="index.html"><img src="images/logo.png" alt="にゃんルームのロゴ"></a></p>
  <nav>
    <ul>
      <li><a href="index.html">トップページ</a></li>
      <li><a href="cat.html">お部屋のご案内</a></li>
      <li><a href="#">同居猫の紹介</a></li>
      <li><a href="#">カフェメニュー</a></li>
      <li><a href="#">保護猫カフェについて</a></li>
      <li><a href="#">ご予約・お問い合わせ</a></li>
    </ul>
  </nav>
</header>

<footer>の作成

<footer>
  <p>2022 © TOU-WEB</p>
</footer>
Master
Master

コピーライトマークの「©️」は、「&copy;」で表示できます

<main>の作成

<main>
  <h1>にゃんルームは、<br>あなたと猫だけのくつろぎスペース</h1>
  <p>猫が飼えない方や、猫が大好きな方に、ゆっくりと自分の部屋のように寛いでもらうためのスペースです。<br>
  お部屋では、同居している猫ちゃんが、あなたの帰りを待っています。<br>
  早く帰って、猫ちゃんとたくさん遊んで、ゆっくり寛いでくださいね。</p>

  <h2>同居中の猫ちゃんたち</h2>
  <dl>
    <dt><a href="#">ブウくん 3歳</a></dt>
    <dd>エキゾチックショートヘアー</dd>
    <dd><img src="images/neko_1.jpg" alt="ブウくんの画像"></dd>
    <dt><a href="#">ワラビくん 3歳</a></dt>
    <dd>シンガプーラ</dd>
    <dd><img src="images/neko_2.jpg" alt="ワラビくんの画像"></dd>

〜中略〜

  <h2>お知らせ</h2>
  <dl>
    <dt>2022年10月1日</dt>
    <dd>秋にピッタリな、スイーツとお食事はいかが？</dd>
    <dd><img src="images/news_10.jpg" alt="食欲の秋の画像"></dd>
    <dt>2022年9月1日</dt>
    <dd>読書の秋！ゆっくりと、読書をしながら…</dd>
    <dd><img src="images/news_9.jpg" alt="読書の秋の画像"></dd>
    <dt>2022年8月1日</dt>
    <dd>猫ちゃんたちも、暑さでぐったりしています。</dd>
    <dd><img src="images/news_8.jpg" alt="夏の画像"></dd>
    <dt>2022年7月1日</dt>
    <dd>猫ちゃんたちの夏ファッションが楽しめます。</dd>
    <dd><img src="images/news_7.jpg" alt="ネコファッションの画像"></dd>
    <dt>2022年6月1日</dt>
    <dd>雨の日は、ねこ部屋でゆっくりしませんか？</dd>
    <dd><img src="images/news_6.jpg" alt="梅雨の画像"></dd>
  </dl>
</main>
Master
Master

<main>で囲むページの本文には、<h1>が含まれていると自然です

<main>内の本文を分類

Warning

動画作成時点と現在では、<article> と <section> の解釈が異なっています。
動画では<article>で説明してますが、<section>に置き換えて学習してください。

<section>の範囲

<section>はページ内の記事、つまりページの内容（コンテンツ）になります。
トップページは複数の内容・記事から構成されています。

※ <section>の範囲がわかるように1行開けています。

<section>
  <h2>同居中の猫ちゃんたち</h2>
    <dl>
      <dt>ブウくん 3歳</dt>
      <dd>エキゾチックショートヘアー</dd>
      <dd><img src="images/neko_1.jpg" alt="ブウくんの画像"></dd>
      <dt>ワラビくん 3歳</dt>
      <dd>シンガプーラ</dd>
      <dd><img src="images/neko_2.jpg" alt="ワラビくんの画像"></dd>
      <dt>キイくん 2歳</dt>
      <dd>スコティッシュフォールド</dd>
      <dd><img src="images/neko_3.jpg" alt="キイくんの画像"></dd>
      <dt>ミイちゃん 2歳</dt>
      <dd>スコティッシュフォールド</dd>
      <dd><img src="images/neko_4.jpg" alt="ミイちゃんの画像"></dd>
    </dl>
    <p>お部屋によって、待っている猫ちゃんが違います。</p>
</section>

<section>
    <h2>お部屋のご案内</h2>
    <p>今日はどの部屋でくつろぎますか？</p>
    <h3><a href="room.html#room3">3Fにゃんルーム</a></h3>
    <p><img src="images/room_3f.jpg" alt="3Fにゃんルームの画像"></p>
    <p>3Fにゃんルームで待つ猫ちゃんは2匹。<br>
        おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。</p>
    <h3><a href="room.html#room2">2Fにゃんルーム</a></h3>
    <p><img src="images/room_2f.jpg" alt="2Fにゃんルームの画像"></p>
    <p>元気で遊び盛りの猫ちゃんが4匹。<br>
        広々としたリビングで思う存分、猫ちゃんたちと遊べます。</p>
    <h3><a href="room.html#room1">1Fにゃんルーム</a></h3>
    <p><img src="images/room_1f.jpg" alt="1Fにゃんルーム画像"></p>
    <p>人懐っこい4匹の猫ちゃんがお出迎え。<br>
        お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。</p>
    <p><a href="room.html">この他にも、お部屋は3室あります。</a></p>
</section>

<section>
    <h2>ご利用案内と料金について</h2>
    <p>猫が大好き！でも飼えない。<br>
        気に入った猫ちゃんと暮らしてみたい。<br>
        「ただいま！」と、まるで自分のおうちに帰ってきたように、猫ちゃんたちが待つお部屋で、ゆっくりとくつろいで欲しい。<br>
        あなたと猫ちゃんとの時間を、大切にしている保護猫カフェです。</p>
    <h3>基本料金</h3>
    <p>基本60分でフリードリンク付きです。<br>
        一般の方は1000円、大学生は700円、高校生以下は500円となります。</p>
    <p>最初の60分以降、30分ごとに300円の追加料金で予約できます。</p>
    <p>お部屋によって、料金は変わりません</p>
    <h3>ご予約について</h3>
    <p>ご利用は、完全予約制です。<br>
        <a href="#">予約ページ</a>から、ご希望の日時とお部屋をご予約できます。</p>
    <h3>お食事について</h3>
    <p>お食事は、1Fにゃんルームのみのご利用となります。</p>
    <p>お食事は別途料金が必要になります。<br>
        <a href="#">カフェメニューのページ</a>をご覧ください。</p>
</section>

<section>
    <h2>営業時間・交通アクセス</h2>
    <h3>営業時間について</h3>
    <p>営業時間は、11:30から21:00まで（最終入店時間は20:00）となります。<br>
        定休日は毎週月曜日です。月曜が祝日の場合は、翌平日をお休みとさせていただきます。</p>
    <p>その他、年末年始等の営業につきましては、<a href="#">お知らせ</a>でご確認ください。</p>
    <h3>交通アクセス</h3>
    <p>所在地は、東京都新宿区西新宿1-x-x<br>
        電話番号は、01-2345-6789</p>
    <p>新宿西口駅前、徒歩3分です。<br>
        東京駅からJR中央線で14分、上野駅からJR山手線で24分。<br>
        JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結しています。</p>
    <p>お車でお越しの方は、お近くのコインパーキングをご利用ください。</p>
</section>

<section>
    <h2>お知らせ</h2>
    <dl>
      <dt>2022年10月1日</dt>
      <dd>秋にピッタリな、スイーツとお食事はいかが？</dd>
      <dd><img src="images/news_10.jpg" alt="食欲の秋の画像"></dd>
      <dt>2022年9月1日</dt>
      <dd>読書の秋！ゆっくりと、読書をしながら…</dd>
      <dd><img src="images/news_9.jpg" alt="読書の秋の画像"></dd>
      <dt>2022年8月1日</dt>
      <dd>猫ちゃんたちも、暑さでぐったりしています。</dd>
      <dd><img src="images/news_8.jpg" alt="夏の画像"></dd>
      <dt>2022年7月1日</dt>
      <dd>猫ちゃんたちの夏ファッションが楽しめます。</dd>
      <dd><img src="images/news_7.jpg" alt="ネコファッションの画像"></dd>
      <dt>2022年6月1日</dt>
      <dd>雨の日は、ねこ部屋でゆっくりしませんか？</dd>
      <dd><img src="images/news_6.jpg" alt="梅雨の画像"></dd>
    </dl>
</section>
Master
Master

動画では<article>で説明していますが、現在は<section>になっています。
<section>や<article>の範囲には、<h2>が含まれていると自然です。

「お部屋のご案内」の<section>範囲に注意

「お部屋のご案内」の最後の段落「この他にも〜」は、「1Fにゃんルーム」の文章ではありません。
<section>の範囲に注意しましょう。

<section>
  <h2>お部屋のご案内</h2>
  <p>今日はどの部屋でくつろぎますか？</p>
  <section>
    <h3><a href="room.html#room3">3Fにゃんルーム</a></h3>
    <p><img src="images/room_3f.jpg" alt="3Fにゃんルームの画像"></p>
    <p>3Fにゃんルームで待つ猫ちゃんは2匹。<br>
        おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。</p>
  </section>
  <section>
    <h3><a href="room.html#room2">2Fにゃんルーム</a></h3>
    <p><img src="images/room_2f.jpg" alt="2Fにゃんルームの画像"></p>
    <p>元気で遊び盛りの猫ちゃんが4匹。<br>
        広々としたリビングで思う存分、猫ちゃんたちと遊べます。</p>
  </section>
  <section>
    <h3><a href="room.html#room1">1Fにゃんルーム</a></h3>
    <p><img src="images/room_1f.jpg" alt="1Fにゃんルーム画像"></p>
    <p>人懐っこい4匹の猫ちゃんがお出迎え。<br>
        お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。</p>
  </section>
  <p><a href="room.html">この他にも、お部屋は3室あります。</a></p>
</section>
Master
Master

<section>の解釈も人によって違いますが、内容の一区切りであり、ページの記事自身ではない<h3>の内容が適切であると考えています。

ご利用案内と料金について

<section>
  <h2>ご利用案内と料金について</h2>
  <p>猫が大好き！でも飼えない。<br>
  気に入った猫ちゃんと暮らしてみたい。<br>
  「ただいま！」と、まるで自分のおうちに帰ってきたように、猫ちゃんたちが待つお部屋で、ゆっくりとくつろいで欲しい。<br>
  あなたと猫ちゃんとの時間を、大切にしている保護猫カフェです。</p>
  <section>
    <h3>基本料金</h3>
    <p>基本60分でフリードリンク付きです。<br>
    一般の方は1000円、大学生は700円、高校生以下は500円となります。</p>
    <p>最初の60分以降、30分ごとに300円の追加料金で予約できます。</p>
    <p>お部屋によって、料金は変わりません</p>
  </section>
  <section>
    <h3>ご予約について</h3>
    <p>ご利用は、完全予約制です。<br>
    予約ページから、ご希望の日時とお部屋をご予約できます。</p>
  </section>
  <section>
    <h3>お食事について</h3>
    <p>お食事は、1Fにゃんルームのみのご利用となります。</p>
    <p>お食事は別途料金が必要になります。<br>
    カフェメニューのページをご覧ください。</p>
  </section>
</section>

営業時間・交通アクセス

<section>
　　<h2>営業時間・交通アクセス</h2>
　　<section>
　　　　<h3>営業時間について</h3>
　　　　<p>営業時間は、11:30から21:00まで（最終入店時間は20:00）となります。<br>
　　　　定休日は毎週月曜日です。月曜が祝日の場合は、翌平日をお休みとさせていただきます。</p>
　　　　<p>その他、年末年始等の営業につきましては、お知らせでご確認ください。</p>
　　</section>
　　<section>
　　　　<h3>交通アクセス</h3>
　　　　<p>所在地は、東京都新宿区西新宿1-x-x<br>
　　　　電話番号は、01-2345-6789</p>
　　　　<p>新宿西口駅前、徒歩3分です。<br>
　　　　東京駅からJR中央線で14分、上野駅からJR山手線で24分。<br>
　　　　JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結しています。</p>
　　　　<p>お車でお越しの方は、お近くのコインパーキングをご利用ください。</p>
　　</section>
</section>

見出しの階層構造とセクショニングコンテンツ

動画最後のおまけで紹介した「見出しとセクション」についてのソースは、HTMLの仕様書でもある「HTML Living Standard」の日本語訳のサイトからの引用を解読したものです。

以下にソース元のサイトをリンクしておきますので、興味があれば読んでみると良いでしょう。

HTML Standard, Edition for Web Developers日本語訳
momdo.github.io
Master
Master

HTML Living Standardは、現在のHTMLの仕様をまとめている『WHATWG』という団体が、管理・更新しています