HTML＆CSS 道場コース 上級編 ｜メモ｜レスポンシブデザインとブラウザ幅による表示非表示の切り替え
HTML&CSS道場コース上級編
勢い勇んで道場コースの上級編をやろうとしたら
最初からさっぱりわからなくて学習コースをやり直したらくだ🐫です。
いや、びっくりした。
結局「なにこれ分からん」ってなったのは
ヘッダー部分の各コンテンツへのリンクを、モバイルサイズの時はアイコンマークにするっていう部分位で
後はソコソコすんなり。
（モバイルだけ整えてタブレット何もしてなくてエラーとかはあった）
（気を付けたい）
メモ
レスポンシブデザイン
同じアドレスのHTML＆CSSコードで、見る人それぞれの環境（PC、タブレット、モバイル）に合わせた適切なデザインを表示させるって感じですかね。
表示幅
画面サイズによって端が切れないようにwidthは％指定にする
PC表示では最大幅(max-width）を指定する
Progateでは
max-width1170px、タブレット1000px、モバイル670pxで指定していたけど
一般的にはmax-width1000px程度、モバイル750pxが良さそうです。
タブレットの事は特に考えなくていいっぽい。
box-sizing
レスポンシブデザインに有効ってことで出てきたbox-sizingですが
もう常にbox-sizingでいいのでは？ってなってる。
* {
box-sizing: border-box;
}
サイト幅によるアイコンの表示切替
モバイルは幅が狭い為
各コンテンツへのリンクを文字で横並びにすると改行されてデザインが崩れる状況になりがち
↓
メニューをアイコン表示にしてすっきり
（本来はJSなどでメニューが開くような動きを付ける）
（ここではHTMLとCSSの指定だけ）
htmlにメニューアイコン（class=”menu-icon”）が表示されるようにタグを挿入
（ProgateではFont Awesomeを利用）
通常表示のCSSでは表示させないような指定をする
.menu-icon {
display: none;
}
モバイルサイズのメディアクリエ内に
text表示のリンク（class=”menu-text”)を消して、アイコン（class=”menu-icon”)を表示させるように指定
.menu-text {
display: none;
}
.menu-icon {
display: block;
}