ﾅｶﾞﾓﾄ の blog

Full Cycle Developerを目指すエンジニアが有用そうな技術記事や、ポエムのようなよしなしごとを投稿するブログです。

FLEXBOX FROGGYが超COOLでflexboxの勉強が捗ったので推したい

技術 ポエム

HTML, CSSに疎く、特にレイアウト周りの勉強をしたいと思っていたところ、 yoshitaku-jp.hatenablog.com こちらでFLEXBOX FROGGYというサイトが紹介されていたのでやってみました。 flexboxfroggy.com

FLEXBOX FROGGYの紹介は前述の記事で十分で、記事を書くこともないと思っていましたが、実際にやってみたら超COOLで最高なサイトだと感じ、少しでも布教したいと思い立ち、筆を取りました。

↓リアルタイムな感想↓

FLEXBOX FROGGYとは？

テキストの解説と共に問題に回答する形式でflexboxを勉強できるサイトです。

どんな人におすすめか？

HTML, CSSの基本を理解していて、読めるけど自分でコーディングするのは苦手な人です。具体的にはCSS Flameworkを使用していてレイアウトをググってコピペでなんとかしているようなレベルの人(私)にはかなりオススメです。flexboxの基本を学ぶことで、各Flameworkで呪文のように使用していたclassを名前から意味を理解し、使いこなしやすくなりました。

そもそもCSSの基本がわからない人には少し難しいので注意してください。

なぜCOOLなのか？

COOLすぎてすぐに問題を2周してしまいました。日を空けてもう１周する予定でいるくらいです。なぜこんなにCOOLに感じるのか説明すると次のとおりです。

書いたCSSがすぐ反映されるため、パズル感覚で楽しく勉強できる

私のようなWEBデザインビギナーはCSSコーディング中に頭に浮かべた理想に近づくことができない歯がゆさを強く感じます。それを全く感じることなく、パズルのように考え、小気味良いリズムで解いていくことができるのは非常に気持ちのいい体験でした。

テキストがわかりやすい

flexboxのレイアウトを説明するにあたって、要素・要素間の余白・行・列・行間・列内での配置・etc...説明する場合には難しい言葉の使い分けが必要です。それがほぼ完璧で、慎重にテキストを読めば各CSSプロパティがどういった意図でどういった設定を可能にするかが理解できます。*1

絶妙な難易度設定で成功体験と達成感が得られる

問題が少しずつ絶妙に難しくなっていきます。つまずきは少ないにも関わらず、適度に成功体験が得られます。また、最後の24問目はそれまでの23問の積み重ねなしでは難しい達成感のある問題が設定されています。

↓これ↓を実現できるようになるってワクワクしませんか？

f:id:ngmt83:20190214092731p:plainf:id:ngmt83:20190214092747p:plain
before -> after

総括

flexboxに自信がない人は隙間時間にでもFLEXBOX FROGGYをやってみよう！

付録: 楽しく勉強できるおすすめサイト

グリッドレイアウトの勉強ができるサイトです。作者はFLEXBOX FROGGYと同じようです。 cssgridgarden.com

Gitの勉強ができます。コマンドの使い方ではなく、コマンドがどのような動きをするのかを視覚的に理解させてくれます。 k.swd.cc

*1:開発者は日本人ではないらしいけれど本当に日本語の質が高い。翻訳は別人なのだろうか