HTML/ CSS 〜Progate🐓上級編（学習コース）　〜

修了予定は2ｈ！

前回、学習スライドで一通り学習したので、その上で、気づいたことや注意事項を記録します。

【学べること】

＜1章　レスポンシブデザインとは＞
　　目標物を確認しよう
＜2章　メディアクエリ＞
　　メディアクエリを設定しよう
　　メディアクエリによるレイアウト
　　box-sizing
＜3章　レスポンシブデザインの実装＞
　　レスポンシブデザインの型を準備しよう
　　タブレット向けのレイアウトを作ってみよう
　　レイアウトの崩れを修正しよう　　　　←🔰①
　　スマートフォン向けのレイアウト（１）
　　スマートフォン向けのレイアウト（２）
　　フォントをレスポンシブ化しよう
　　max-width　　　　　　　　　　　　  ←🔰②
　　ヘッダーメニューを切り替えよう　　　←🔰③

🔰①

<div class="clea"></div>　　↓

<div class="lesson-wrapper">
　<div class="container">
　　<div class="heading">
　　　<h2>Learn Where to Get Started!</h2>
　　</div>
　　<div class="lessons">　　←ここのコードの最後に作成
　　　　<div class="lesson">

⚠️（stylesheet.css）で設定にて、

.clear{　clear:left;　}　→　float:left; にしてた😱 気をつけねば…

🔰②

.container {
max-width:1170px;　←これまでclass毎に分けてwidthを設定してたけど、今後これを使おう٩( 'ω' )و
width: 100%;

🔰③

<span class="fa fa-bars menu-icon"></span>をheaderに挿入

stylesheet.cssにコードを作成

font-sizeいるんだー…

さて、

なぜ最初のdisplay :none を設定する時にheader-rightクラスの方を指定するのか、混在を避けるため、とも思いましたが気になっておりました。

ので、

やってみました↓

無事に表示されました★✌️

でも、

「判定」で注意されちゃいましたし、きっと意味のあることだと思うので、Progate様の教えの通りにしようかと思います（←チキン🐓★）

🐓考えていること…

本物のHPを作る際は、responsive.cssで各端末における文字表示のfont-sizeも一つ一つ設定して調整していくのだろうか🤔それとも、まとめてドドーンと設定する裏技はあるのでありましょうか…？？！

→今回、header内の表示はノータッチでしたし…

また、通常のWebサイトのWidthって、どのくらいPXなんでしょうか？

→これは「検証」等で分かりそうだけど、めんどくさい、否、機会がある際に改めて確認するとします！＼＼\\٩( 'ω' )و //／／

つづく・・・