おすすめ開発パスに沿ってやっていたら、ちょっと学習工程が前後してしまったけどレスポンシブ！
このレスポンシブは、非対応のサイトをレスポンシブ化させる案件もあるほど求められている技術らしい。
ということで張り切って学んでいこう！
上級編の学習工程はこれ。
スポンサードサーチ
HTML/CSS上級編
学べること一覧
レスポンシブデザインとは
目標物を確認しようメディアクエリ
メディアクエリを設定しよう
メディアクエリによるレイアウト
box-sizingレスポンシブデザインの実装
レスポンシブデザインの型を準備しよう
タブレット向けのレイアウトを作ってみよう
レイアウトの崩れを修正しよう
スマートフォン向けのレイアウト（１）
スマートフォン向けのレイアウト（２）
フォントをレスポンシブ化しよう
max-width
ヘッダーメニューを切り替えよう引用：progate公式HP HTML&CSS上級編
box-sizing: border-box;超便利！
widthをpaddingとかを含めた値で考えてくれるというすごいコード。
なんだかレスポンシブ！って感じがする。
アスタリスクで全体に適用させることといい、今後たくさん使っていきそうな気配がある。
clear: left;の謎
便利なコードもあったけど謎のコードもでてきた。
それがこいつclear: left。
いや、いいたいこともやりたいこともわかる。
floatを使うと親要素に子が見えなくなって、高さがなくなってしまうらしい。
だからfloatを打ち消して、親要素に子を認識させてあげると高さがなくならない・・・ということだと思う。
floatと併用してよく使うと記載されていたけど、浮かせないで寄せたり並べたりはできないんだろうか？
これはちょっと本番でいろいろやってみないとメリットとデメリットがわからなそうだ。
メディアクエリの謎
あとこれ。
レスポンシブの核になるコードなんだけど、ここもちょっと疑問が残った。
使うのはこのコード。
@media( ){
ここにコードを書いていくイメージ
}
ほうほうなるほどこれで指定すんのね。
練習では、
@media( ){
コードを何個か書く
}
ここにもコードを書く
！？？！？！！！？？
いや｛｝からはみ出したとこにも書くんかーーーい！
｛｝の中に記述したものだけが適用されるのかと思いきや、｛｝以降に記述されたものも適用される様子。
じゃあなぜ｛｝の中に記述するものと外に記述するものがあるんだ？
完全に忘れてたアイコン呼び出すやつ
突然fa fa-barsとかかいてあるから本気で？となってしまった。
調べてみるとfa-barsは3本線のよくあるメニューアイコン！
そういえばアイコン呼び出すコードも前にちょっと習ったなあ。
完全に忘れているからもう一回復習しないと。
疑問は残ったが合格はした
とにかく、やることと書くコードはｗかっているから合格自体はすぐ出来てしまった。
でも自分がなぜこのコードを使ってその効果を出しているのかを理解していないと、応用が利かない気がする。
clear: left;の謎は、他に代用できるものはないのか・こを使うメリットは何なのかをちょっと調べてから次に進もうかな。
次回は上級編の道場コース。
この疑問も少し解決するんだろうか・・・！？
それでは、また。
