引き続き力試し！道場コース中級編【progate】

さて、前回に引き続き道場コースに挑戦。
初級はなかなか手こずってしまったので、中級編はどうなのるか若干心配なところ。

フフーフ

すべてを忘れていてこれまでの努力の成果が皆無だったらどうしよう・・・

気になる学習の流れはこんな感じ。

スポンサードサーチ

HTML/CSS　道場コース中級編

これで進んでいきます。

中級は道場に抱いていたイメージに近い

初級編で気になっていた、今打ち込んでいるコードのプレビューが見えて、やる前に想像していた「道場コース像」に近い。
これはなかなかやりがいがありそう！

しかし今回も、始めるときに出てきた案内の「仕様書マーク」と「初心者マーク」の位置がよくわからない。
前回は全く使わなかったので、今回も無視して進めていこうかな。

ステップ1で暗雲が広がる

始めては見たものの、見た目しかわからない。
フォントの色も、サイズも、透過性も。
ボタンのリンク先もわからない。

そこで仕方ないので「検証」を使用すると・・・

もはや完全に答えかいてある

いやいやこれダメでしょ。
答えおんなじになってしまう。

フフーフ

これはいくらなんでも簡単すぎておかしい！

とうことで、よく考えてみるとこれはやっぱり「仕様書マーク」を探して、そこのヒントだけを頼りにつくるのでは？
という結論に。

次のステップに行く前に、まずはもう一回仕様書を探してみよう。

やっぱりあった

色々試した結果、chromeにいれてあったMozbarが悪さをしていたことが判明。
ツールバーを消したら下に仕様書確認マークが現れた。

フフーフ

いままでまったく気にしてなかったけど、仕様書とプレビューを入れ替えながら進んでいく仕様だった・・・

プレビューを見るために判定するを押すのはおかしいと思ってたにゃー

ちゃんねこ

フフーフ

もうちょっと早く止めてくれ

スポンサードサーチ

やはり中級一筋縄ではいかなかった

真ん中にしたいのに中央寄せにならない！
text-align: center;がきかないのはなぜ？
左右のmarginをいい感じにしたいぞ・・・
ボタンってどうやって押した感じにすんるんだっけ！？

→親要素がdisplay: block要素のときにはきかないのでinline-blockに変える
→margin: 0 auto;で左右を均等に割り振れる
→：activeでbox-shadow: none;からのposition: relative;とtop: ;で消してから動かして押したように錯覚させる

など、初心者がひっかかりそうな「やったような気はするけど覚えていない問題」が出て理解が深まる。
やはり全部一通り終わった後に、もう一度やってみてもよさそうだ。

なんとか終わった

中級クリア！結構難しかったからやった感がある！

途中1回間違えてコードが全部消えて泣く泣く最初からやったけど、2回目は半分以下のスピードでできた。
反復の大事さと、本番ではちょこちょこバックアップが必要だなとかなり身に染みた。

次は上級編・・・と思いきやFlexbox編。
大変だ。Flexboxがわからない。

フフーフ

まずい。Flexboxがなんだかわからない

ちゃんねこ

やりながら覚えていくしかないにゃー

きいたことないけど知ってて当たり前な感じなのかな・・・？
初心者丸出しでも中級車目指してどんどん進んでいこう！

それでは、また。