課題: ページコーディングの基本
レイアウトの概要と手順
今回は、基本的なレイアウト方法を理解した上で、具体的なページをコーディングする課題に取り組みます。このセクションでは、ページの背景色や幅、ロゴの配置方法といった基本的なレイアウト方法を詳細に解説します。
ページの背景色と幅
まず、ページ全体の背景色をグレーに設定します。ページの幅は 1140 ピクセルとし、中央に配置します。
+---------------------------+
| グレー背景 |
| +------------+ |
| | ページ幅 1140px | |
| +------------+ |
+---------------------------+
ヘッダーの設定とロゴの配置
ヘッダー部分には、緑色の背景色を指定し（コード 445 に位置する緑）、パディングとして 30 ピクセルを設定します。これにより、ヘッダー内に余白が生まれ、見た目がふっくらとします。
+--------------------------------------------+
| |
| ヘッダー（背景色: 緑, パディング: 30px） |
| |
| |
+--------------------------------------------+
ロゴに関しては、「イメージ」フォルダーを作成し、その中にロゴ画像（ピング形式）を置きます。
注目の動物セクション
次はページの主要部分となる「注目の動物」セクションです。ここでは、以下の手順に従って設定します：
- 見出しを h2 タグで設定します（例: 注目の動物）。
- パンダの画像を表示し、h3 タグで「パンダ」と記述します。
- ダミーテキストを p タグで記載します。
+--------------------------------------------+
| 注目の動物(h2) |
| +---------------------+ |
| | パンダの画像 | パンダ(h3) |
| +---------------------+ |
| ダミーテキスト(p) |
+--------------------------------------------+
右側のセクション: ペンギン祭
ページ右側には、「秋のペンギン祭」に関する情報を表示します。ここでは、以下のステップを踏みます：
- 見出しを h2 タグで設定します（例: 秋のペンギン祭）。
- サブタイトルとして「ペンギンに会いに行こう」と記述し、p タグで囲みます。
- バナー画像を表示します。
+--------------------------------------------+
| 秋のペンギン祭(h2) |
| "ペンギンに会いに行こう"(p) |
| +---------------------+ |
| | バナー画像 | |
| +---------------------+ |
+--------------------------------------------+
フッターの設定
フッター部分にもパディング 30 ピクセルを設定し、全体の背景色を白に設定します。
+--------------------------------------------+
| |
| フッター（背景色: 白, パディング: 30px） |
| |
+--------------------------------------------+
コーディングの手順
最後に、フレックスボックスを用いて全体のレイアウトを行います。保存するファイル名は「test.css」として設定して進めます。
まとめ
ここまでの手順を踏んでいくと、見た目は大体以下のようになります。Flexbox を使い、背景色、パディング、見出し、画像の配置を行い、適切なレイアウトを実現してください。
+----------------------------------------------------------------+
| ヘッダー |
| +------------------------------------------------------------+ |
| | ページ幅 1140px | |
| | 注目の動物(h2) | |
| | +---------------------+ 秋のペンギン祭(h2) | |
| | | パンダの画像 | ペンギンに会いに行こう(p) | |
| | +---------------------+ +-------------------------+ | |
| | パンダ (h3) | | バナー画像 | | |
| | ダミーテキスト(p) | +-------------------------+ | |
| +------------------------------------------------------------+ |
| フッター |
+----------------------------------------------------------------+
以上が今回の課題の内容となります。しっかりとフレックスボックスを使いこなし、綺麗なレイアウトを目指してください。頑張ってください！
タイムスタンプ
1 00:00:00,630 --> 00:00:08,740 はいでは課題ですねいきましょう
2 00:00:04,259 --> 00:00:10,289 基本的なレイアウトの方法がわかったと思いますので
3 00:00:08,740 --> 00:00:17,070 8これ
4 00:00:10,289 --> 00:00:18,710 ねちょっと具体的なページになってますけれどもこのページをコーディングしてみて
5 00:00:17,070 --> 00:00:23,359 ください
6 00:00:18,710 --> 00:00:29,679 背景色はグレーボディの背景色ですねグレーで
7 00:00:23,359 --> 00:00:36,670 でえっとこのページの幅は1140ピクセル真ん中ぞれ
8 00:00:29,679 --> 00:00:39,420 ですねこのヘッダー部分のロゴはあのイメージというフォルダーを作っていただいて
9 00:00:36,670 --> 00:00:44,100 その中に老後ピング
10 00:00:39,420 --> 00:00:49,588 を配置してくださいその中にあるロゴピングを愛してください
11 00:00:44,100 --> 00:00:52,210 このイメージ図フォルダーに関してはダウンロードの箇所を作っておきますのでそちら
12 00:00:49,588 --> 00:00:53,390 からダウンロードしてください
13 00:00:52,210 --> 00:01:02,439 て
14 00:00:53,390 --> 00:01:06,219 8ここですねこのヘッダーの背景色には445に位置を使う緑っぽい色ですね
15 00:01:02,439 --> 00:01:08,250 って padding 30ピクセル入れていただきます
16 00:01:06,219 --> 00:01:12,209 するとまあちょっとねあの
17 00:01:08,250 --> 00:01:15,390 ここふっくらとするというかですねこのヘッダーの中が
18 00:01:12,209 --> 00:01:17,939 に余白を持たすことができますので
19 00:01:15,390 --> 00:01:22,829 padding 30入れておいてください
20 00:01:17,939 --> 00:01:26,459 で注目の動物 h 2にして
21 00:01:22,829 --> 00:01:30,989 その下はえーっこのパンダん
22 00:01:26,459 --> 00:01:34,439 脳画像があってやっぱりイメージズフォルダーの中に入れておきますがこれを使って
23 00:01:30,989 --> 00:01:40,530 いただいてすパンダですねってパンダー
24 00:01:34,439 --> 00:01:42,819 これここはじゃあ h 3にしましょうか書いてないですけれどもここ h 3でここ
25 00:01:40,530 --> 00:01:46,989 は p にして適当
26 00:01:42,819 --> 00:01:52,119 ように文字をダミー文字を打ち込んでおいてください
27 00:01:46,989 --> 00:01:56,379 で右母の部分俺秋のペンギン祭はこれも a 膣
28 00:01:52,120 --> 00:01:58,939 そしてペンギンに会いに行こうっていう文字を書いていただいてこら p か何かで
29 00:01:56,379 --> 00:02:03,890 くくっておくといいですね
30 00:01:58,939 --> 00:02:05,170 そのしたイメージ図でバナーピングっていうのを用意しておきましたがこれを使って
31 00:02:03,890 --> 00:02:07,250 ください
32 00:02:05,170 --> 00:02:08,789 でフッターは
33 00:02:07,250 --> 00:02:11,849 子ですね
34 00:02:08,788 --> 00:02:19,259 で padding 30
35 00:02:11,849 --> 00:02:21,789 あとさっき忘れましたけどページの部分この上の全体の部分は背景色が白で
36 00:02:19,259 --> 00:02:25,599 padding 32しておいてください
37 00:02:21,789 --> 00:02:28,250 ですかまぁだいたいこの見た目になるように
38 00:02:25,599 --> 00:02:32,599 フレックスボックスを使って
39 00:02:28,250 --> 00:02:36,680 どレイアウトしてみてくださいねじゃああーえっとまぁ
40 00:02:32,599 --> 00:02:42,740 保存するファイル名は適当でいいですけれども
41 00:02:36,680 --> 00:02:45,050 そうだなえっテストと h てみると test . css
42 00:02:42,740 --> 00:02:49,570 でいきましょうか
43 00:02:45,050 --> 00:02:49,570 じゃあそれで作ってみて下さい