4月18日 -HTML/CSS編上級と道場コース初級-

CSS

１．今日の目標

progateでHTML/CSSの上級編を終わらせること。

 

２．結果・感想

 21:30から勉強開始、23:30までで上級編終了。

 0時から3時まででHTML/CSS初級編終了。

 道場コース初級編は難しかった。pxの間隔やfloatのheight0問題などに引っかかりながらも、なんとかクリアした感じ。自分で色々なＬＰを真似っこしてみたり、YOUTUBEで流れてたりするLP制作練習をなぞらえていって、いい感じに作れるようになっていきたいと思う。

 

３．学んだことの書き出し

レスポンシブデザインのためのブレイクポイント設定

@media(max(or min)-width:1000px) {}

widthが100％を超える場合のレイアウト崩れはbox-sizing:border-boxで防ぐ

box-sizing:border-boxを設定するとpaddingとborderがwidthに含まれる(marginは含まれない)

box-sizing:border-boxを設定する場合は*(全て)に対して指定することが推奨されている

headタグにviewportを設定しないとスマホやタブでメディアクエリが正しく機能しない

子要素が全てfloatだと親要素の高さは0になる性質がある

その場合clear:leftでfloatを解除するためだけのdivを作る

スマホは片手で操作する人が多いのでボタンを画面いっぱいに広げる

display:none非表示 display:block表示

  

４．明日の課題

道場コースの中級編を終わらせる。