HTML HP制作 その3 Progate HTML CSS上級
上記画像のレスポンシブ実装の為のまとめ
<meta name="viewport" content="width=device-width, initial-scale=1.0">
をhtmlのheadタグ内に記述
通常のstyle.cssの他にレスポンシブようファイルresponsive.cssを作る
この時レスポンシブ用ファイルは上記viewportよりも下に配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progate</title>
style.css上で全てのコードに対しbox-sizing:border-boxをかける。
これによりboxの幅を設定する際「％」表記にするとpaddingやmarginを含めた%になり、扱いやすくなる
* {
box-sizing: border-box;
}
responsive.css
レスポンシブを作る上で必要なものがブレイクポイント
通常：PC
960px以下：タブレット
560px以下：スマホ
がオススメらしい
参考：https://hashimotosan.hatenablog.jp/entry/2019/05/28/164834
ブレイクポイントは「@media (max-width:~~~px){
}
と記載
この辺りは
参考：https://wemo.tech/839にも記述あり
@media and all (max~~
と記述するのが無難なのかもしれない（ここはまだよくわかっていません）
ここで@media(max-width:960px) {} / @media(max-width:560){} のファイルを作りそれぞれのサイズになった時に変更したい物などを記載
headerの記載なんかはスマホ時にdisplay:none;をかける
ハンバーガーメニューはPC時display:none;にしておき
スマホ時：display: block; で表示
みたいに使うと良い。
