#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
完成形はこんな感じ。
文字と写真の形式は前回作った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
完成形はこんな感じ。
こちらも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
完成形はこんな感じ。
青い破線と右下の↑は無視してください。ブラウザ上には表示しません。
<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;の役割を復習するのにこちらのサイトも参照しました。
この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
完成形はこんな感じ。
オレンジの破線と矢印は無視でお願いします
各elementを<table></table>を使って書いていきます。今日の授業は時間切れになってしまったので続きはまた明日！
今日も最後まで読んでいただき、ありがとうございました。😊😊
引き続きプログラミングの勉強も研究も頑張るぞ🤸♂️
未経験からwebエンジニアに転職した卒業生の方の体験記なども載っているので
ぜひ覗いてみてください！
Kredoについて詳しく知りたい方はこちらをご覧ください。