HTMLからCSSへのステップアップ: ウェブサイト制作の基礎
今回は、HTMLの基礎を使ってシンプルなウェブサイトを作成し、その後CSSを使ってスタイリングしていきます。ウェブサイト制作の初心者でも理解しやすいように丁寧に説明していきます。
HTMLの基本要素を追加する
まずは、HTMLの基本要素を追加していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ウェブサイト制作</title>
</head>
<body>
<header>
<img src="images/logo.png" alt="ロゴ">
</header>
<main>
<section class="content">
<h2>注目の動物</h2>
<img src="images/panda.png" alt="パンダ">
<h3>パンダ</h3>
<p>パンダについてのダミーテキスト。</p>
</section>
<aside class="sidebar">
<h2>秋のペンギン祭</h2>
<p>ペンギンに会いに行こう。</p>
<img src="images/banner.png" alt="バナー">
</aside>
</main>
<footer>
<p>フッターの内容。</p>
</footer>
</body>
</html>
補足説明
上記のHTMLコードは、簡単なヘッダー、メインコンテンツ、サイドバー、フッターを含んだシンプルなウェブページの骨組みとなります。この段階で各セクションに基本的な内容を追加しました。
_____
| | Website Header (ロゴ画像)
|_____|
|
_____
|注目の動物 (Section)
| ___ |
| | パンダ画像 |
| |_____|
|パンダについてのダミーテキスト
|_____|
|
_____
|秋のペンギン祭 (Sidebar)
|ペンギンに会いに行こう
| ___
||バナー画像|
|____|
|
| フッターの内容 |
|__________________|
HTMLの追加設定
次に、追加の設定をHTMLに反映していきます。
imgタグで画像を挿入します。h2タグで各セクションの見出しを作成します。pタグでダミーテキストを表示します。
補足説明
HTMLでは、<img>タグを使用して画像を挿入します。また、見出しには<h2>タグ、段落には<p>タグを使用します。
_____
| img | <img src="images/logo.png" alt="ロゴ"> // ロゴ画像を表示
|_____|
|
_____
| h2 | 注目の動物 (見出し)
| img | <img src="images/panda.png" alt="パンダ"> // パンダ画像を表示
| h3 | パンダ (小見出し)
| p | パンダについてのダミーテキスト // ダミーテキスト
|_____|
|
_____
| h2 | 秋のペンギン祭 (見出し)
| p | ペンギンに会いに行こう
| img | <img src="images/banner.png" alt="バナー"> // バナー画像
|____|
|
| フッターの内容 |
|__________________|
HTMLの完成
これですべてのHTML要素が揃いました。次のステップは、CSSを使用してスタイリングを適用することです。
HTML設定が完了しました。次にCSSを設定しましょう！
上記の手順で基本的なHTML設定が完了しました。次回は、CSSを使ってこれらの要素を美しくスタイリングしていきます。お楽しみに！
タイムスタンプ
1 00:00:00,800 --> 00:00:12,070 さあでわでわでわ行ってみましょうかえっ css の方をね書いていきます
2 00:00:07,299 --> 00:00:15,099 css の前にですねもう少しで html ねー
3 00:00:12,070 --> 00:00:18,579 進めていきましょうここへ
4 00:00:15,099 --> 00:00:21,170 img とかねこの文字を入れていきます
5 00:00:18,579 --> 00:00:23,649 でまずイメージズのロゴ
6 00:00:21,170 --> 00:00:27,460 このヘッダーの中には
7 00:00:23,649 --> 00:00:32,429 img デーロイメージ図の中
8 00:00:27,460 --> 00:00:35,420 イメージ図スラッシュろ神戸とピング
9 00:00:32,429 --> 00:00:40,100 ですねこのイメージ図
10 00:00:35,420 --> 00:00:46,120 8ダウンロードするところねまぁ支持しておきますのでその中からダウンロードして
11 00:00:40,100 --> 00:00:48,289 いただいてこの後.ピングを挿入していますこれで保存して
12 00:00:46,119 --> 00:00:49,469 で見てみると
13 00:00:48,289 --> 00:00:51,810 まず
14 00:00:49,469 --> 00:00:54,879 これ文字とか白なんでね
15 00:00:51,810 --> 00:00:56,329 実はロゴがあるんですこれでちょっとわかるかもしれん
16 00:00:54,880 --> 00:00:58,070 で次
17 00:00:56,329 --> 00:01:00,450 は
18 00:00:58,070 --> 00:01:08,239 そうですね a
19 00:01:00,450 --> 00:01:08,240 えっどこの h つ注目の動物っていうのを書きましょうか
20 00:01:08,790 --> 00:01:14,360 コンテントの中 h 2
21 00:01:12,370 --> 00:01:17,870 中
22 00:01:14,359 --> 00:01:21,099 中も多くの乙女っ
23 00:01:17,870 --> 00:01:21,100 はいそして
24 00:01:22,019 --> 00:01:32,149 このつの中ですね8セクションに変えてイメージとここはディスクリートの中ここは
25 00:01:28,560 --> 00:01:34,640 イメージ図 s パンダピングが入っていますね
26 00:01:32,150 --> 00:01:37,190 なのでここには
27 00:01:34,640 --> 00:01:39,140 やっぱり img デー
28 00:01:37,189 --> 00:01:41,000 8イメージ図
29 00:01:39,140 --> 00:01:44,590 s under はパン
30 00:01:41,000 --> 00:01:44,590 だー. jp 地
31 00:01:44,799 --> 00:01:49,379 でここには
32 00:01:47,609 --> 00:01:51,780 と開業しましょうか
33 00:01:49,379 --> 00:01:53,039 h 3 day
34 00:01:51,780 --> 00:01:57,079 たんだん
35 00:01:53,040 --> 00:02:01,930 んですねここはダミーダミーで結構です
36 00:01:57,079 --> 00:02:03,450 p タグに出ておきましょうかダミーダミー
37 00:02:01,930 --> 00:02:07,050 ですね
38 00:02:03,450 --> 00:02:08,090 うこれで見てみましょう
39 00:02:07,049 --> 00:02:12,259 えいっ
40 00:02:08,090 --> 00:02:14,789 パンダがないですね8イメージのベスパんだ
41 00:02:12,259 --> 00:02:18,799 8イメージ図の中の
42 00:02:14,789 --> 00:02:21,030 s パンダ度と jp じゃないですねピングですね
43 00:02:18,800 --> 00:02:23,819 png
44 00:02:21,030 --> 00:02:26,710 えっきました
45 00:02:23,818 --> 00:02:32,229 じゃあここまでは ok と
46 00:02:26,710 --> 00:02:34,170 で次にそうですね今どこかなだけのペンギン祭
47 00:02:32,229 --> 00:02:35,489 便宜に会いに行こう
48 00:02:34,169 --> 00:02:43,029 ここが
49 00:02:35,490 --> 00:02:46,379 サイドバーのところでーじ2で秋の penryn 祭
50 00:02:43,030 --> 00:02:46,379 えっ2秋
51 00:02:46,680 --> 00:02:49,240 ん祭り
52 00:02:48,189 --> 00:02:52,030 でしょ
53 00:02:49,240 --> 00:02:54,390 でペンギンに会いに行こ
54 00:02:52,030 --> 00:02:54,390 ですね
55 00:02:56,770 --> 00:03:01,830 と p のペンギン
56 00:02:59,449 --> 00:03:03,159 あいみん
57 00:03:01,830 --> 00:03:05,010 1個
58 00:03:03,159 --> 00:03:10,530 はい
59 00:03:05,009 --> 00:03:12,929 てここまでができてちょっと見てますね目 web サイト制作はちょっと作って
60 00:03:10,530 --> 00:03:19,310 ちょっと見てみたいな感じでね
61 00:03:12,930 --> 00:03:21,099 できていますでその次ここには img が入らせスター mg のイメージ図の
62 00:03:19,310 --> 00:03:24,310 バナー
63 00:03:21,099 --> 00:03:25,620 バーガー.ピング
64 00:03:24,310 --> 00:03:28,650 を入れます
65 00:03:25,620 --> 00:03:29,400 低こっちを見ていくとお入りました
66 00:03:28,650 --> 00:03:30,520 ん
67 00:03:29,400 --> 00:03:35,890 k
68 00:03:30,520 --> 00:03:39,670 これで大丈夫ですかねあとはフッターは入ってるんで ok
69 00:03:35,889 --> 00:03:45,029 これで html の設定はすべて終了しました
70 00:03:39,669 --> 00:03:45,030 次は css を設定に行きましょう