CSS プロパティを選択する前に軸を特定してください
レベルの目標となる睡蓮の葉を読み取り、カエルの現在の配置を確認してください。デフォルトの行方向では、justify-content は水平主軸に沿って、align-items は垂直交差軸に沿って動作します。値を入力する前に、変更したい軸を指定してください。この習慣により、異なる方向を制御するプロパティに、見た目が正しいと思われる値を選択してしまうというよくある間違いを防ぐことができます。
flex-direction が列に変更されると、主軸と交差軸もそれに合わせて変更されます。justify-content が常に水平方向の移動を意味すると決めつけずに、プロパティを再評価してください。エディタで CSS を1つ変更し、結果として得られる位置を目標と比較してください。カエルは CSS によって配置され、ドラッグして配置されるわけではありません。レベルのヒントと許可されているプロパティを活用して、実験が実際に提示されたタスクに合致するようにしてください。
失敗した変更については、別の変更を試す前に説明してください。
変更が目標を達成できなかった場合は、プロパティが間違った軸に影響を与えたのか、選択した値によってアイテムの配置が予想と異なったのか、あるいは現在の方向によってレイアウトの意味が変わってしまったのかを検討してください。理解できたルールの部分は残し、1つの項目を修正してください。複数のプロパティを一度に置き換えると、目標を達成できたとしても、どの変更が問題を解決したのかが分からなくなる可能性があります。
復習として、次のレベルに進む前に、成功したルールを言葉で説明してください。どの軸が使用され、カエルがスイレンの葉に対してどのように配置されたのかを説明してください。後のレベルでは複数のアイデアが組み合わされることがあるため、文脈を無視して一行だけを暗記するよりも、この説明の方が役立ちます。このガイドは、架空の完全な解答リストを提供するものではなく、ゲームをクリアすることでプロのCSSスキルが証明されると主張するものでもありません。リンク先のプレイページでは、エディターの操作方法と具体的なタスク構成が示されており、センターでは、実際にプレイするレベル全体を通して理解を深め、練習することができます。
例えば、ルールによってカエルが水平方向に移動したつもりが垂直方向に移動してしまった場合、flex-directionを確認して、別の値を選択する前に現在の主軸を特定してください。関係性を声に出して説明してみましょう。「このプロパティは主軸に沿った分布を変更し、現在の主軸はこの方向を向いています。」次に、一度編集を行い、結果を確認します。うまくいった場合は、表示されている睡蓮の葉と照らし合わせて説明を検証してください。こうすることで、間違った推測を、特定の画面でしか使えないコマンドではなく、再利用可能なレイアウトのアイデアに変えることができます。
Flexbox Froggyのヒントと戦略
次のプレイで試したいヒントにチェックしてください。このリストはゲームを変更せず、ゲームの進行状況も保存しません。
Flexbox Froggyに関する質問と回答
コーディングツールをインストールする必要がありますか？
いいえ。CSSエディタはブラウザゲームの中にあります。
これはウェブ開発に関する包括的なコースですか？
これは、フレックスボックスレイアウトの概念を学ぶためのインタラクティブな練習ゲームです。より包括的なHTMLおよびCSSコースの代わりとなるものではありません。
このプロジェクトを作成したのは誰ですか？
Thomas ParkはFlexbox Froggyを作成しました。ソースコードはMITライセンスで公開されており、記録されたアートワークはCC BY 3.0を使用しています。クレジットリンクは以下に記載されています。
方向を反転すると flex-end が逆側へ動かすのはなぜですか？
Flexbox の始点と終点は主軸に従い、固定の左右を意味しません。row-reverse では主軸が右から始まるため、justify-content: flex-end は左へ配置します。まず flex-direction を確認してから値を選びましょう。align-items は交差軸を調整するので、別の位置の問題に使います。