#デイトラ 自分用メモ。DAY5-DAY9

DAY5 HTML

cssの読み込み記述はheadタグの終わりの直前に書く
meta description忘れない
ファビコンはキャッシュクリア　Command+shift+R
user agent stylesheetはブラウザデフォルトのCSS→reset.cssで対応
上から順に読み込んでいくので後ろが強い（reset.cssを先に！）
まず基本のcss→html（適宜css）→CSS（慣れてくるまで）
classの付け方→親要素（header）-右（right）とか
floatさせると親要素の高さが０になって後ろの要素が重なってくる
→疑似要素.clear::aterでcontent空、clear:both,display:blockにする→floatさせてる親要素の名前に入れる（container clear）
→一番綺麗！
基本的にすべてclassで名前を作る！（保守性）
横並びの文字の高さを揃える：揃えたいものとline-heightを同じにする

DAY6-DAY7 続き

altには画像の説明を。
widthを48%ずつにして横並びにすると間隔空いてくれる
display:flex（flexbox）で子要素を全部横並びにしてくれる
justify-content:space-aroundまたはbetweenで余白をいい感じにしてくれる

inputタグはtextなど追加したときも同じ効果にするためclassを当てないで[type="email"]で指定する
btnはclass名を2個つけておく（btnとbtn-register）btnで基本、registerで固有のスタイルを当てる

◆class名のつけかた
・日本語NG、数字から始めない、-か_以外は使わない
・書き方を統一するipadが768pxなのでスマホ版はmax-widthを767pxにすることが多いスマホ版はfloat:noneとか上書きしたいところだけ書く

DAY8 チラ見しながら書いてみる

０から書くと「わかってたつもり」が浮き彫りに！
適当にやってたらcontainerですべて覆ってしまい苦戦！でも面白い
emmetちょっとずつ慣れてきた（tac,fz20…たのしい）
Prettire有効になったかも
clear::afterもうちょっとで覚えそう（あやふや）

とりあえず３時間くらいでレスポンシブまで完成！
明日からbootstrap〜！
このあたりはドットインストールで履修済み（だいぶ前だけど）なので
サクサク行きたい！