Web プログラミング

【もりけん塾48日目】flexboxfroggyでflexboxをゲームで学ぶ

LP制作を始めて作成している、ねこらのん(@nekoranon256)です。

 

エンジニアになった友人にコードを見てもらうことや、相談にのってもらっていると『flexboxの理解度が低い』ことが判明してくれたのでflexboxの動画を送ってくれました。

(友人に恵まれている…)

 

今日は送ってくれたflexboxをゲームで学ぶ動画とゲームについてまとめていきます。

しまぶーさんの『フレックスボックス (flexbox) の使い方をゲームで学ぼう』でマスターする

基礎からちゃんと学ぶ CSS 入門!フレックスボックス (flexbox) の使い方をゲームで学ぼう!【ヤフー出身エンジニアが教える初心者向けプログラミング講座】で、理解していきます。

 

しまぶーさん紹介、flexboxをゲームで学べる『flexboxfroggy』

画像をクリックするとflexboxのゲームサイトへ飛びます

 

しまぶーさんの動画と一緒に進むことができます!

 

私は11レベルまで動画と一緒にしていきましたが、自分で考えながらしないと意味がないと思ったので再度レベル1からスタート。

 

おすすめの勉強方法

  1. 自分でやる
  2. 調べる(MDN
  3. しまぶーさんの動画をみてどのように理解しながらゲームを進めているのかを参考にする

 

蛙さんを葉の上に乗るようにcssを使って動かしていきます

 

<ゲームのルール>

Flexbox Froggyへようこそ! これはカエルたちを、CSSコードを書いて助けてあげるゲームです。justify-contentを使って、このカエルを右の蓮の葉まで連れていってあげましょう。このプロパティはアイテムを水平方向に並べるものです。以下の値を取ります。

 

ちなみに

 html
display:flex;

は蛙と葉の下にある湖(?)の部分にかかっているようです。

 

レベル1〜レベル4:justify-content

まずレベル1。

蛙を右の葉に移動させます。

右の葉に移動させるためにはjustify-contentを使います。

 

以下はサイトにヒントとして掲載されているものです。

  • flex-start: アイテムはコンテナーの左側に並びます。
  • flex-end: アイテムはコンテナーの右側に並びます。
  • center: アイテムはコンテナーの中央に並びます。
  • space-between: アイテムはその間に等しい間隔を空けて表示されます。
  • space-around: アイテムはその周囲に等しい間隔を空けて表示されます。

引用:FLEXBOX FROGGY

 

justify-content:flex-end;で右に移動させる

 

 

次にレベル2。

 

中央に葉があるので、

 css
justify-content:center;
で動かします。

 

 

 

次にレベル3。

 

葉が等しい間隔をあけているので

 css
justify-content: space-around;

で動かします。

 

 

 

次、レベル4。

 

葉がレベル3よりも大きく開き、端と端、中央に間隔をあけているので

 css
justify-content: space-between;

で動かします。

 

 

レベル5〜:align-items

align-itemsを使います。

 

  • flex-start: アイテムはコンテナーの上部に並びます。
  • flex-end: アイテムはコンテナーの下部に並びます。
  • center: アイテムはコンテナーの垂直方向中央に並びます。
  • baseline: アイテムはコンテナーのベースラインに表示されます。
  • stretch: アイテムはコンテナーの大きさに合うよう広がります。

引用:FLEXBOX FROGGY

 

 

これを使ってレベル5へ。

 

 

葉が一番下にあるので

 css
align-items: flex-end;

で動かします。

 

 

 

他の値も念の為動かして、どのように動くかもここで把握しました。

 

justify-contentとalign-itemsの値の違いを表でまとめてみた

justify-content align-items
flex-start

アイテムはコンテナーの左側に

アイテムはコンテナーの上部に

flex-end

アイテムはコンテナーの右側に

アイテムはコンテナーの下部に

center

アイテムはコンテナーの中央に

アイテムはコンテナーの垂直方向中央に

 

この表でまとめると頭で整理できた…!

おわりに

期限まで時間は無いけど、いつもより集中しているし理解度もアップしてる。

 

あまり長く期間を作って案件を受けるものでもないし、プログラミングをなめすぎてはいけないことが反省点…><

 

あとは友人に、言われたことをやっていこう。

 

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada