『ナタデココと鉈』のブログ

大学のレポートを定期的に投稿し、アイドル・漫画・映画について熱く語る、雑記ブログ

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

 文系大学生のプログラミング習得日記Progate HTML&CSS編(5日目)

f:id:amaamiamu:20191128225847p:plain 

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

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

 

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

 

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

復習
  1. @media(max-width:~)
  2. box-sizing:border-box;paddingmarginが元気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に置いとくらしい。

 

次は道場編や。