コーディング

投稿日:

Grid LayoutとFlexboxを学ぼう

現在の仕事・課題

・働いていたレストランのLP制作

→ワードプレス化も含めてほぼ完了。現在はクライアントへの質問の回答待ち。

・クラウドワークス 、ランサーズにて仕事探し

→保留中。そろそろ再開する予定。

・iSaraの模写

 


 

更新が3ヶ月ほど空いてしまいました。生きてます。

 

 

まずはこちらのツイートをご覧ください。

 

 

最近、Twitterで勉強させていただいているTAKさんのツイートです。

この時紹介されていたゲームをやってみたので、それについて書いていこうと思います。

 

 

TAKさんが紹介していたのは、Grid GardenとFlexbox Froggyです。それぞれCSSのGrid LayoutとFlexboxについてゲームを通して学ぶことができるので、ストレスなく学習することができます。

まずはGrid Gardenについて見てみましょう。

 

 

Grid Garden

 

Grid Garden

 

こちらがGrid Gardenです。レベル28まであって全て無料でプレイすることができます。

毎レベルごとに説明文があるので、グリッドレイアウトに詳しくなくてもサクサク解けてしまいます。思っている以上に感覚で解けてしまうので、プロパティの値を変えるとどうなるのかをしっかり考えながらやる必要があります。

 

 

僕は途中でこんがらがってきたので、Qiitaにあったグリッドレイアウトについて書かれたこちらの投稿を参考にしました。 

CSS Grid Layout を極める!(基礎編)

少し長めですが、グリッドレイアウトについてしっかり学ぶことができるので、おすすめです。次のCSS Grid Layout を極める!(場面別編)というのも後で読んでおこうと思います。

 

 

ただ、1問だけ。レベル26の問題がどうしてもよくわかりませんでした。

調べたらわかりましたが、他にもつまづいている人がいるようです。

 

グリッドレイアウトについてしっかり勉強した上で、もう一度戻ってくるのもありかなと思いました。

 

 

Flexbox Froggy

 

Flexbox Froggy

 

Flexbox Froggyはレベル24まであり、Flexboxのプロパティであるflex-direction, flex-wrap,flex-flow, justify-content, align-items, align-contentについて学ぶことができます。

また、これにプラスして子要素に付けるorderとalign-selfについても少し触れられています。

 

 

こちらもすべてやってみましたが、Grid Gardenより簡単に進めていけます。まぁそれぞれのプロパティの動きさえ覚えればいいので、当然といえば当然ですが。

しかし、これを実際にCSS上で使う時にはそう簡単には行かないので、しっかり理解して使う必要があります。

そういえば最近Progateにもフレックスボックスのコースができたみたいなので、そちらも合わせてやるといいでしょう。

 

 

その他

 

この2つのゲームはCodepipというサイトで提供されているもので、有料にはなりますがこの他にもHTMLやCSSのtransformプロパティ、JavaScriptを学習できるゲームがあるようです。

Codepip

 

また、有料プランはこんな感じです。

Codepipプラン

 

最安だと6ドル(約650円)/月です。ゲームは今後も追加されるようなので、1ヶ月だけ試してみるのもありかと思います。

 

 

以上!

スポンサードリンク




スポンサードリンク




-コーディング
-, ,

Copyright© トマブログ , 2021 All Rights Reserved Powered by STINGER.