デイトラの初級編DAY5〜DAY7で学んだことを簡単にまとめてみる。

DAY5

ここからはいよいよサイト作成に入る。
デイトラアプリの簡易版サイトを作るライブコーディング授業形式だ。

ライブコーディングとか初めてだ。
自分が現役エンジニアだった時はまだYouTubeでそんなのやってる人いなかったな。
ニコ動だといたのかな？

完成版はこちら
↓↓

練習素材を入れたZIPファイルをダウンロードし、準備完了。

まずコーディングで重要な事はなるべく打たず、VS CodeのEmmetを使いまくる。
ミスを気合と根性でカバーしない。
仕組みでカバー。

これは法人運営していた時と同じ考え方だな。
ヒューマンエラーは起こるので、気合と根性ではなく仕組みでカバーする。

そしてコーディングを始める前に大事な事はサイトをブロック構成で考えること。
適切なブロック構成により、プログラムの可読性と保守性が飛躍的に向上する。

最初に作るのはheader。
初心者の難敵floatさん登場…。

空タグとclearでfloatを解除するやり方を教えてもらった。

• float指定していると次の要素は続けて表示される（今回は右側）

• やりたいことは次の要素を改行表示させたい

• なのでclearで解除する

ってことらしい。

自分でコーディングしたらfloatさせたら親要素の高さが0になってズレるってミス、これほぼ100%やっちまうだろうけど、頭の片隅にこの情報が残っていますように…。

DAY6

今日の難敵はFlex Box。

• プロパティ（なにを）　＝　display

• バリュー（どうする）　＝　flex

ってことなんだけど、理解しにくい。

プロパティがdisplayであれば画面表示（要素の表示）をflexに変更するって事か。

これ絶対自分でやる時は悩むだろうな。

DAY7

今日のメインはレスポンシブ表示。
これを実装するとPCとスマホでの表示の違いを調整できる。

やってる事は
ある一定以上（以下）のサイズになったら画面表示を変更する
という処理を入れるだけ。

メディアクエリで媒体を判断し、ブレイクポイントによって画面表示の切り替え条件を実装するって事だな。

• メディアクエリの書き方は、@media (条件) { … }

• max-width: ◯◯px　の　◯◯部分がブレイクポイント

これだけ意識しておこう。

DAY8からはコーディング復習ということで、見ないで再度作ってみるという作業に入る様だ。
時間かかりそうだな…。笑