ゲーム感覚で難しいCSSのFlexboxを
楽しく習得できるWebサービス。
Webレイアウト、レスポンシブデザインに
便利なFlexboxを学習できます。
![ゲーム感覚で難しいCSS「Flexbox」を習得できるWebサービス 『Flexbox Froggy』](https://pc.mogeringo.com/wp-content/uploads/2022/10/flexboxfroggy-thumb.jpg)
リンク先
使い方
![ゲーム感覚で難しいCSS「Flexbox」を習得できるWebサービス 『Flexbox Froggy』](https://pc.mogeringo.com/wp-content/uploads/2022/10/flexboxfroggy1.jpg)
画面左側が説明とCSSを入力するエディタ部分になります。
画面右側にはカエルと蓮の葉が表示されています。
カエル(content)を蓮の葉(配置したい場所)に移動してあげる、というゲームになります。
![ゲーム感覚で難しいCSS「Flexbox」を習得できるWebサービス 『Flexbox Froggy』](https://pc.mogeringo.com/wp-content/uploads/2022/10/flexboxfroggy2.jpg)
レベル1ではカエルを右側に移動させるので
「justify-content: flex-end;」でカエルを右に移動させればクリアとなります。
ゲームでは順を追って習得が出来るので分かりやすく理解しやすいです。
![ゲーム感覚で難しいCSS「Flexbox」を習得できるWebサービス 『Flexbox Froggy』](https://pc.mogeringo.com/wp-content/uploads/2022/10/flexboxfroggy3.jpg)
次は2つのcontent(カエル)を中央に移動させます。
これは「justify-content: center;」でクリアとなります。
こうやってクリアしていくと簡単に思えてきますね。
![ゲーム感覚で難しいCSS「Flexbox」を習得できるWebサービス 『Flexbox Froggy』](https://pc.mogeringo.com/wp-content/uploads/2022/10/flexboxfroggy4.jpg)
次はカエルの周りの間隔を調整するプロパティの学習になります。
間隔を調整プロパティ、space-betweenやspace-aroundなどを使って配置します。
![ゲーム感覚で難しいCSS「Flexbox」を習得できるWebサービス 『Flexbox Froggy』](https://pc.mogeringo.com/wp-content/uploads/2022/10/flexboxfroggy5.jpg)
説明文の上をクリックすると使えるプロパティが表示されるので
こちらを参考にCSSを記述していきます。
![ゲーム感覚で難しいCSS「Flexbox」を習得できるWebサービス 『Flexbox Froggy』](https://pc.mogeringo.com/wp-content/uploads/2022/10/flexboxfroggy6.jpg)
レベル3は「justify-content: space-around;」が正解となります。
evenlyやbetweenなど似たようなプロパティがあるので迷うと思います。
![ゲーム感覚で難しいCSS「Flexbox」を習得できるWebサービス 『Flexbox Froggy』](https://pc.mogeringo.com/wp-content/uploads/2022/10/flexboxfroggy7.jpg)
レベル4では均等に配置するspace-betweenを使用します。
横並びの配置はこれで何となく見えてきた感じがします。
レビュー
![ゲーム感覚で難しいCSS「Flexbox」を習得できるWebサービス 『Flexbox Froggy』](https://pc.mogeringo.com/wp-content/uploads/2022/10/flexboxfroggy8.jpg)
今まで私はfloatだけで配置したりしてFlexboxは使った事が無かったのですが、
これで学習してFlexboxで柔軟なレイアウトが作れそうな気がしてきました。
HTMLやCSS、Web制作をこれから頑張る人にも
とても役立つWebサービスです。
コメント