CSS Flexbox を使って視覚的に魅力的なフルーツ盛り合わせを作成する

はじめに

このプロジェクトでは、CSS Flexbox を使って視覚的に魅力的なフルーツ盛り合わせを作成する方法を学びます。目的は、同じ色のフルーツを対応する色の板の中央に配置し、調和のとれた美しい表示を作成することです。

完成したフルーツ盛り合わせのレイアウト

このプロジェクトでは、以下のことを学びます。

このプロジェクトを完了すると、以下のことができるようになります。

このステップでは、プロジェクト構造を設定する方法を学びます。

始めるには、エディタを開きます。エディタからいくつかのファイル — index.html、style.css と images が見えるはずです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

未完成のプロジェクト構造のプレビュー

このステップでは、盛り合わせの上にあるフルーツを整理するためのフレックスコンテナを設定する方法を学びます。

#pond {
  /* TODO: ここに CSS コードを追加してください */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

display: flex プロパティは、#pond 要素をフレックスコンテナとして設定し、フレックスボックスレイアウトを使ってフルーツを配置できるようにします。

flex-direction: column プロパティは、フレックスアイテム（フルーツコンテナ）を垂直に積み重ねます。

flex-wrap: wrap プロパティは、フレックスアイテムが現在の行に収まらない場合、次の行に折り返すことを許可します。

完成した結果は以下の通りです。

フレックスコンテナの最終結果

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。