【CSS】flexboxをゲーム感覚で学べるおすすめのサイトを紹介

こんばんは。モリケンタロウです。

 

今日はCSSのflexboxを手軽に学べるサイトをご紹介します。

FlexboxはFlexible Box Layout Moduleの略で、簡単にフレキシブルなレイアウトが組める素晴らしいプロパティです。

また現在はほとんどすべてのブラウザでサポートしてます。

 

ちょっと前まではfloatと言う機能が主流でしたが、今はFlexboxを使ったレイアウトがWebデザインのスタンダードとなっています。

 

そう、flexboxはfloatのように分かりにくくなく、比較的簡単に、サイトをデザインをする事ができます。

 

このWebデザインにおける必須のスキルflexboxを、良い感じに学べるサイトをご紹介します。

このサイトで一通り遊べば、flexboxの基本的なスキルを身につける事ができるので、是非お試しください。

 

スポンサーリンク

【CSS】flexboxをゲーム感覚で学べるおすすめのサイトを紹介

 

flexboxを学ぶには、下記の「Flexbox Froggy」と言うサイトがオススメです。

 

Flexbox Froggy
A game for learning CSS flexbox

 

このサイトで、flexboxを駆使して可愛いカエルを移動させるゲームをplayすることができます。

 

 

出題例はこんな感じです。

はじめはバラバラに配置されているので、flexboxを駆使してカエルを移動させます。

このようにカエルを然るべき色の場所へ移動させていきます。

 

レベルが上がるにつれ、徐々に難易度が増していきます。

 

全部で24問あり、全てが終わる頃にはflexboxの基本はマスターできています。

まとめ

 

実際flexboxはそこまで難しくないので、このサイトで基本はおさえる事ができます。
また忘れた頃にこのサイトでサクッと思い出すのも良いかと思います。
と言う事でCSSのflexboxを簡単に学べるサイト、「Flexbox Froggy」のご紹介でした。
わたし
わたし

私ももっと自由自在に使えるよう頑張ります!

コメント

タイトルとURLをコピーしました