#19-20 Home page作成演習 続き

昨日に引き続き、今回もHome page作成の続きです。
以下に、昨日書いたコードを貼っておきます。

今日作ったパートはこちら：
6. Merchandise Sale
7. Ads 2
8. Reservation
9. Footer (to be continued)
typoやhtmlファイルでdivの構造を間違えてしまって、どこが違うかを探すので時間がかかってしまいました😥
ちゃんとタイプできているか都度確認した方がいいですね。

以下では、「これはさらっと出てこないな」と感じたコードを中心に復習します。まず6.Merchandise Saleから。

6. Merchandise Sale
完成形はこんな感じ。

Merchant Sale

文字と写真の形式は前回作ったMerchandiseの欄と同じなので、そのスタイルをMerchant Saleのelementにも適用できるように、Merchandiseのスタイルを指定したときに使ったclass名を使ってhtmlにコードを書きます。

Merchandiseで使ったclass名であるmerchにMerchant Saleのelementを格納します。
<div class="merch" id="merch-sale">
</div>
この間にheadlineや画像elementを格納したdivを入れます。divを余分に作ってしまい、レイアウトがおかしくなって間違いを探すのが大変だったので<div>と</div>の対応関係が合っているかを要確認です。😓

写真のスタイルもMerchandiseと統一するために、Merchandiseの画像のスタイルを指定するのに使ったclassである<div class="merch-gallery"></div>に4つのelementとも格納します。

画像のスタイルは同じなので、Merchandiseのsyntaxからコピペ。

7. Ads 2
完成形はこんな感じ。

Ads 2

こちらも6 Merchant Sale同様に、既に書いたcssのコードを適用できるようにclass名をつけます。htmlに書くのはheadlineと、クリックできるよう<a></a>で作るRead Moreの欄だけ。画像はcssでbackground-imageを使って挿入します。

当たり前ですが、htmlで指定したclass名とcssでスタイルを指定するelement名にタイプミスがないか注意！
ex) <!-- html -->
         <div class="ads-item3"></div>
      /* css */
       .ads-item3{
         background-image:url(../images/ads-img3.jpg)
         }
画像間にスペースをあけるために margin-right: 3%; を左の列の要素にいれます。
    /* css */
       .ads-item3{
　　  margin-right: 3%;　　
         background-image:url(../images/ads-img3.jpg)
         }
       .ads-item5{
　　  margin-right: 3%;　　
         background-image:url(../images/ads-img5.jpg)
         }

8. Reservation
完成形はこんな感じ。

Reservation
青い破線と右下の↑は無視してください。ブラウザ上には表示しません。

<form></form>を使います。<label></label>と<input>でformから得たい情報を指定するelementを入力します。
それらの要素は同じスタイルで統一したいので<div class="form-group"></div>の中に格納します。

復習）
Dropdown listを作るには
<select>
      <option></option>
</select>
ここでは人数の選択なので具体的なsyntaxは次の通り。
<select name="guest-num" id="guest-num" required>
　　<option value="1person">1</option>
　　<option value="2person">2</option>
　　<option value="3person">3</option>
　　<option value="4person">4</option>
　　<option value="morethan5">more than 4</option>
</select>

次に、予約時間の指定です。選択式のradio buttonを作りたいので、次のsyntaxを使います。
<input type ="radio" name="" id="">
<label for ="" >text</label>
idとforの中身を一致させることに注意。

<div class="res-time">
　<input type="radio" name="time" id="am">
　<label for="am">Morning</label>

　<input type="radio" name="time" id="pm">
　<label for="pm">Afternoon</label>

　<input type="radio" name="time" id="night">
　<label for="night">Night</label>
</div>

スタイルは
/* css */
.res-time *{
    width: auto;
    }
で親要素の横幅に合わせます。
cf. width: auto;の役割を復習するのにこちらのサイトも参照しました。

【CSS】width:autoとwidth:100%の違い| けんちゃん先生のWeb講座

このformはFull Nameで始まる部分とAdditional Requestで始まる部分の左右2段構成になっているので、それぞれの要素を含む<div></div>を2つ作ります。同じclass名にすることに注意。（この場合は"form-group"）
cssで以下の2種類のsyntaxで横並びにすることができます。
.form-group{
   float: left;
   width: 49.5%;
   }
/* :nth-child() は CSS の擬似クラス。以下の場合、親要素form-groupから1番目の要素を選択*/
.form-group:nth-child(1){
    margin-right: 1%;
    }

異なるclass名のelementをcssでまとめてスタイルを指定したいときのsyntaxはelement名, element名,{ }

ex)
form input, form label, form select, form textarea{
　display: inline-block;
　width: 100%;
　font-family: 'Raleway', sans-serif;
　padding: 1em;
　margin-bottom: 1em;
　}
/* htmlで指定した<form></form>内に作ったinput, label, select, textareaの各elementにまとめてスタイルを適用 */

送信ボタン
cssで送信ボタンのスタイルを指定するときは[ ]を使うことを思い出そう。
form input[type="submit"]{ }
ex)
form input[type="submit"]{
　background-color: #c7a17a;
　font-weight: 700;
　text-transform: uppercase;
　}

最後に9. Footer Area
完成形はこんな感じ。

Footer Area
オレンジの破線と矢印は無視でお願いします

各elementを<table></table>を使って書いていきます。今日の授業は時間切れになってしまったので続きはまた明日！

今日も最後まで読んでいただき、ありがとうございました。😊😊
引き続きプログラミングの勉強も研究も頑張るぞ🤸‍♂️

筆者が受講中のKredoの公式ラインの追加ボタンです
未経験からwebエンジニアに転職した卒業生の方の体験記なども載っているので
ぜひ覗いてみてください！

Kredoについて詳しく知りたい方はこちらをご覧ください。

Kredoオンラインキャンプ - 英語で学ぶプログラミングスクール