デイトラDay7
スマホ用にレスポンシブ対応
・ポイントはメディアクエリとブレイクポイント
style.css
.course-wrapper{flex-wrap:wrap;}画面の横幅のサイズを超えた時自動的に改行を行うWrap
レスポンシブ表示に限らずPC表示でも役立つ。
flexboxの使い方は奥深いので調べる必要あり。
デイトラDay8
ついに自力でのWeb制作開始
実務でWeb制作する際のtips
まずHTMLで全体（またはキリのいいブロックまで）を書き上げる
CSSを付けつつデザイン通りに調整していく
という順でコーディングするので、今回はできればHTMLを書き上げてからCSSを書くという手順で挑戦！！
HTMLを先に書くときに意識しておくべきこと３つ
- 完成形をイメージしてブロックを作る
- どこに何のスタイルを当てるか設計しつつ書く
- レスポンシブも見越してブロックを整理する
理解が進んでいない部分
「inputがあるからformもいるな」とセットで覚える必要がある。
index.html
<formaction="#"method="POST"><inputtype="email"name="email"id="email"placeholder="メールアドレス"><buttontype="submit"class="btn btn-register">無料ではじめる</button></form>style.css
input[type="email"],input[type="text"]{width:600px;border:3pxsolid#d8d8d8;font-size:18px;display:block;margin:auto;padding:15px;border-radius:999px;margin-bottom:20px;}style.sheet
.btn{padding:20px60px;display:inline-block;background-color:#082b48;color:#fff;font-size:24px;font-weight:bold;border-radius:4px;border:none;}.btn:hover{opacity:0.7;cursor:pointer;}.btn-register{background-color:#ec6d64;display:block;margin:auto;}