フレックスボックス課題の解説
こんにちは、今回はフレックスボックスのレイアウトを作成する課題について解説します。特に、「2123」というレイアウトの作成方法についてステップごとに説明していきます。
1. 初めに
まず、HTMLファイルとCSSファイルを準備しましょう。HTMLファイルは flex2.html、CSSファイルは flex2.css とします。
<!-- flex2.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フレックスボックス課題</title>
<link rel="stylesheet" href="flex2.css">
</head>
<body>
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
<div class="container2">
<div class="item">アイテム4</div>
<div class="item">アイテム5</div>
</div>
</body>
</html>
/* flex2.css */
.container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
}
.item {
padding: 10px;
margin: 5px;
}
.item:nth-child(1) {
background-color: orange;
flex: 1;
}
.item:nth-child(2) {
background-color: pink;
flex: 2;
}
.item:nth-child(3) {
background-color: yellow;
flex: 1;
}
.container2 {
display: flex;
background-color: #e0e0e0;
padding: 10px;
}
.container2 .item:nth-child(1) {
background-color: green;
flex: 1;
}
.container2 .item:nth-child(2) {
background-color: blue;
flex: 1;
}
2. ブラウザで確認
コードを書いたら、保存してブラウザで表示してみましょう。以下のように表示されるはずです。
+-----------------+------------------+-----------------+
| アイテム1 | アイテム2 | アイテム3 |
+-----------------+------------------+-----------------+
+-------------------+-------------------+
| アイテム4 | アイテム5 |
+-------------------+-------------------+
アイテム1、アイテム2、アイテム3 はそれぞれ 1:2:1 の割合で表示され、アイテム4 と アイテム5 は 1:1 の割合で表示されています。
3. CSSの詳細設定
次に、CSSファイルでスタイルを詳細に設定していきます。display: flex; を使って要素をフレックスコンテナとして設定します。また、各アイテムの背景色やフレックスの割合も設定します。
.container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
}
.item {
padding: 10px;
margin: 5px;
}
.item:nth-child(1) {
background-color: orange;
flex: 1;
}
.item:nth-child(2) {
background-color: pink;
flex: 2;
}
.item:nth-child(3) {
background-color: yellow;
flex: 1;
}
.container2 {
display: flex;
background-color: #e0e0e0;
padding: 10px;
}
.container2 .item:nth-child(1) {
background-color: green;
flex: 1;
}
.container2 .item:nth-child(2) {
background-color: blue;
flex: 1;
}
4. フレックスボックスの理解
フレックスボックスを使用することで、アイテムがコンテナ内で柔軟に配置されます。各アイテムのフレックス値 (flex: 1, flex: 2 など) により、スペースの分配が簡単にコントロールできます。
+--------+------------+--------+
| Item 1 | Item 2 | Item 3 |
+--------+------------+--------+
| flex: 1 | flex: 2 | flex: 1 |
+--------+------------+--------+
+--------+--------+
| Item 4 | Item 5 |
+--------+--------+
| flex: 1 | flex: 1 |
+--------+--------+
5. まとめ
これで、フレックスボックスを利用したレイアウトを実現することができました。今回のポイントは、「アイテムを入れ子にして、さらにその中でもフレックスボックスを使用する」という点です。
もしうまくいかない場合は、もう一度コードを見直してみてください。該当の箇所を確認することで、解決するはずです。
以上で課題の解説を終わります。ぜひ、実際に手を動かして試してみてください。
+---+---+---+
| 1 | 2 | 1 |
+---+---+---+
タイムスタンプ
1 00:00:02,180 --> 00:00:09,009 さあ課題いきましょうか8ですね
2 00:00:05,960 --> 00:00:12,719 まず先ほどの
3 00:00:09,009 --> 00:00:17,500 これですねか台場へコンテナー
4 00:00:12,720 --> 00:00:20,450 2123まぁこんなレイアウトをつくってみましょうということなんでこれを見ながら
5 00:00:17,500 --> 00:00:23,240 進めていきましょう
6 00:00:20,449 --> 00:00:30,189 ではまず
7 00:00:23,239 --> 00:00:30,189 見栄えを作ります保存してレックス2. htm
8 00:00:30,500 --> 00:00:35,859 で
9 00:00:31,370 --> 00:00:39,270 をフレックス作ってますね ca 雪もね
10 00:00:35,859 --> 00:00:40,409 ブレックス2. css
11 00:00:39,270 --> 00:00:49,160 ですね
12 00:00:40,409 --> 00:00:52,399 じゃあ html の方に行きまして html でここもうすぐ訓練ちゃいますね
13 00:00:49,159 --> 00:00:54,679 自分のクラスの
14 00:00:52,399 --> 00:00:57,489 ディ分の+の
15 00:00:54,679 --> 00:00:57,490 墾丁
16 00:00:58,079 --> 00:01:08,579 てって目でこの間には自分のクラスの
17 00:01:03,850 --> 00:01:08,579 ait m 1ですねアイテム1
18 00:01:08,810 --> 00:01:17,299 アイテム市と
19 00:01:11,069 --> 00:01:20,379 まぁこんな感じになって言ってアイテムにアイテムさんと続いていると思います
20 00:01:17,299 --> 00:01:25,179 アイテムにのアイテムさん
21 00:01:20,379 --> 00:01:27,530 ねここまでで同型まずは者ブラウザで見てみましょうか
22 00:01:25,180 --> 00:01:31,040 オープニング other
23 00:01:27,530 --> 00:01:33,349 こうできましたちょっとじゃあこれも
24 00:01:31,040 --> 00:01:36,710 左右に並べましょうか
25 00:01:33,349 --> 00:01:39,709 ねこんな感じで123できましたね
26 00:01:36,709 --> 00:01:44,298 今回はこの中を見てみると
27 00:01:39,709 --> 00:01:46,769 コンテナにがあって入ってみれ4とアイテム子があります
28 00:01:44,299 --> 00:01:51,510 これアイテムにの中にありますね
29 00:01:46,769 --> 00:01:53,049 なのでここということになりますでしょうか
30 00:01:51,510 --> 00:01:56,770 効果が
31 00:01:53,049 --> 00:01:58,739 でここは自分のクラスの
32 00:01:56,769 --> 00:01:59,810 akon
33 00:01:58,739 --> 00:02:02,979 てぇな
34 00:01:59,810 --> 00:02:03,969 のにっ
35 00:02:02,980 --> 00:02:08,368 てい
36 00:02:03,969 --> 00:02:11,870 この中にはアイテムですねアイテムを
37 00:02:08,368 --> 00:02:13,080 入れてアイテム4
38 00:02:11,870 --> 00:02:14,259 アイテム
39 00:02:13,080 --> 00:02:17,490 4棟
40 00:02:14,259 --> 00:02:18,429 で次はアイテム5
41 00:02:17,490 --> 00:02:19,689 開いてい
42 00:02:18,430 --> 00:02:24,659 5
43 00:02:19,689 --> 00:02:28,500 でアイテム5分これじゃブラウザを更新してみると
44 00:02:24,659 --> 00:02:35,189 マーニーの中日本語が入っているような感じになりましたね
45 00:02:28,500 --> 00:02:36,659 では css を書いていきましょう推せ妻がリンクしてないのでリングで8
46 00:02:35,189 --> 00:02:41,969 フレックスつ
47 00:02:36,659 --> 00:02:43,250 さっき作ったフレックス党と css をリンクさせますじゃあここに変えていき
48 00:02:41,969 --> 00:02:44,370 ましょう
49 00:02:43,250 --> 00:02:48,699 では
50 00:02:44,370 --> 00:02:50,890 えーとこれでお米としてはちょっと並べてみましょうか
51 00:02:48,699 --> 00:02:51,969 うんとこんな感じかな
52 00:02:50,889 --> 00:02:55,379 で
53 00:02:51,969 --> 00:02:57,949 下には cso を
54 00:02:55,379 --> 00:02:57,949 ゆう所
55 00:02:58,139 --> 00:03:02,299 思って食べのここに
56 00:03:00,789 --> 00:03:08,299 高価なの
57 00:03:02,300 --> 00:03:10,500 これで上下に並んでこれはビューのレイアウトの中で分けられるんですね
58 00:03:08,300 --> 00:03:16,010 これでやってみてください
59 00:03:10,500 --> 00:03:19,439 まああああとじゃあ行きますね.実際所ココのコンティなんだとか
60 00:03:16,009 --> 00:03:23,489 ドット本っていうのはわー
61 00:03:19,439 --> 00:03:28,340 えっとディスプレイが flex にします
62 00:03:23,490 --> 00:03:38,159 で更新すると横並びになってくれますよねうん
63 00:03:28,340 --> 00:03:42,330 じゃあ色をつけていきましょうか. item 1でバックグランドがここオレンジ
64 00:03:38,159 --> 00:03:44,449 出会いてミートアイテムさんも入れていきましょう
65 00:03:42,330 --> 00:03:49,950 アイテム兄が
66 00:03:44,449 --> 00:03:53,649 どんなにいるでしたっけここはピンクかなピンクでアイテムさんが
67 00:03:49,949 --> 00:03:55,030 8ポコがイエロ
68 00:03:53,650 --> 00:03:58,539 ですね
69 00:03:55,030 --> 00:04:05,330 行うとこういうのができました
70 00:03:58,539 --> 00:04:09,530 で割合を見るとさっきのは1対2位対1になってますので
71 00:04:05,330 --> 00:04:12,630 ではフレックスが1
72 00:04:09,530 --> 00:04:16,769 でここがフレックスがに
73 00:04:12,629 --> 00:04:20,350 大1 ok これでどうでしょうか
74 00:04:16,769 --> 00:04:26,529 アルドン1対2位対1になってますね
75 00:04:20,350 --> 00:04:33,169 じゃあ今度はこの中実に5年してみるというとこのディヴコンテナからここまで猫て夏
76 00:04:26,529 --> 00:04:36,979 これも書いてみましょうこれは a not ずっとっ
77 00:04:33,168 --> 00:04:40,969 かジェイドと今ってな2話
78 00:04:36,980 --> 00:04:41,430 えっとディスプレイがフレックス
79 00:04:40,970 --> 00:04:44,490 ねっ
80 00:04:41,430 --> 00:04:48,280 この中身フレックス制させないといけないので
81 00:04:44,490 --> 00:04:50,860 これでで割合アイテム
82 00:04:48,279 --> 00:04:54,369 さんと相手目4
83 00:04:50,860 --> 00:04:58,300 の相手ミョンとアイテム子ですね
84 00:04:54,370 --> 00:05:02,060 アイテム4とアイテムこの割合は一台一
85 00:04:58,300 --> 00:05:05,750 バック&がグリーンとブルー書いてみますよ
86 00:05:02,060 --> 00:05:07,449 ここで. item
87 00:05:05,750 --> 00:05:08,649 4
88 00:05:07,449 --> 00:05:12,180 は
89 00:05:08,649 --> 00:05:14,909 8バッグ&がグリーン
90 00:05:12,180 --> 00:05:16,350 で割合がプレックスが
91 00:05:14,910 --> 00:05:18,000 1
92 00:05:16,350 --> 00:05:22,409 ですね
93 00:05:18,000 --> 00:05:25,319 それとアイテム後は
94 00:05:22,408 --> 00:05:29,159 ここはブルーブルーレ
95 00:05:25,319 --> 00:05:32,279 1これどうでしょここで
96 00:05:29,160 --> 00:05:33,780 をなりました
97 00:05:32,279 --> 00:05:39,209 これで
98 00:05:33,779 --> 00:05:40,739 先ほどの課題のレイアウトねあの高さはちょっと違いますけれどもこれ高さも自分に
99 00:05:39,209 --> 00:05:47,239 なってしまいますので
100 00:05:40,740 --> 00:05:49,590 と違いますけれども同じレイアウトをね実現することができました
101 00:05:47,240 --> 00:05:56,319 行動はこんな感じ
102 00:05:49,589 --> 00:05:57,799 今回のポイントはまあアイテム2の中に入れ子にしてさらにそのアイテムつの中に
103 00:05:56,319 --> 00:06:03,199 フレックス
104 00:05:57,800 --> 00:06:07,430 がフレックスボックスがあったということですね皆さんうまくできましたでしょうか
105 00:06:03,199 --> 00:06:10,490 うまくいかなかった人は今のコード一緒にねはいてみて
106 00:06:07,430 --> 00:06:14,079 で実践してみましょう
107 00:06:10,490 --> 00:06:14,079 それでは課題を終わります
====