DAY 1

自己紹介ページを作ろう

Day 1: 自己紹介ページを作ろう

HTMLの世界へようこそ！今日は「Hello World」から始めて、基本タグを使った自己紹介ページを完成させましょう。

今日のゴール

  • HTMLとは何かを理解する
  • 「Hello World」を表示できる
  • HTMLの基本構造を覚える
  • 見出しタグ・段落タグを使いこなす
  • 自己紹介ページを完成させる
1

Hello World! 〜はじめの一歩〜

プログラミングを学ぶとき、最初に作るのは「Hello World」と表示するプログラムです。 HTMLでも同じように、まずは画面に文字を表示してみましょう！

豆知識

「Hello World」は、1978年に出版されたプログラミング入門書で使われたのが始まり。以来、プログラミング学習の伝統になっています！

やってみよう！

下のエディタに Hello World! と入力してみてください。 右側（または下）のプレビューに、入力した文字がそのまま表示されます。 

Hello World!
ポイント

HTMLでは、テキストをそのまま書くだけでも画面に表示されます。でも、これだけでは「ただのテキスト」です。次のレッスンから、HTMLならではの「タグ」を学んでいきましょう！

Lesson 1 of 6
2

HTMLってなに？

HTMLは「HyperText Markup Language」の略です。 Webページの「骨組み」を作る言語で、文章に意味や構造を与えます。

HTMLの役割

「これは見出し」

「これは段落」

「ここに画像」

タグの基本

HTMLでは「タグ」を使って文章に意味を持たせます。タグは < > で囲みます。 

<タグ名>内容</タグ名>
具体例
書き方 意味
<h1>タイトル</h1> 一番大きな見出し
<p>文章</p> 段落（パラグラフ）

やってみよう！

「Hello World!」を <h1> タグで囲んでみましょう。 文字が大きく太く表示されるはずです！ 

<h1>Hello World!</h1>
注意

閉じタグ </h1> を忘れないようにしましょう！開始タグと閉じタグはセットです。

Lesson 2 of 6
3

HTMLの基本構造

正式なHTMLファイルには、決まった「構造」があります。 家を建てるときの設計図のように、HTMLにも基本の骨組みがあるのです。 

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

各パーツの説明

<!DOCTYPE html>

「このファイルはHTML5で書かれています」という宣言。おまじないのようなもの。

<html lang="ja">

HTMLの始まり。lang="ja" は「日本語のページ」という意味。

<head>

ページの設定情報を書く場所。画面には表示されない裏方さん。

<meta charset="UTF-8">

文字コードの指定。日本語を正しく表示するために必要。

<title>

ブラウザのタブに表示されるタイトル。

<body>

実際に画面に表示される内容を書く場所。主役！

やってみよう！

基本構造を入力して、bodyの中に「こんにちは！」と書いてみましょう。 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML</title>
</head>
<body>
  こんにちは！
</body>
</html>
ヒント

この基本構造はコピーして使い回せます。テンプレートとして覚えておきましょう！

Lesson 3 of 6
4

見出しを作ろう

見出しは文章の構造を示す重要な要素です。 新聞や本の「章タイトル」のようなものですね。

HTMLの見出しタグは <h1> から <h6> まで6段階あります。 h1が最も大きく重要で、数字が増えるほど小さくなります。

<h1> 見出し1（最大）
<h2> 見出し2
<h3> 見出し3
<h4> 見出し4
<h5> 見出し5
<h6> 見出し6（最小）
重要なルール

<h1> は1ページに1つだけ使うのが基本です。ページの主題を表す、最も重要な見出しに使いましょう。

やってみよう！

h1〜h6の全ての見出しを使って、見た目の違いを確認してみましょう！ 

<h1>これはh1見出し</h1>
<h2>これはh2見出し</h2>
<h3>これはh3見出し</h3>
<h4>これはh4見出し</h4>
<h5>これはh5見出し</h5>
<h6>これはh6見出し</h6>
Lesson 4 of 6
5

文章を書こう

文章（段落）を書くときは <p> タグを使います。 「p」は「Paragraph（段落）」の略です。 

<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>

便利なタグたち

タグ 名前 説明
<p> 段落 文章のまとまり。前後に余白ができる
<br> 改行 その場所で改行する（閉じタグ不要）
<hr> 水平線 区切り線を表示（閉じタグ不要）
空要素について

<br> や <hr> のように、中身がなく閉じタグがいらないタグを「空要素」といいます。

やってみよう！

見出しと段落を組み合わせて、簡単な自己紹介を書いてみましょう！ 

<h1>自己紹介</h1>

<h2>名前</h2>
<p>山田太郎です。</p>

<h2>趣味</h2>
<p>読書と映画鑑賞が好きです。<br>最近はプログラミングも始めました！</p>

<hr>

<p>よろしくお願いします。</p>
Lesson 5 of 6
✨

【実践】自己紹介ページを完成させよう！

Day 1の総まとめです！今日学んだことを全て使って、自分だけの自己紹介ページを作りましょう。

必須要素チェックリスト

  • HTML基本構造（DOCTYPE, html, head, body）
  • ページタイトル（<title>）
  • 大見出し（<h1>）を1つ
  • 小見出し（<h2>以下）を2つ以上
  • 段落（<p>）を3つ以上
内容のヒント
  • ・名前、ニックネーム
  • ・出身地や住んでいる場所
  • ・趣味や好きなこと
  • ・最近ハマっていること
  • ・将来の夢や目標

さあ、作ってみよう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自己紹介 - 山田太郎</title>
</head>
<body>
  <h1>山田太郎のプロフィール</h1>
  
  <h2>基本情報</h2>
  <p>はじめまして！山田太郎です。<br>東京都在住の25歳です。</p>
  
  <h2>趣味・興味</h2>
  <p>読書と映画鑑賞が大好きです。特にSF作品が好みです。</p>
  <p>最近はプログラミングの勉強を始めました。HTMLを学ぶのが楽しいです！</p>
  
  <h2>将来の目標</h2>
  <p>自分でWebサイトを作れるようになることが目標です。</p>
  
  <hr>
  
  <p>このページを見てくれてありがとうございます！<br>よろしくお願いします。</p>
</body>
</html>
Lesson 6 of 6 (Final)

Day 1 まとめ

今日学んだタグ

<!DOCTYPE> <html> <head> <body> <title> <meta> <h1>-<h6> <p> <br> <hr>

ポイント

  • ✅ HTMLはタグで文章に意味を与える
  • ✅ 基本構造は DOCTYPE + html + head + body
  • ✅ h1は1ページに1つだけ
  • ✅ 開始タグと閉じタグはセット
Day 2 へ進む