日本語

ヨーロッパ

アジア

← レベル1 – ビルダー

レッスン 1/12 ⏱ 20 分

ウェブの仕組みと最初のページ

ブラウザにアドレスを入力すると何が起きるか学び、ウェブサイトの土台を作る。

ウェブサイトを開くと何が起きる？

ブラウザに www.myschool.com みたいなアドレスを入力すると：

  1. ブラウザがインターネット越しに サーバー——ウェブサイトが住んでいるコンピュータ——にメッセージを送る：「ページちょうだい！」
  2. サーバーが返事して ファイル——テキスト、画像、コード——を送ってくる。
  3. ブラウザがそのファイルを使って画面に ページを描く。

サーバーが送るファイルは HTML という言語で書かれている。まさにそれをこれから学ぶ。今はウェブサイトはサーバー上じゃなく、自分のパソコンにある。最後のレッスンでオンラインにするよ。

プロジェクトを選ぼう

一行書く前に、何を作るか 決めよう。このレベル全体で、次のどれか一つに取り組む：

決めた？ いいね。毎レッスンの課題は4つ全部カバー——自分のを見つけてね。

見てみよう：地球上のすべてのページが始まる骨組み

あなたのページも YouTube も、まったく同じ骨組みから始まる：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

わかりやすく言うと：

コードブラウザへの指示
<!doctype html>「HTMLページが始まるよ！」
<html lang="en">「中身は1ページ、英語だよ。」
<head> … </head>「ページ について の情報。」訪問者には見えない。
<meta charset="UTF-8">「特殊文字があるかも、準備して。」
<title> … </title>ページ名——ブラウザのタブに表示。
<body> … </body>「訪問者が実際に見るものはここから。」コンテンツは全部ここ。

タグの仕組み：<h1> で 開いて、</h1>（スラッシュ付き）で 閉じる。間にあるものはそのタグに属する。括弧みたい。

やってみよう 💪

  1. VS Code で my-website フォルダ（準備レベルで作った）を開き、中の index.html を開く。中身を消して、上の例の骨組みを入力。

  2. <title> と <h1> をプロジェクトに合わせて変え、見出しの下に <p> でウェブサイトについて1文追加。

  3. 保存（Ctrl+S）して、ブラウザで index.html を開く（または F5 で更新）。

わからない？ プロジェクトごとの答え：

🏫 答え：学校のウェブサイト 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>
🙋 答え：個人サイト 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>
🌍 答え：旅行日記 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>
⚽ 答え：クラブサイト 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>
✅

確認： ブラウザのタブにサイト名、ページに見出しと文が表示される。そうなら——土台完成！

このレッスンのまとめ

© 2026 Ing. Martin Polak / AlgoRhino · コンテンツ利用規約