Web Layout作成講座
こんにちは、皆さん！今日の講座では、ウェブページの基本的なレイアウトについて学んでいきましょう。少しずつコードを書きながら進めていきますので、一緒にやってみましょう。
1. レイアウトのイメージ
まず、レイアウトの基本的なイメージをつかんでいただきます。
+--------------Header-----------------+
| |
| |
+--Main------------+-Sidebar---------+
| | |
| Content | |
| | |
+------------------+-----------------+
| Footer |
+------------------------------------+
2. HTMLマークアップの記述
HTMLのマークアップの基本構造は以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Layout</title>
<link rel="stylesheet" href="layout-style.css">
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="main">
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
3. CSSの設定
次に、CSSの設定を行います。以下のスタイルシートを作成し、レイアウトを整えていきます。
CSSファイル（layout-style.css）:
.container {
max-width: 1140px;
margin: 0 auto;
}
.header {
background-color: steelblue;
color: white;
padding: 15px;
text-align: center;
}
.main {
display: flex;
background-color: pink;
}
.content {
flex: 5;
background-color: lightgreen;
padding: 15px;
}
.sidebar {
flex: 2;
background-color: lightblue;
padding: 15px;
}
.footer {
background-color: grey;
color: white;
text-align: center;
padding: 10px;
}
4. コードの確認と修正
コードをブラウザにロードしてみて、正しく表示されているか確認します。必要に応じて修正を加えます。
- コンテナの中央揃え確認。
- レイアウトの整列と色の確認。
- フレックスボックスの適用。
5. 完成したレイアウトの確認
最後に、完成したレイアウトをブラウザで確認します。以下の通りに表示されるはずです。
+-----------------------------------------------------+
| Header |
|-----------------------------------------------------|
| Content | Sidebar |
| | |
| | |
|-----------------------------------------------------|
| Footer |
+-----------------------------------------------------+
まとめ
- コンテナを設定して中央揃え。
- フレックスボックスの使用でメインコンテンツとサイドバーを並べる。
- 各要素にバックグラウンドカラーを設定して視覚的に確認。
これで基本的なウェブレイアウトの作成が完了です。ぜひ、いろいろなレイアウトを作って練習してみてください。質問やフィードバックがあれば、コメント欄でお待ちしております！
※内容をより詳しく理解したい場合や、サンプルコードをお試しになりたい方は、上記のコードを実際に書いて確認してみましょう。それでは、次回の講座でお会いしましょう！
[音楽]
タイムスタンプ
1 00:00:01,300 --> 00:00:06,370 [音楽]
2 00:00:03,620 --> 00:00:06,370 me
3 00:00:08,240 --> 00:00:18,230 はいそれでは0不起訴
4 00:00:11,669 --> 00:00:18,230 ましょうかこれから web へ復活的なものが作れるようなレイアウト
5 00:00:19,329 --> 00:00:30,669 選んで実勢していきますまずこんな感じのですねえレイアウトを組んでいきます
6 00:00:27,219 --> 00:00:36,969 で8コンテナーがあってヘッダーがあって
7 00:00:30,670 --> 00:00:39,350 でメインがあってメインの中には根底とと再度場でよく左右に分かれてますよね
8 00:00:36,969 --> 00:00:42,619 メインのコンテントとサイドバーがあります
9 00:00:39,350 --> 00:00:47,359 そしてべっページの一番者振った
10 00:00:42,619 --> 00:00:50,198 っていうものがありますじゃあこれどういうコード書いていくかっていうのをこれから
11 00:00:47,359 --> 00:00:50,198 見ていきますね
12 00:00:50,460 --> 00:00:56,289 html のマークアップカラー
13 00:00:52,479 --> 00:00:58,769 まずは全体を包むコンテナーというのがあります
14 00:00:56,289 --> 00:01:01,829 でコンテナーの中には
15 00:00:58,770 --> 00:01:07,799 コネヘッダーがまずありましてこの部分
16 00:01:01,829 --> 00:01:11,989 その次にメインがあってでメインの中にはコンテントサイドバーがあるんで
17 00:01:07,799 --> 00:01:16,569 このメインのディヴと自分の間に挟まれています
18 00:01:11,989 --> 00:01:20,199 そして最後にはフッターがあるっていう8
19 00:01:16,569 --> 00:01:23,439 css はどう変えていくかというとまずコンテナ
20 00:01:20,200 --> 00:01:25,850 今回は pc の画面をですね
21 00:01:23,439 --> 00:01:29,868 想定して作ってますので
22 00:01:25,849 --> 00:01:33,769 最大幅が1140ピクセルになります
23 00:01:29,868 --> 00:01:35,950 で margin 0 auto っていうのはブラウザに対して真ん中にあるという
24 00:01:33,769 --> 00:01:40,209 ことですね
25 00:01:35,950 --> 00:01:44,570 ヘッダーバックグランドに者スチールブルー出てきましょうか
26 00:01:40,209 --> 00:01:51,349 てから文字色はホワイトにしておいてください
27 00:01:44,569 --> 00:01:56,809 そして a メインですねメインはディスプレイが flex になりますねメインの
28 00:01:51,349 --> 00:02:01,639 中にはコンテントサイドバーがありますけどそれを左右に並べるためですねその場合に
29 00:01:56,810 --> 00:02:03,219 はメインのディスプレイが flex になりますバックランドいうピンクを入れて
30 00:02:01,640 --> 00:02:04,689 おきます
31 00:02:03,219 --> 00:02:09,330 そして
32 00:02:04,689 --> 00:02:12,449 content ね左側のコンテントは割合学校
33 00:02:09,330 --> 00:02:18,819 バックライトクリーンにしておきますそして再度ば
34 00:02:12,449 --> 00:02:21,818 割合がに flex にですねでバックアドライトブルーにしておきます
35 00:02:18,818 --> 00:02:24,179 そして最後降った後たはグレー
36 00:02:21,818 --> 00:02:29,339 ときましょう
37 00:02:24,180 --> 00:02:33,480 これをですねブラウザで見るとこんな感じになっているはずです
38 00:02:29,340 --> 00:02:38,270 では象実際にコードを書いていきますので皆さんも
39 00:02:33,479 --> 00:02:38,269 コードエディターを用意して一緒にやっていきましょう
40 00:02:39,770 --> 00:02:49,870 まずはファイルをつくってみましょう
41 00:02:43,659 --> 00:02:55,000 今まで作ったデスクトップに保存してある甘酢ロッパというフォルダーの中に餌
42 00:02:49,870 --> 00:03:00,539 レイアウトですねレイアウト一度と衛士てみるという名前で保存します
43 00:02:55,000 --> 00:03:03,590 テイツールパまあ食べ背にファルシーエー雪の方も作っちゃいましょう
44 00:03:00,539 --> 00:03:04,729 レイアウト一度と css あ
45 00:03:03,590 --> 00:03:09,680 ですね
46 00:03:04,729 --> 00:03:11,909 では書きます先ほどのですね
47 00:03:09,680 --> 00:03:18,210 この
48 00:03:11,909 --> 00:03:19,960 エッグマークアップから行ってみたいと思いますコンテナがあってこれ html で
49 00:03:18,210 --> 00:03:22,010 書くということですね
50 00:03:19,960 --> 00:03:23,730 ではいきますよ
51 00:03:22,009 --> 00:03:27,719 htmlメール
52 00:03:23,729 --> 00:03:30,219 でタイプは ok ここコンテナーからですねディーブ
53 00:03:27,719 --> 00:03:35,469 .コンテナ
54 00:03:30,219 --> 00:03:38,360 はいこのディヴ.コンテナタブとかっていうのはこれサブライムテキストとか
55 00:03:35,469 --> 00:03:42,439 あとその他の行動でもですねあの
56 00:03:38,360 --> 00:03:46,870 できますんでエディターによってできないのもありますけど
57 00:03:42,439 --> 00:03:50,909 フレディたーーーー使ってと楽ですねでここはヘッダー
58 00:03:46,870 --> 00:03:51,890 ですねディベッドとヘッダー
59 00:03:50,909 --> 00:03:56,199 て
60 00:03:51,889 --> 00:03:56,199 8その中にば
61 00:03:56,990 --> 00:04:00,370 ヘッダーと書いておきましょう
62 00:03:58,759 --> 00:04:09,469 だ次は
63 00:04:00,370 --> 00:04:14,349 ティ部の. main がありましてその中にはディヴドとの content
64 00:04:09,469 --> 00:04:16,920 a まずはコンテントがありますよねデコかコンテントと書いていきましょ
65 00:04:14,349 --> 00:04:20,610 でこっちそのん
66 00:04:16,920 --> 00:04:23,000 右母にはサイドバーがあります
67 00:04:20,610 --> 00:04:27,040 サイドバー
68 00:04:23,000 --> 00:04:31,680 で一番最後はディヴの
69 00:04:27,040 --> 00:04:31,680 ドット振ったか振ったですね
70 00:04:32,589 --> 00:04:39,039 公開できますではこれをブラウザで見てみましょう
71 00:04:36,899 --> 00:04:40,379 ピンブラウザ
72 00:04:39,040 --> 00:04:42,069 ちぇっ
73 00:04:40,379 --> 00:04:44,100 では
74 00:04:42,069 --> 00:04:48,689 となりました
75 00:04:44,100 --> 00:04:50,680 じゃあですねここから css のマークアップで3 c 精度を欠いてきますねまぁ
76 00:04:48,689 --> 00:04:53,288 河童完了しましたので
77 00:04:50,680 --> 00:04:57,780 ここはまず
78 00:04:53,288 --> 00:04:59,300 レイアウト1. css を
79 00:04:57,779 --> 00:05:04,158 読み込むとう
80 00:04:59,300 --> 00:05:08,740 これで読み込まれるようになったと思いますのでまずは.コンテンダーから帰っていき
81 00:05:04,158 --> 00:05:12,430 ましょうコンテナーは a 8マックスイーツ
82 00:05:08,740 --> 00:05:14,769 が1140ピクセル
83 00:05:12,430 --> 00:05:16,500 で margin 0の
84 00:05:14,769 --> 00:05:23,219 プーと
85 00:05:16,500 --> 00:05:27,209 これで保存してプラウザで見てみましょうプラサ更新して何も変わらないですねこれは
86 00:05:23,220 --> 00:05:33,200 ちょっと広げないとちょっとわからないんですよねこれ
87 00:05:27,209 --> 00:05:36,519 と首のツールを出して広げていくと右ここに値幅が出てます
88 00:05:33,199 --> 00:05:40,418 1140ここですね1140
89 00:05:36,519 --> 00:05:43,408 あるとだんだん真ん中に入ってくるのが分かると思いますね
90 00:05:40,418 --> 00:05:47,538 真ん中によっているようです
91 00:05:43,408 --> 00:05:47,538 ちょっと試しにねえたバックグラウンド
92 00:05:48,160 --> 00:05:53,340 一時的にグレーを入れてみましょうか
93 00:05:50,790 --> 00:05:55,249 そうすると
94 00:05:53,339 --> 00:06:00,239 こうなって
95 00:05:55,249 --> 00:06:03,919 広げると真ん中ぞれになっているのがね分かると思います
96 00:06:00,240 --> 00:06:03,918 はいそうしたら
97 00:06:04,420 --> 00:06:07,830 これグレー板
98 00:06:06,350 --> 00:06:09,240 とっておきましょう
99 00:06:07,829 --> 00:06:11,839 次ですね
100 00:06:09,240 --> 00:06:11,840 次は
101 00:06:12,579 --> 00:06:17,128 ヘッダーっですからねヘッダ部分の
102 00:06:18,279 --> 00:06:24,168 しそ書きましょうヘッダバッグランドは
103 00:06:22,439 --> 00:06:26,230 うんスティ
104 00:06:24,168 --> 00:06:29,568 いるブルー
105 00:06:26,230 --> 00:06:32,460 でえっカラーが
106 00:06:29,569 --> 00:06:33,729 ホワイトね文字色がホワイト
107 00:06:32,459 --> 00:06:35,229 ですねー
108 00:06:33,728 --> 00:06:37,800 これで
109 00:06:35,230 --> 00:06:38,870 あるとこうなってますヘッダー
110 00:06:37,800 --> 00:06:41,420 ok
111 00:06:38,870 --> 00:06:43,079 じゃあ次に
112 00:06:41,420 --> 00:06:45,310 だが
113 00:06:43,079 --> 00:06:51,879 えっと終わりましたので
114 00:06:45,310 --> 00:06:55,389 次はメインですね今のメインは中のコンテント再度ばを並べますので
115 00:06:51,879 --> 00:06:58,659 これはディスプレイが flex になり
116 00:06:55,389 --> 00:07:01,728 でバックグラウンド一応つけて気の仕事で見えなくなりますけどね
117 00:06:58,660 --> 00:07:05,240 ピンクにしておきます
118 00:07:01,728 --> 00:07:09,860 そうするとコンテントサイドバーは横に並んでいます
119 00:07:05,240 --> 00:07:16,098 お腹がフレックスアイテムというね認識されているところですね
120 00:07:09,860 --> 00:07:18,400 今日はこのメインがフレックスボックスとしてきたねこれがフレックスアイテムになっ
121 00:07:16,098 --> 00:07:18,399 ていると
122 00:07:18,689 --> 00:07:24,629 では続きまして
123 00:07:21,610 --> 00:07:24,629 コンテントと
124 00:07:25,879 --> 00:07:32,699 再度バンスで本店とは
125 00:07:29,050 --> 00:07:34,770 じゃあ今回はフレックスが割合が5
126 00:07:32,699 --> 00:07:37,979 デバッグランドは
127 00:07:34,769 --> 00:07:40,129 ライトグリーンにしておきますか
128 00:07:37,980 --> 00:07:40,129 と
129 00:07:40,649 --> 00:07:43,299 経営者
130 00:07:41,889 --> 00:07:50,280 こうすると
131 00:07:43,300 --> 00:07:50,280 追われゴンになっていますね今度はサイドバーサイドバーは
132 00:07:50,579 --> 00:07:55,750 ウッドサイドバー
133 00:07:53,350 --> 00:07:59,560 フレックスが
134 00:07:55,750 --> 00:08:01,540 2ですねでバックグラウンドが
135 00:07:59,560 --> 00:08:03,509 ラインと
136 00:08:01,540 --> 00:08:06,249 ブルー
137 00:08:03,509 --> 00:08:08,069 とぷるー
138 00:08:06,249 --> 00:08:10,249 にしておきます
139 00:08:08,069 --> 00:08:11,889 で講師
140 00:08:10,249 --> 00:08:13,289 うまくいきました
141 00:08:11,889 --> 00:08:16,579 てその次
142 00:08:13,288 --> 00:08:21,649 まあですねフッターです2ま
143 00:08:16,579 --> 00:08:25,689 普通ですねドット振った.振ったんは
144 00:08:21,649 --> 00:08:25,689 8バックラーのはグリーン
145 00:08:26,040 --> 00:08:32,700 って書くとこうなりましたはいこれで一応
146 00:08:30,540 --> 00:08:36,860 レイアウトは出来上がり
147 00:08:32,700 --> 00:08:38,759 を引っ張るとこまで行って
148 00:08:36,860 --> 00:08:40,649 知人でくれるよと
149 00:08:38,759 --> 00:08:45,590 という感じですね
150 00:08:40,649 --> 00:08:55,230 はいえーっとこれで基本的なレイアウトができます
151 00:08:45,590 --> 00:08:55,230 [音楽]