【WEB制作×勉強】DAY5～6：cafeサイト制作

基本の復習を終えコーディング練習に突入！
模写コーディングってこうやってやるのね⁉と最初から驚きの連続！
今まで検証ツールで随時確認しながら行うってしてなかったし、
HP作ってからspにレスポンシブしてたし、　　　　　　
なんならHTML全部作ってからCSS当ててたよ～😂
先生と一緒だからなのもあるけど、すごいやりやすかった！

今日は自分が忘れてたとこ、新しく知ったところを記録↓↓↓

pictureタグ

 <picture>
            <source media="(min-width: 768px)" srcset="./img/fv.png">
            <img src="./img/sp/fv.png" alt="素材の美味しさをそのままに">
 </picture>

この記述でSPとPCのブレークポイント768px以上でPC用の画像に、767以下でSP用の画像にかわるなんてすごい！！

---

formタグ

フォームタグはbodyのフォントが反映されない！知らなかった！

【HTML】
<form action="" class="form">
        <input type="email" class="form-input" placeholder="sampl@sample.com">
        <button type="submit" class="form-submit">SEND</button>
</form>


【css】
.form-input::placehold{

これでCSSでスタイルを変更できる！

---

gapプロパティー

flexアイテム間の余白（行や列の隙間）を指定することができる

.header-nav-list {
  display: flex;
  justify-content: center;
  gap: 20px;
}

今回のように１つの値の場合は縦横の同一の余白が与えられ、
2つの値の場合は縦の余白・横の余白が与えられる

めっちゃ便利なのに今まで使った事なかった～💦
これから使えるようになろう！

・flexアイテム間の余白を指定するプロパティ
・flexコンテナに指定する
・縦・横の余白を同時に指定できる
・上下左右の外側の余白は指定できない
・flexアイテム自体には指定できない

---

検索にヒットしないようにする記述

 <meta name="robots" content="noindex">

ポートフォリオとか公開するときとか意識する必要になってくる…よね？

---

色や透明度の指定

今までのやり方　：border-bottom: 1px solid rgba(241,238,228,0.25);

これからのやり方　：　border-bottom: 1px solid rgb(241 238 228 /0.25);

カンマではなく半角スペースで指定する
透明度のみ/で区切る

---

相対パス

./ （省略可）で同じ階層のフォルダを指定できる
../　で今いる階層からでて１つ上の階層のフォルダを指定できる
例えば…
backgroud-img:url(　)で画像を持ってきたい時、CSSフォルダとimgフォルダは別にあるので（../img/画像名）と指定する！
(Day8で間違えたので追記)

---