MENU
  1. ホーム
  2. 07. HTML/CSS
  3. 7-01 Webページの基礎とHTML入門

7-01 Webページの基礎とHTML入門

07. HTML/CSS

📚 今日学ぶこと

  • Webページの仕組みを理解する
  • HTMLの基本構造を覚える
  • 初めてのHTMLファイルを作成する
  • ブラウザでWebページを表示する

🌐 1. Webページとは？

Webページの仕組み

インターネットで見ることができるWebページは、HTML（Hyper Text Markup Language）という言語（ルール）で書かれています。

HTMLの特徴

  • 🌍 標準化されている：アクセスするコンピュータのOSやブラウザが異なっても同じ内容を表示
  • 🖥️ サーバーに保存：HTMLファイルはサーバーコンピュータに置かれている
  • 🔗 アクセス可能：私たちはそのファイルにアクセスして見ることができる

Webページを作る3つの要素

HTMLファイルにある情報を整理してカッコよく見せるために、以下の言語が関連しています：

🏗️ HTML        = 建物の骨組み（内容・構造）
🎨 CSS         = 建物の装飾（見た目・デザイン）  
⚡ JavaScript  = 建物の設備（動き・機能）

今日はHTML（骨組み）を学びます！

ブラウザの役割

  • Chrome、Firefox、Safari等がブラウザ
  • サーバーからHTMLファイルを受信
  • HTMLコード → きれいなWebページに変換する翻訳機
  • どのブラウザでも同じように表示される（標準化のおかげ）

🏗️ 2. HTML基本構造

HTMLタグとは

Webページに掲載する文章のそれぞれの部分をHTMLタグと呼ばれる記号で前後を挟むことで、その文字列の位置付けを明らかにします。

HTMLは人間の体のようなもの

<html>     ← 全身
  <head>   ← 頭（見えない部分：設定情報）
  </head>
  <body>   ← 体（見える部分：コンテンツ）
  </body>
</html>

基本的なHTML文書の構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    ここに見える内容を書く
</body>
</html>

各部分の説明

  • <!DOCTYPE html> : 「これはHTMLファイルです」という宣言
  • <html lang="ja"> : 日本語のHTMLページの開始
  • <head> : ページの設定情報（見えない部分）
  • <meta charset="UTF-8"> : 文字化けしないための設定
  • <title> : ブラウザのタブに表示されるタイトル
  • <body> : 実際にページに表示される内容

💡 重要： この構造はHTML言語の標準ルールに従っています。このおかげで、どのブラウザ、どのOSでも同じように表示されます。

🏷️ 3. 基本的なHTMLタグ

見出しタグ

作文のタイトルのようなもの

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>見出しの練習</title>
</head>
<body>
    <h1>一番大きい見出し</h1>
    <h2>中くらいの見出し</h2>
    <h3>小さい見出し</h3>
    <h4>もっと小さい見出し</h4>
    <h5>さらに小さい見出し</h5>
    <h6>一番小さい見出し</h6>
</body>
</html>

📝 覚え方： h = heading（見出し）、数字が小さいほど大きい見出し

段落タグ

作文の段落のようなもの

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>段落の練習</title>
</head>
<body>
    <p>これは段落です。長い文章を書くときに使います。</p>
    <p>別の段落です。段落と段落の間には自動で空白が入ります。</p>
</body>
</html>

📝 覚え方： p = paragraph（段落）

強調タグ

重要な部分を目立たせる

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>強調の練習</title>
</head>
<body>
    <p>この部分は<strong>とても重要</strong>です。</p>
    <p>この部分は<em>強調したい</em>部分です。</p>
</body>
</html>
  • <strong> : 太字で強調
  • <em> : 斜体で強調

改行タグ

文章を改行する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>改行の練習</title>
</head>
<body>
    <p>
        1行目<br>
        2行目<br>
        3行目
    </p>
</body>
</html>

📝 覚え方： br = break（改行）

💻 4. 実習：初めてのWebページ作成

STEP 1: フォルダとファイルの準備

  1. デスクトップに「web_lesson」フォルダを作成
  2. VS Codeを起動
  3. 「ファイル」→「フォルダーを開く」で「web_lesson」フォルダを開く
  4. 「ファイル」→「新しいファイル」をクリック
  5. ファイル名を「lesson1.html」として保存

💡 ポイント： ファイル名は必ず「lesson1.html」（小文字）

STEP 2: 基本構造を書く

VS Codeに以下をタイプしてください：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
</head>
<body>

</body>
</html>

💡 ポイント：

  • 半角英数字で入力
  • **<>**の記号を正確に
  • “（ダブルクォーテーション）を正確に

STEP 3: 内容を追加

<body>と</body>の間に、以下の文章を適切なHTMLタグを使って配置してください：

文章（平文）

音楽とICT 〜テクノロジーが奏でる新しいハーモニー〜

音楽の楽しみ方はどう変わったか？

かつて音楽を聴くには、CDやラジオ、コンサートなどが主な手段でした。しかし、今ではスマートフォンやストリーミングサービスの登場により、誰でも好きな時に好きな曲を聴けるようになりました。ICT（情報通信技術）は、音楽を身近なものにし、個人の好みに合った楽曲を自動で提案してくれる便利な時代をつくっています。これにより、音楽の楽しみ方はより自由で多様になりました。

音楽のつくり方にもICTが関わっている

音楽を制作する現場でもICTの進化は大きな影響を与えています。パソコンやタブレット、スマートフォンで作曲や編曲ができるソフトが登場し、誰でも簡単にオリジナルの曲をつくれるようになりました。また、オンラインで他の音楽家とコラボレーションすることも可能になり、距離に関係なく新しい音楽が生まれています。ICTは「音楽づくり」をより開かれたものにしているのです。

これからの音楽とICTの関係

今後もICTの進化によって、音楽の世界はますます広がっていくでしょう。たとえば、AIによる自動作曲や、バーチャルリアリティを使った音楽ライブなど、これまでにない新しい体験が生まれつつあります。音楽とICTが一体となることで、聞き手も作り手も、もっと自由に音楽を楽しめる未来がやってきます。これからどんな音楽と出会えるのか、ワクワクしますね。

課題

上記の文章を読んで、以下を考えながらHTMLタグを設定してください：

  • どの部分がページのメインタイトル（一番大きな見出し）でしょうか？
  • どの部分が小見出しでしょうか？
  • どの部分が段落でしょうか？
  • どの言葉を強調したいですか？

使用するタグ

  • <h1>: メインタイトル（一番大きな見出し）
  • <h2>: 小見出し
  • <p>: 段落
  • <strong>: 重要な部分の強調
  • <em>: 強調したい部分

💡 ヒント： 文章の構造を理解してから、適切なタグを選択しましょう

STEP 4: 保存とブラウザ表示

  1. Ctrl+S（Win）またはCmd+S（Mac）でファイルを保存
  2. ファイルをブラウザにドラッグ&ドロップ
  3. Webページが表示されることを確認

🎉 成功！ あなたの初めてのWebページが完成しました！

✅ 5. 確認問題

問題1: タグの意味

以下のタグの意味を答えてください：

  1. <h1> : _________________
  2. <p> : _________________
  3. <strong> : _________________
  4. <em> : _________________
  5. <br> : _________________

問題2: 正しいHTMLはどれ？

以下のうち、正しく書かれているHTMLはどれでしょうか？

A) <h1>見出し<h1> B) <h1>見出し</h1> C) <H1>見出し</H1>

答え： _______

問題3: HTML文書の基本構造

空欄を埋めてください：

<!_______ html>
<html lang="ja">
<_____>
    <meta charset="_____-8">
    <title>ページタイトル</title>
</head>
<_____>
    ここに内容を書く
</body>
</html>
解答
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
</head>
<body>
    ここに内容を書く
</body>
</html>

🔍 6. よくあるミスと解決方法

❌ ブラウザにコードがそのまま表示される

原因： ファイル名が正しくない 解決： ファイル名を「index.html」に変更

❌ 文字が化ける

原因： 文字エンコーディングの問題 解決： <meta charset="UTF-8">が正しく入力されているか確認

❌ タグが正しく表示されない

原因：

  • 開始タグと終了タグが対応していない
  • 半角/全角の間違い

解決：

  • <h1>に対して</h1>があるか確認
  • すべて半角英数字で入力

❌ VS Codeでタグの色が変わらない

原因： ファイルが.htmlとして保存されていない 解決： ファイル名を「index.html」として再保存

🏠 7. 宿題

課題：興味のある分野のWebページ作成

今日作ったページにさらに内容を追加してください：

ファイル作成の指示

  1. 新しいファイルを作成：VS Codeで「ファイル」→「新しいファイル」
  2. ファイル名：「lesson2.html」として保存
  3. 理由：次回の授業でページ間のリンクを作成するため

テーマ例

  • スポーツとICT
  • 芸術とテクノロジー
  • 食べ物と科学
  • 環境問題と技術
  • ゲームとプログラミング
  • ファッションとデザイン

必須項目

  1. 興味のある分野の紹介
  2. その分野での技術の活用
  3. 将来への期待や展望

自由項目

  • 体験談や具体例
  • 疑問に思っていること
  • 今後学びたいこと

提出方法

  • USBメモリまたはクラウドに両方のファイルを保存
  • lesson1.htmlとlesson2.htmlを次回授業時に持参
  • 提出ファイル名：「lesson1_氏名.html」「lesson2_氏名.html」

次回への準備

  • 2つのHTMLファイルが完成していること
  • VS Codeでファイルが開けること
  • 次回はページ間のリンク作成を学習します

評価ポイント

  • HTMLタグが正しく使われているか
  • 創意工夫があるか
  • 内容が充実しているか

🔮 8. 次回予告

第2時間目：リンクとファイル構造

次回は複数のHTMLファイルをつなげて、本格的なWebサイトを作ります！

学習内容

  • **リンク（<a>タグ）**の基本
  • ファイル間のリンク作成方法
  • Webサイトのファイル構造
  • ナビゲーションの概念
  • 相対パスと絶対パスの違い

リンクとは？

Webページの最大の特徴は、他のページに「跳ぶ」ことができることです。このページ間の移動を可能にするのが「リンク」です。今回作成した2つのファイル（lesson1.html、lesson2.html）を相互にリンクさせます。

事前準備

  • lesson1.htmlとlesson2.htmlの2つのファイルを必ず持参
  • GitHubアカウントの作成（まだの方）
  • 両ファイルが正常に表示されることを確認

完成予想

  • ページ間を自由に行き来できるWebサイト
  • 「戻る」「次へ」ボタンのようなナビゲーション
  • トップページ（index.html）の作成

🎯 目標： 複数ページで構成される本格的なWebサイトの基礎を作る

第3時間目予告：CSSでデザインを整える

第3時間目では、作成したWebサイトを美しくデザインします！

📋 9. 今日の学習チェックリスト

自分の学習状況をチェックしてください：

理解度チェック

  • [ 　] HTMLの基本構造を説明できる
  • [ 　] h1, p, strong, em, brタグの役割がわかる
  • [ 　] 開始タグと終了タグの対応関係がわかる

技能チェック

  • [ 　] VS CodeでHTMLファイルを作成できる
  • [ 　] 基本的なHTMLタグを使える
  • [ 　] ファイルを保存してブラウザで表示できる

完成物チェック

  • [ 　] lesson1.htmlファイルが完成している
  • [ 　] ブラウザで正常に表示される
  • [ 　] 自己紹介の内容が含まれている

✨ すべてチェックできたら今日の目標達成！

📚 10. 参考資料

HTML基本タグ一覧

タグ意味用途
<h1>〜<h6>見出しタイトルや章立て
<p>段落文章のまとまり
<strong>重要太字で強調
<em>強調斜体で強調
<br>改行文章の途中で改行

覚えるべきショートカット

  • 保存: Ctrl+S (Win) / Cmd+S (Mac)
  • 全選択: Ctrl+A (Win) / Cmd+A (Mac)
  • コピー: Ctrl+C (Win) / Cmd+C (Mac)
  • 貼り付け: Ctrl+V (Win) / Cmd+V (Mac)

HTML学習のコツ

  1. タグは必ずペアで書く
  2. 半角英数字で入力する
  3. インデント（字下げ）で構造を見やすくする
  4. 小さなミスでも動かなくなるので注意深く
07. HTML/CSS

コメント

コメントする