【課題】Flexboxレイアウト2 | SkillhubAI(スキルハブエーアイ)

【課題】Flexboxレイアウト2

課題二つ目(レイアウト作成)

今回は新たな課題に挑戦します。それは、実際にあるようなレイアウトを作成することです。

必要な素材の準備

まずは素材を用意しましょう。以下の方法で素材を手に入れてください。

  1. 好きな素材サイトから

    • 素材は、好きな素材サイトからダウンロードしてください。
  2. 適当なパン種どうかから

    • 適当なパン種どうか(仮想の素材提供先)のサイトからダウンロードしていただいても構いません。

スライド説明

次に、進め方を説明します。この段階では以下の点に注意しましょう。

  • 文字の入力
    • ここでは詳細な指示は省きますが、適当に入力してください。

具体的には、次のようなレイアウトを実現してみましょう。

+------------------------+
|         Header         |
+------------------------+
|    |     Main    |     |
|    |   Content   |  AD |
|Nav |   Area      |     |
|    |             |     |
+------------------------+
|         Footer         |
+------------------------+

ファイルの保存

ファイル名についても、特に決まりはありません。例えば次のように保存してみてください。

  • 保存例
    • flex3.css
    • flex_layout.css
    • など

まとめ

以上の手順を踏んで、このレイアウトを実現してみましょう。ここまでの説明で必要なポイントは掴んでいただけたかと思います。

楽しみながら取り組んでください!何か質問があれば、コメント欄でお知らせくださいね。


このような形式でいかがでしょうか?ご希望に沿っていれば嬉しいです。もし他に修正点や追加したい内容などがあれば、お知らせください。

タイムスタンプ

1 00:00:01,409 --> 00:00:09,919 さあ課題二つ目ね行ってみましょうか

2 00:00:05,240 --> 00:00:15,019 こんな感じの実際にあるようなレイアウトをつくってみてください

3 00:00:09,919 --> 00:00:20,528 素材はですね好き love サイトの見ているところにあると思いますのでそちら

4 00:00:15,019 --> 00:00:23,859 からダウンロードしていただくか適当にパン種どうかからダウンロードしていただいて

5 00:00:20,528 --> 00:00:28,750 えっと使っていただくか

6 00:00:23,859 --> 00:00:29,350 で進めてくださいこの文字っていうのはええまあここでありますけれどもこれも適当に

7 00:00:28,750 --> 00:00:33,100 ですね

8 00:00:29,350 --> 00:00:39,489 うっていただいて進めてください

9 00:00:33,100 --> 00:00:44,530 このフレックスですねファイル名保存するファイル名はフレックス

10 00:00:39,488 --> 00:00:45,969 まあなんでもいいですね flex 3とかフリックせリード停止てみるとかっていう

11 00:00:44,530 --> 00:00:50,230 名前で

12 00:00:45,969 --> 00:00:52,850 保存してください fx 3. css ですね

13 00:00:50,229 --> 00:00:56,948 そちらをつくってこれ

14 00:00:52,850 --> 00:00:56,948 このレイアウトを実現してみましょう

====