5日目：HTML＆CSS ついに折り返して最終コーナー！ CSS Flexboxもやってみた！
<学習日>
5日目
<学習内容>
①中級で作成したHPを、仕様書を見ながら0ベースで作成(1回目50-100%)
②中級で作成したHPを、仕様書を見ながら0ベースで作成(2回目0-100%)
③CSS Flexboxの基本
④HTML＆CSS上級編：PC/タブレット/スマホ、色々なデバイスに対応するぞ！
<参考>
Progateレベル：33
<学習内容詳細>
①中級で作成したHPを、仕様書を見ながら0ベースで作成(1回目50-100%)
②中級で作成したHPを、仕様書を見ながら0ベースで作成(2回目0-100%)
4日目に”レッスン一覧部分を作ろう”でわけがわからなくなってしまい、HPが大崩れしてしまった。
だいぶ頭が疲れていたのもあり、いったんCodeをリセットした状態にして、本日朝から再度Codeを書き始める。
なんとか、HPの見栄えは目指すものと同じになったものの、時間はかかるし、すっきりしていないCodeだしということで、ここで復習タイム！
復習の方法は下を参照してね！
HTMLで全体の構成や、divの階層を意識出来るようになってから、再度最初から中級のHPを0から作成に挑戦！
結果的に、90分くらいでCodeは書き終わり、模範解答を見比べても、同じくらいスッキリしたCodeになっていた！
【知っている】状態から、【使える】状態に徐々になってきている感じ！楽しい！
③CSS Flexboxの基本
続いて、レッスンツリーに従って、CSSのFlexboxという機能の勉強に突入！
ただ、後から判明したのだけど、HTML＆CSSの上級編をしっかり消化してからの方が、いいかもしれません。
というのも、【Web開発パス (Node.js)】という一番上の学習フローを、なにも考えずに選択しており、Web開発が最低限出来るようになる最短パスで進んでしまったようです。
別枠の学習フロー【HTML＆CSS】だと、HTML＆CSSの上級編の後に、Flexboxが配置されていました。
このFlexboxという機能は、今まで苦労していた配置(floatとか駆使しながら、やんややんやしていたやつ)を、ぐっとやりやすく出来る機能です！
折り返しや、縦に配列してほしい、横に配列してほしいなど、自由自在です。
実際に配列をコントロールしたい親要素のプロパティで、Displayをflexにしたり、flex-wrapをwrapにしたりして、並び方向や折り返しを自由に指定できます。
実際に配列される子要素の方は、サイズをいじることで、統一感のあるデザインにすることが可能です。
めっちゃ便利！
④HTML＆CSS上級編：PC/タブレット/スマホ、色々なデバイスに対応するぞ！
はい、ということで、HTML＆CSSも上級編に突入です。
内容としては、中級編ではPC画面にのみ対応したCodeだったのを、タブレットやスマホ画面でも、美しいHPのデザインとなるようにする技術についてです。
10年程まえであれば、特に必要のなかった技術と思いますが、現代では必須のスキルとなりそうです。
また、Progateで勉強できる方法以外にも、色々な方法がありそうなので、headの理解を深めるときにでも、さらに勉強してみようと思います。
@media(条件文){その時のプロパティ}といった形で記述するのですが、基本的にはエクセルのIF構文と同じような内容であり、理解はしやすかったです。
今回は条件文に画面の幅しか入れませんでしたが、色々と応用できそうなので、書籍等でスキルに厚みを持たせたいところ！
ではでは、1日でも長く続けられるように頑張っていきます。
同志の方、一緒に頑張っていきましょう！
<補足>
ここまでやり終えた感想としては、初級編の0からCodeをかく段階だったり、中級編の配置の内容であったりが、一番苦しかった(壁を感じた)ところでした。
そこを【なんとなくで終わらせず】、しっかりと復習しながら、徹底的に理解して、自分で使いこなせるところまでブラッシュアップしたことで、上級編の理解もはやかったと思います。
特に中級編までの内容を、使える形まで頭に入れておかないと、上級編の理解もフワフワしてしまっていたような気がしました。
スピードも大切！ けど、Progateの内容は基本中の基本と思うので、節目節目で徹底的に理解することも大切だと思います！
