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

謎の上級編を探して…

学習スライドを見つけました！👀ので、記録をば！٩(๑❛ᴗ❛๑)۶

【レスポンシブデザイン】

🍀Media Queries

@media (条件) { .... }

🌸レイアウト崩れを直す

box-sizing: border-box;

→⚠️*{box-sizing: border-box;}→すべての要素に対してCSSを適用

box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれる。→⚠️marginはborder-boxでの合計値に含まれない。

【view pointの設定】

🍀view pointの設定に関して、新たに、専用のCSSを作成する

　→⚠️<meta name="view point" content="">の下に（必ず）<link  rel="stylesheet" href="">を記述。

ここでは「width:50%;」を紹介してるけど、他にも方法がある。

🌸🌸🌸floatと親要素の高さ🌸🌸🌸

常、親要素の高さは子要素を包む高さとなります。
しかし、子要素が全てfloatの時、親要素の高さは0となってしまうという性質があります。
これは、floatは「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えるからです。（神：Progateより）

clear: left;でfloatを解除→⚠️clear: left;を適用するためだけの空のタグを用

【スマホ向けのメディアクエリ】

🍀スマホでは、footerが中央寄せになるよう設定

🍀SNSボタンの調整

🍀フォントのレスポンシブ化

🍀要素の表示／非表示

display: none;→要素の非表示

display: block;→非表示にした要素を表示させる

【画面サイズが大きい時】

🍀max-width: ◯◯px;で、width:100%;を設定

そしてこのスライド学習から、

はーい　こんにちは！やっと会えましたね、上級編ちゃん😅

きっと、これからの学習章ではこんなことにはならんだろう★と、前向きに捉え、上級編をサクッと学習してきます(￣^￣)ゞ