DAY1〜9ではHTML、CSSの基礎・コーディングの練習を行いました。
重要だと思った部分を整理していきたいと思います。
上手な質問の仕方
コーディングの話ではないですが、とても重要な部分でした。
自己解決能力
正しく情報を伝えることにより手助けをしてもらい素早く解決する能力
がエンジニアにはとても重要です。
どの職業でもそうですが、質問をすることは他人の時間を奪うことなので、まず自分で調べてそれでも分からない場合は問題を分かりやすく伝え、素早い解決に繋げることが双方にとって大切です。
だからと言って分からないことは分からないですし、質問することにより質問された側の勉強になることもあるので上手な質問の仕方を今のうちに身につけることが重要です。
デイトラでの質問点は今のところ過去の回答を見ることによって解決できています。
marginとpadding
marginは外側の余白
paddingは内側の余白
なのは分かりますが、使い分けについてはまだ難しい部分が多いので
その都度使用する理由を考えていきます。
VS CodeのLive Server
デイトラをはじめる前もVS Codeを少し使っていましたが、
Live ServerというHTMLやCSSファイルの更新をライブプレビューできるようにするプラグインは初めて知りました。
ファイルを編集すると同時に変更が反映するのでとても楽です！
Emmet
Emmetについてはデイトラをはじめる前も知っていましたが、そこまで重要なものだという認識はしていませんでした。
ですがコーディング速度を上げる、タイプミスなどを減らす意味でもとても重要なので、はじめのうちから使用することが大切です。
float
「floatさせたら親要素の高さが0になってズレる」
？？？です。
float=浮く
ブロックの構成から浮いてしまう=下の要素が詰まってしまいます。
なのでCSSの共通部分に書いてクリアにします。
☆
・擬似要素afterかbefore使う
・contentという空要素
・display:block
→clearをつけた要素の後にリセットされる
（afterはこの要素の終わりの直前に入る）（beforeはこの要素の始まった直後）
HTMLはfloatする部分の親要素のclass名に付け加える
.clear::after{
content:"";
clear: both;
display: block;
}
<div class="floatする部分の親要素のclass名 clear">
なかなか難しいですね笑
Flexbox
日本語対応！CSS Flexboxのチートシートを作ったので配布します
印刷して手元に置いて復習します。
お問い合わせフォーム
<form action="移動するページのURL" method="POST">
<input type="email" name="email" id="email">
<button type="submit"></button>
</form>
・お問い合わせフォームはmethodがPOSTが一般的
・typeは表示されるテキストフィールドの種類を指定
・nameはPHPなどで入力された値を送信する際に必要
・idはCSSやJSでタグを指定する時に必要（label for""に合わせる）
・buttonのsubmitでサーバー側や別ページに送信することができる
まとめ
コーディングする上で重要なことは
HTMLを書き上げてからCSSをあて調整する
HTMLを書く際は
完成形をイメージ・スタイルの当て方を考える・レスポンシブも見越す
設計図がなければ家は建てられないです。
この点を意識してコーディングすることが重要です。
さいごに
まだはじめたばかりですが、
デイトラをスタートしてから以前の完全独学からの軌道修正がかなりできています。
また、勉強を継続する習慣がついてきました。
一人でコーディングは現状難しいので、どれだけできるようになるか今後が楽しみです！