課題の解説
さあ、課題の解説をしていきましょう。皆さん、できましたでしょうか？
クラス設計の概要
まず、最初にやるべきは、以下の設計ステップです。
+------------------------+
| コンテナー |
| +------------------+ |
| | ヘッダー | |
| +------------------+ |
| | メイン | |
| | +------------+ | |
| | | コンテント | | |
| | +------------+ | |
| | | サイドバー | | |
| +------------------+ |
| | フッダー | |
+------------------------+
このように、各部分がどのように分かれるかを視覚的に捉え、それぞれに名前を付けていきます。
HTMLの作成
まずは、HTMLファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レイアウト課題</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="コンテナー">
<div class="ヘッダー">ヘッダー</div>
<div class="メイン">
<div class="コンテント">コンテント</div>
<div class="サイドバー">サイドバー</div>
</div>
<div class="フッダー">フッダー</div>
</div>
</body>
</html>
このように、基本的なレイアウトの構造をHTMLで書いていきます。
CSSの作成
次に、CSSファイルを作成していきます。
body {
font-family: Arial, sans-serif;
}
.コンテナー {
width: 960px;
margin: 0 auto;
}
.ヘッダー, .フッダー {
background-color: #ccc;
padding: 10px;
}
.メイン {
display: flex;
}
.コンテント {
flex: 3;
background-color: #e2e2e2;
padding: 10px;
}
.サイドバー {
flex: 1;
background-color: #d4d4d4;
padding: 10px;
}
こうすることで、各部分にスタイルを適用し、実際のブラウザでの見た目が整います。
コンテンツの追加
さらに深堀りすると、このコンテント部分には詳細なセクションと画像、説明文が含まれることがわかります。
<div class="コンテント">
<section class="セクション">
<img src="panda.jpg" alt="パンダ" class="イメージ">
<div class="ディスクリプション">パンダ</div>
</section>
</div>
マークアップの完成
最後に、完成したHTMLとCSSをブラウザで確認しましょう。定期的にブラウザで結果を確認し、修正を行うことが重要です。
この方法でレイアウトを考え、マークアップを行い、それをCSSで装飾するという流れがレイアウト設計のコツです。日々の練習と工夫で、効率的に美しいウェブページを作成することができるようになります。
結論
文字起こしからの変換作業では、視覚的な補完と詳細な説明が求められます。これをしっかり行うことで、読者にとって理解しやすくためになる情報が提供できるでしょう。
+------------------------+
| 頭から各資格を |
| 描き、その中に |
| 名前を付けていく |
+------------------------+
タイムスタンプ
1 00:00:00,000 --> 00:00:09,210 さあ課題の解説いきましょうか皆さんできましたでしょうかね
2 00:00:04,710 --> 00:00:12,419 まずへとどうするかっていうとさっきのね
3 00:00:09,210 --> 00:00:14,830 ここからクラス設計をするわけですよね
4 00:00:12,419 --> 00:00:18,689 この外側の部分は
5 00:00:14,830 --> 00:00:21,719 これはまあコンテナー大相当
6 00:00:18,690 --> 00:00:26,890 今までのやってればなんとなくわかりますよね
7 00:00:21,719 --> 00:00:30,210 で今度は epo この部分はこれはヘイターだぞ
8 00:00:26,890 --> 00:00:32,859 でヘッダーその下には
9 00:00:30,210 --> 00:00:34,359 そうですねこれはメインが
10 00:00:32,859 --> 00:00:40,879 あって
11 00:00:34,359 --> 00:00:43,640 でメインの中にはさらに何か分かれそうですねこれコンテントと
12 00:00:40,880 --> 00:00:47,810 ここまではさっきの
13 00:00:43,640 --> 00:00:51,799 まあ基本的なレイアウトとほぼ同じですよね
14 00:00:47,810 --> 00:00:56,359 コンテントサイドバーになっていてでフッダーが張ってとか
15 00:00:51,799 --> 00:01:04,789 まぁこんな感じでちょっと全部はね名前書きませんけれども
16 00:00:56,359 --> 00:01:07,799 こういう区切り方になっていると思いますでまずここの自分で作るときはこういう頭
17 00:01:04,790 --> 00:01:10,409 から資格を国旗って言ってそれぞれ
18 00:01:07,799 --> 00:01:13,729 名前を付けていくわけですね
19 00:01:10,409 --> 00:01:16,080 これをもとに行動を書いていくよと
20 00:01:13,730 --> 00:01:19,590 じゃあやってみましょう
21 00:01:16,079 --> 00:01:23,920 ここはまずはテスト度と html
22 00:01:19,590 --> 00:01:26,070 ねこれをつくって html
23 00:01:23,920 --> 00:01:30,079 その中には
24 00:01:26,069 --> 00:01:34,479 チャッキーの像見ながらこれコンテナーだなぁと
25 00:01:30,079 --> 00:01:34,480 っていう女.コンテナーだなぁと
26 00:01:34,659 --> 00:01:40,289 でその中にはディヴ.ヘッダーだなと
27 00:01:41,260 --> 00:01:44,700 っていうのがわかると思うんですよね
28 00:01:45,000 --> 00:01:50,609 ねこれヘッダーが出れメインがあって
29 00:01:48,819 --> 00:02:01,000 次ねー
30 00:01:50,609 --> 00:02:02,620 リブのおっドメインがあってその中には自分のクラスのコンテントがあって
31 00:02:01,000 --> 00:02:08,610 で
32 00:02:02,620 --> 00:02:12,770 その中その右にはサイドバーがあってと
33 00:02:08,610 --> 00:02:16,610 でここ一番下にはフッターがあっ
34 00:02:12,770 --> 00:02:22,550 という感じでお分けられますねー
35 00:02:16,610 --> 00:02:28,510 て中はまぁちょっと入れていきます文字をね一応のため出てきますけれども
36 00:02:22,550 --> 00:02:28,510 あとでねこれはどこがどの場所かて分かるように金文字を打ちます
37 00:02:29,400 --> 00:02:36,640 そうなんです
38 00:02:30,610 --> 00:02:37,910 でここでまぁ8できているぞと web オープンブラウザでまず見てみる投稿できて
39 00:02:36,639 --> 00:02:42,669 います
40 00:02:37,909 --> 00:02:47,639 でリンクのテスト度と css あ
41 00:02:42,669 --> 00:02:47,639 低てストローとし aces をまず作ってきますねー
42 00:02:48,919 --> 00:02:55,009 test . css
43 00:02:51,800 --> 00:03:00,610 それもう一度ちょっと原画をですで見てみますと
44 00:02:55,009 --> 00:03:05,280 これメインがこうあってさらに高混でとかってコンテント中にですね
45 00:03:00,610 --> 00:03:06,450 さらになんかこうありそうですね注目の動物の下にパンダ
46 00:03:05,280 --> 00:03:12,348 ねっ
47 00:03:06,449 --> 00:03:12,348 パンダっていうところとその文字が分かれてそうですよね
48 00:03:12,800 --> 00:03:15,680 これ
49 00:03:14,610 --> 00:03:17,730 って
50 00:03:15,680 --> 00:03:19,580 これコンテナーで
51 00:03:17,729 --> 00:03:22,549 コーデですねー
52 00:03:19,580 --> 00:03:25,060 でこれが高はカレッジそう
53 00:03:22,550 --> 00:03:25,060 です
54 00:03:25,740 --> 00:03:31,629 はいはい
55 00:03:27,068 --> 00:03:35,098 そうなってくるとここに新しくまたは何が作らなきゃいけないんですけど
56 00:03:31,628 --> 00:03:35,098 このパンダとか他の動物も
57 00:03:35,120 --> 00:03:40,810 8並べてこれから並べるよってなんでこのセクションが
58 00:03:39,110 --> 00:03:44,610 でふさわしいですね
59 00:03:40,810 --> 00:03:50,039 で9写真の部分にはイメージ
60 00:03:44,610 --> 00:03:51,950 ってここはま description なディスクと簡単につけておくと良いかなと
61 00:03:50,039 --> 00:03:54,818 思います
62 00:03:51,949 --> 00:04:00,289 じゃあそれをですね html に
63 00:03:54,818 --> 00:04:05,068 加えるんですけどこのコンテントって言うともですねこれも文字消しちゃって
64 00:04:00,289 --> 00:04:07,239 8自分のクラスでセクション
65 00:04:05,068 --> 00:04:15,299 でセクションがあっ
66 00:04:07,240 --> 00:04:15,300 でその中に自分のクラスのイメージがあって
67 00:04:15,509 --> 00:04:21,920 でしょでその下にその
68 00:04:18,529 --> 00:04:25,969 右母には this ケーションがある与党
69 00:04:21,920 --> 00:04:30,160 まぁこんな感じのマークアップになるかなと思います
70 00:04:25,970 --> 00:04:31,960 これねうまくできて言っちゃうイメージ
71 00:04:30,160 --> 00:04:35,150 すっ
72 00:04:31,959 --> 00:04:39,389 で8さっきの
73 00:04:35,149 --> 00:04:44,250 これでこの設計通りにだかなと思います
74 00:04:39,389 --> 00:04:49,560 まだ慣れてない初心者のじゃあねこういうふうにはかでまぁ何の磯でもいいですけど
75 00:04:44,250 --> 00:04:54,129 腰郭をつくってどういう方増でこれ表現できるかなーって考えるのがまレイアウトの
76 00:04:49,560 --> 00:04:58,259 コツになりますねこれをよく覚えておくこと
77 00:04:54,129 --> 00:05:02,100 じゃあこれでマークアップがうまくいったかなと思いますんで
78 00:04:58,259 --> 00:05:09,589 とブラウザ更新してするとまぁまだ css 何もね
79 00:05:02,100 --> 00:05:09,590 設定しないのでこうなりますでは次から css を設定してまいりましょう