開発パスに沿って次はFlexboxなる技術を学ぶ。
これは横並びのレイアウトにしたりするのに便利なコードらしい。
floatとの違いがちょっとわかりにくいけど、floatよりも微調整がしにくいかわりに簡単に並べたりできる！
というイメージでいいのかな？
とりあえず進んでいこう！
スポンサードサーチ
HTML/CSS Flexbox編
Flexboxとは
目標物を確認しようFlexboxの実装
display: flex
flex: autoレスポンシブデザインの実装
flex-wrap: wrap
メディアクエリ
flex-direction引用：progate公式HP
流れはこんな感じ。
メディアクエリのところでレスポンシブに対応させるやり方の解説があるぽい。
小単元のような感じ
今までのCSS初級中級のような大きなくくりではなく、Flexboxだけを説明している小単元のようなコース。
さくさくと進んですぐ終わってしまった。
基本的に使うのはflex-boxと@media(max-width: px)のみ。
画面の幅が1000px以下の時・画面の幅が670pxの時をそれぞれ指定して、並び方を変える。
レスポンシブってなんとなく難しいイメージだったけど、画面の幅で判定して並び方を変えるだけ。と考えればそこまで難しくなさそう！
ただ、通常・1000px以下・670px以下の並び方を考えて毎回3つコードを書くと考えると、虫かしくはないかもしれないけど面倒かも？
おそらくみんな何かしらショートカットの技術を駆使していそうだから、この辺は要研究。
それとここで出てきたメディアクエリ。
上級編で出てきたメディアクエリの復習だよーという感じの説明だったので、HTML/CSS上級編をやった前提のパスなのだろうか・・・？
ただ次のステップでとりあえずの流れはワンセットのようだし、次もそんなに長くないみたいだからこのまま進んでいってみよう。
ページをインターネット上で公開してみよう
ここは今まで作ってきたページを、お試しで公開してみよう！というレッスン。
「GitHub」というサービスを使って公開の練習をするらしい。
レッスン内容はこんな感じ
自分で作ったWebページをインターネット上に公開しよう！
1Webページを公開する流れ
2GitHubのアカウント作成
3リポジトリの作成
4ファイルのアップロード
5ページの公開
6公開したページの更新引用：progate公式HP
このレッスンはもう少し後のほうがいい
開発パスに沿ってこのレッスンをしてみたけど、ここはもっと後のほうがいいかもしれない。
練習でページを公開してみるレッスンだけど、特になにも作っていないのでサンプルのコードと画像を使うことになる。
そうすると、このページを作ってください。このページにこれをコピーしてください。ここで公開して下さい。ここで公開されました。
・・・なんか超他人事！
全てがコピペで進行していくので、自分で何かしているという実感が全くない。
実感が全くないからイメージもしにくいし、正直なところ何をやっているのかも何をやったのかもかなり希薄。
ここはHTML/CSS上級編などをやって、本当に簡単なものでもいいから自分なりに何か作ってから来たほうが得るものが大きいはず。
気を取り直して上級編に挑む
ちょっと順番を間違えた感はあるけど、次はHTML/CSS上級編にチャレンジ！
レスポンシブはよく聞くからこれを学ぶのはかなり楽しみ。
progateのHTMLは実質このレッスンが最終ぽいから気合入れて挑戦しよう！
それでは、また。
