レスポンシブデザインって初心者でもできるんだね！簡単じゃん。メディアクエリね、はいはい。なんか勝手に上級者向けだと思ってた〜

 文系大学生のプログラミング習得日記Progate HTML&CSS編（５日目）

 

だいぶ久しぶりにProgateを開きました。

クラス付けるときの”~”←これ忘れるくらいやってなかった。

『上級編では「レスポンシブデザイン」を学びます。スマホやタブレット、PCなど異なる画面幅でもレイアウトをきれいに保つ「レスポンシブデザイン」は、WEBページ開発の必須のスキルです。がんばりましょう！』ということで。

メディアクエリのmax-widthを駆使してレスポンシブデザインにすることが中心でした。

復習

1. @media(max-width:~)
2. box-sizing:border-box;でpaddingとmarginが元気100％で収まるようにできる。
3. *{~}で全部に影響させる。
4. HTMLsheet『<div class=clear>~</div>』CSSsheet『.clear{clear:left;}』これ正直意味わかんなかったけどまあ高さがいい感じにレスポンシブされるらしい。
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">定型文でレスポンシブするときにheadに置いとくらしい。

次は道場編や。