【WEB制作×勉強】DAY7：レスポンシブ＆最終確認

サイト完成～‼
検証ツールをたくさん使ってやるのに少しずつ慣れてきた気がする！
今まで躓いた時にしか使ってなかったけど、基本LiveServerで検証ツール開いておいて確認しながら進めると今までみたいに「どこから直せばいいの－😿」って迷子になりにくいね！

smallタグについて

フォントサイズを小さくするためのタグ（デフォルトで0.83em）
本文の中に注釈や補足説明を入れる時等に使われる
　
メリット①：レスポンシブ対応されて小さい画面でも文字がきちんと読める
メリット②：SEO対策

ちなみにcopyright=著作権

---

aタグのリンクを別タブで開く

target="_blank"
をaタグに加えることで、リンクが別タブで見ることができる
→ユーザーファースト！

---

ホバー時の変化

・時間を指定
  .header-nav-link{ transition: opacity 0.3s  }
  .header-nav-link:hover {  opacity: 0.7;}
header-nav-linkをホバーした時0.3秒かけて透過度が0.7になる
＝ホバーした時のふわっとしてやわらかいイメージになる

・カーソル(手のマーク)に変える
.form-button:hover{cursor: pointer;}

---

背景画像【backgraoun-img】

ヘッダーで学んだ
<picture> <source media="(min-width: 768px)" srcset="./img/fv.png"> <img src="./img/sp/fv.png" > </picture>
で画像切り替えたらよい？と思ったけど、これは画像の時に使える技で、背景に対してはできないんだね！
背景設定のものはブレイクポイントでの画像の切り替えが必要！

背景画像を入れる時は…　(Day8の演習で忘れたから追記)
・位置→background-position: center center;
・サイズ→background-size: cover;
を指定するのも忘れないように！

---

レスポンシブ

ブレイクポイント

PC　1440px(今回：一般的)
SP　768px（今回のブレイクポイント）
768px以下になった時に表示が変わる

@media screen and (min-width:768px){　  }
=画面の最小幅が768p以上の時は｛　｝

を最初に記述してから書き進めるが、
表示はPCサイズ（今回は1440px）で確認しながら進める

---

インナーの設定

中身のコンテンツはヘッダーの幅に合わせたほうがきれい

.header-inner{max-width: 1080px;  　
　　　　　　padding-top: 40px;
　　　　　　margin: 0 auto;｝
各必要なインナーにヘッダーのインナーと同じ設定する

---

最終確認

①レスポンシブ書き終えたら各サイズ確認
・PCサイズの画面確認（今回1440px）
・ＳＰサイズの切り替え時を確認（今回378px）
・ブレークポイント時を確認（今回768px）
★ブレークポイントー1px時を確認（今回は767px）
　ここがけっこう崩れている！！
   →img画像が足りず余白がある場合：
img画像が指定の大きさに満たないためなので、width:100%にすることで画面いっぱいに表示される
・3000pxくらいで画面幅いっぱいの画像が切れていないか確認
（やりがちなミスに続く）

②１つ訂正したら崩れていないか各サイズを再び確認
③CSSのもれがないか、整える

---

やりがちミス１（画面幅いっぱいに表示させたいのに…）

①画面幅が広い時に、画面幅いっぱいに表示させたい画像の左右に余白ができてしまう
原因は・・・コンテンツ幅を決める際に
bodyタグにwidthを当てている
innerタグに背景画像を当てている
と起こる。のでそれらをチェックし解除する

②img画像のサイズが画面幅よりも小さい場合も右側に余白ができてしまう
その場合は画像にwidth100%を追加すると画像が画面幅に合う

やりがちミス２（formの文字が違う）

form関連のタグにはbodyで指定したfont-family,font-sizeが反映されないので注意。それぞれに適応させる。
ちなみに…
placeholderにCSSを反映させたいときは
クラス名::placeholder{} でスタイルをあてる