こんにちは、「ぷろぐらの森」です🌱
今回は、HTML（エイチ・ティー・エム・エル）を使って、簡単な「自己紹介ページ」を作ってみます。プログラミングが初めての方でもOK。この記事を読みながら進めれば、あなたの手でWebページが完成します！
HTMLってなに？
HTMLとは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略。
Webページをつくるための基本的な言語です。
- テキストを表示する
- 画像を貼る
- ボタンやリンクをつける
…など、Webサイトの「土台」を作るのがHTMLの役割です。
ステップ①：必要なものを準備しよう
● パソコン（Windows／MacどちらでもOK）
スマホやタブレットでは編集が難しいため、パソコンを使いましょう。
● テキストエディター（メモ帳でもOK）
おすすめは以下の無料エディターです：
- Visual Studio Code (おすすめ)
- Sublime Text
- Atom ※現在開発終了
● Webブラウザ（Chrome / Firefox / Edgeなど）
作ったHTMLファイルを開くと、ブラウザ上で見られます。
ステップ②：HTMLファイルを作ろう！
まずは以下の手順でファイルを作成しましょう：
- デスクトップなどに新しいフォルダを作成（例：
myprofile） - 作成したフォルダーの中に「index.html」というファイルを作る
- テキストエディタで開き、以下のコードを入力
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ぼくのじこしょうかい</title>
</head>
<body>
<h1>こんにちは！ぼくのなまえはタロウです。</h1>
<p>小学校4年生です。</p>
<p>好きなことは、ゲームとサッカーです！</p>
</body>
</html>保存したあと、そのファイルをブラウザで開くと… あなたの「自己紹介ページ」が表示されます！
ステップ③：内容を変えて自分らしくしよう
たとえば、以下のように自由にカスタマイズできます：
<h1>の見出しを変える<p>の文章に趣味や家族のことを書く- 自分のイラストや画像を追加する（次回記事で解説予定）
ステップ④：HTMLタグを理解しよう（かんたん解説）
HTMLには「タグ（tag）」という特別なカギのような記号を使って、
「ここは見出しだよ」「ここは文字だよ」とコンピューターに伝えます。
タグは < > でかこまれた言葉 です。
タグには「はじまり」と「おわり」があり、ペアで使います。
たとえば：
htmlコピーする編集する<p>こんにちは！</p>
これは <p> が「はじまりのタグ」</p> が「おわりのタグ」
→ 中の「こんにちは！」がページに表示されます。
🏷️ よく使うタグを紹介するよ！
| タグ | よみかた | 何をする？ | 画面にどう出る？ |
|---|---|---|---|
<html> | エイチティーエムエル | このページはHTMLだよと伝えるタグ | （見えない） |
<head> | ヘッド | ページの名前や情報をまとめる場所 | （見えない） |
<title> | タイトル | ブラウザの上に出るページのタイトル | タブに名前が出るよ |
<body> | ボディ | ページに出したい内容を書く場所 | 本文の中がここに入る |
<h1> | エイチワン | 一番大きな見出し（タイトル） | 大きな文字 で出る |
<p> | ピー | ふつうの文（段落）を書くタグ | 一文ずつ表示される |
✏️ タグのかたちを覚えよう！
タグは、こんなふうにセット（ペア）で使います：
php-templateコピーする編集する<タグ名> ←はじまり内容を書くよ！ </タグ名> ←おわりたとえば<h1>タグを使ってみると…<h1>わたしのすきなこと</h1>
このように書くと、ページに大きな文字で「わたしのすきなこと」と表示されます。
↓↓実際に<h1> タグを使った例↓↓
わたしのすきなこと
📚 タグの使い方をイメージしよう（たとえ話）
タグを「ラベルのついた箱」だと思ってみてください。
<p>りんご</p>→ 「りんご」と書かれた紙を「段落の箱」に入れた感じ<h1>こんにちは</h1>→ 「こんにちは」という看板を「大きな見出しの箱」にいれた感じ
こうやって、コンピューターに”どう見せたいか”をタグで教えるんです。
🎨 タグの使い方を実際に見てみよう！
以下は、タグを使って文章を作った例です：
<!DOCTYPE html>
<html>
<head>
<title>タロウのページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>ぼくのなまえはタロウです。</p>
<p>すきなことは、ゲームとサッカーです！</p>
</body>
</html>
↓↓表示されるとこうなります↓↓
こんにちは！
ぼくのなまえはタロウです。
すきなことは、ゲームとサッカーです！
覚えたいポイント
- タグはコンピューターへの合図だと思えばOK！
- 必ずはじまりとおわりのセットで使おう
<h1>と<p>を使えば、かんたんなページが作れる！
タグはたくさん種類がありますが、まずはこのくらい覚えればOKです。
次は、色をつけたり画像をいれたりして、もっとかっこいいページにしていきましょう✨
HTMLを学ぶメリット
HTMLはプログラミングの中でもとっつきやすく、結果がすぐに見えるのが魅力です。
- タイピングの練習になる
- 書いたコードが目の前で動く＝成功体験になる
- 自分の「作品」を作れるので創造力が育つ
最近では、小学生のプログラミング教育でもHTMLを扱うケースが増えてきました。難しいコードは不要で、基本的なタグを知っていれば自由にページを作れます。
よくある質問（FAQ）
Q. スマホで作れますか？
→ 一部のアプリでは可能ですが、編集・表示の確認をするためにもパソコン推奨です。
Q. 間違えてもうまく動かないけど大丈夫？
→ HTMLは「書いた通りに動く」ので、タグのスペルや順番を間違えないように気をつけましょう。少しずつ慣れていけばOKです！
Q. 画像や色をつけたい！
→ 次回の記事で「CSS（見た目を変える技術）」を紹介予定です。お楽しみに！
まとめ：HTMLで自己紹介ページを作るのは楽しい！
今回はHTMLの基本構造と、自己紹介ページを作る手順をご紹介しました。
- Webページの仕組みがわかる
- 自分のことを表現する楽しさがある
- プログラミングの第一歩になる
ぜひお子さんと一緒に、楽しく取り組んでみてください🌱
次回予告
次回は、「ページをカラフルにしよう！CSSで装飾する方法」を予定しています！
文字の色やサイズ、背景画像など、もっと自由にデザインできるようになります。お楽しみに！
コメント