CSS Flexbox による果物の配置チュートリアル | 応答型レイアウトデザイン

はじめに

このプロジェクトでは、CSS Flexboxを使って果物の配置レイアウトを作成する方法を学びます。また、align-self と order のプロパティを使って、ボウルの中の果物を配置し整列させる方法を学びます。

👀 プレビュー

🎯 タスク

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

果物の配置用のHTML構造を設定する方法
個々のフレックス項目を交差軸に沿って整列させるための align-self プロパティの使い方
フレックス項目の順序を変更するための order プロパティの使い方
Flexboxを使って果物を望ましいレイアウトに配置する方法

🏆 成果

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

CSS Flexboxを使って応答性が高く視覚的に魅力的なレイアウトを作成する
要素の配置と整列を制御するために align-self と order のプロパティを適用する
望ましいデザインを達成するためにCSSセレクターとプロパティを使う

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/properties("Properties") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/properties -.-> lab-300076{{"CSS Flexbox を使った果物の配置"}} css/box_model -.-> lab-300076{{"CSS Flexbox を使った果物の配置"}} css/width_and_height -.-> lab-300076{{"CSS Flexbox を使った果物の配置"}} css/display_property -.-> lab-300076{{"CSS Flexbox を使った果物の配置"}} css/flexbox -.-> lab-300076{{"CSS Flexbox を使った果物の配置"}} end

プロジェクト構造を設定する

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

始めるには、エディタを開きます。エディタから index.html、style.css および images のいくつかのファイルが表示されるはずです。

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

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

果物の配置にスタイルを適用する

このステップでは、果物の配置にスタイルを適用するために align-self と order のプロパティをどのように使うかを学びます。以下の手順に従ってこのステップを完了しましょう。

エディタで index.css ファイルを開きます。
.yellow クラスを対象にして、align-self プロパティを flex-end に設定します。
.yellow クラスの order プロパティを 1 に設定します。

あなたの index.css ファイルは今次のようになっているはずです。

.yellow {
  align-self: flex-end;
  order: 1;
}

align-self プロパティは、個々のフレックス項目を交差軸に沿って整列させるために使用され、align-items の値を上書きします。この場合、黄色い果物をボウルの底部に整列させるために flex-end に設定しました。

order プロパティは、フレックス項目の順序を変更するために使用されます。黄色い果物に対しては 1 に設定しました。これにより、フレックスコンテナの末尾に配置されます。

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

✨ 解答を確認して練習

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるためにLabExでさらに多くの実験を行うことができます。