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