Chap14-4 演習

Chap13-4で出題した練習問題の解答例から、これまでのCSSデザインを復習します。
理解できていない箇所を明確にすることが目的です。

解答例のスケジュールについて

Chap13-4で出題した練習問題の解答例は、2回に分けて紹介します。
・Chap14-4 「ご利用案内と料金について」
・Chap16-3 「営業時間・交通アクセス」
Chap16-3までに「営業時間・交通アクセス」を作成してみてください。

Contents

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

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

作成の流れも併せて内容を確認していくと良いでしょう

セレクタ#cont-2部分 HTMLの修正変更

段落部分を記号リストに変更

          <section id="info-item1">
            <h3>基本料金</h3>
            <table>
              <tr>
                <th>一般</th><td>1,000円</td>
              </tr>
              <tr>
                <th>大学生</th><td>700円</td>
              </tr>
              <tr>
                <th>高校生以下</th><td>500円</td>
              </tr>
            </table>
            <ul>
              <li>基本60分でフリードリンク付きです。</li>
              <li>最初の60分以降、30分ごとに300円の追加料金で予約できます。</li>
              <li>お部屋によって、料金は変わりません</li>
            </ul>
          </section>

#cont-3のレイアウトと背景画像の表示

    #cont-1,
    #cont-2,
    #cont-3{
        background-image: url(images/bg_1.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        padding-top: 50vh;
    }

背景画像を上書き

    #cont-3{
      background-image: url(images/bg_3.jpg);
    }

セレクタ#cont-3>divの背景色と余白の設定

    #cont-1>div,
    #cont-3>div{
      background-color: rgb(255,240,235);
      padding: 80px 0;
    }

セレクタ#cont-3>div>pのレイアウトと背景画像の表示

背景画像の大きさは画面を見ながら、heightで設定しても構いません。

    #cont-3>div>p{
      width: 960px;
      margin: 0 auto;
      background-image: url(images/txtimg_2.jpg);
      background-repeat: no-repeat;
      background-position: right top;
      background-size: 400px auto;
      padding-right: 420px;
      padding-bottom: 40px;
    }

セレクタ#info-containerの上余白を設定

    #info-container{
      padding-top: 30px;
    }

セレクタh3の文字サイズとした余白の設定

ここは下マージンでも構いません。

    h3{
      font-size: 21px;
      padding-bottom: 10px;
    }

いつもの癖が出てしまいました

<table>関連の修正背景色と横幅の変更

セレクタに#info-item1がなくても大丈夫です。

    #info-item1 table,
    #info-item1 th,
    #info-item1 td{
      border: 1px solid rgb(60,60,60);
    }
    #info-item1 table{
      width: 100%;
      border-collapse: collapse;
      background-color: rgb(255,255,255);
      margin-bottom: 20px;
    }
    #info-item1 th,
    #info-item1 td{
      padding: 15px;
      text-align: center;
    }
    #info-item1 th{
      width: 150px;
      text-align: left;
    }

<li>の文字サイズ変更

    #info-item1 li{
      font-size: 14px;
    }

セレクタ#info-item2の最後のsectionに上余白の設定

last-of-typeでも大丈夫です。

    #info-item2 section:last-child{
      padding-top: 30px;
    }

最後のリンク部分にクラス属性を追加

<p>お食事は別途料金が必要になります。<br>
<a href="#" class="cont_link">カフェメニューのページをご覧ください。</a></p>