HTMLで自己紹介ページを作るには、「index.html」というファイルを1つ用意すれば始められます。
この記事では、名前、好きなこと、目標を載せた自己紹介ページを完成させます!
コードをコピーするだけでなく、どこを書き換えると自分のページになるのかも順番に説明します。
この記事でできること
・HTMLファイルを作ってブラウザで表示する
・見出しや文章を使って自己紹介を書く
・コードのどこを変更すればよいか理解する
・CSS付きの自己紹介テンプレートへ進む
HTMLってなに？
HTMLとは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略。
Webページをつくるための基本的な言語です。
- テキストを表示する
- 画像を貼る
- ボタンやリンクをつける
…など、Webサイトの「土台」を作るのがHTMLの役割です。
💡 現役ゲームエンジニアの裏話
「ゲームを作りたいのに、なんで最初はHTMLなの？」と思うかもしれません。
実は、私たちプロのエンジニアが毎日見ている「ゲームの裏側のシステム（ユーザー管理画面や、イベントの設定画面など）」も、基本はこのHTMLで作られているんです。
つまり、HTMLは単なるWebサイト作りだけでなく、すべてのWebアプリ・ゲーム開発の「共通の土台」。
ここを一度触っておくと、あとで学ぶJavaScriptやPHPの理解度が圧倒的に変わってきますよ！
カラカラ「ユーザーに補填を行う画面」や「メンテナスを入れる画面」など、
ゲームの運用で必要な操作を簡単にできるようにHTMLを使用して作ったりしてます🦾
ステップ①：必要なものを準備しよう
● パソコン（Windows／MacどちらでもOK）
スマホやタブレットでは編集が難しいため、パソコンを使いましょう。
● テキストエディター（メモ帳でもOK）
HTMLを書くには、文字を編集できるソフトを使います。
この記事では、無料で使えるVisual Studio Codeをおすすめします。
WindowsとMacの両方に対応しており、入力ミスに気づきやすい色分け表示や、自動補完機能があります。
まだインストールしていない場合は、公式サイトからダウンロードしてください。
インストールせずに試すだけなら、Windowsのメモ帳やMacのテキストエディットでも作成できます。
ただし、ファイル名が「index.html.txt」にならないよう注意してください。
● Webブラウザ（Chrome / Firefox / Edgeなど）
作ったHTMLファイルを開くと、ブラウザ上で見られます。
カラカラこれからHTMLのタグ（命令のブロック）をいくつか紹介しますが、安心してください。プロのエンジニアも、すべてのタグを暗記しているわけではありません（笑）。
実際の開発現場でも、「あれ、画像を表示するタグのスペルってなんだっけ？」とGoogleで検索しながらコードを書いています。
大切なのは「丸暗記すること」ではなく、「こういうルールで動いているんだな」という仕組みを体感することです！
ステップ②：HTMLファイルを作ろう！
まずは以下の手順でファイルを作成しましょう：
- デスクトップなどに新しいフォルダを作成（例：
myprofile） - 作成したフォルダーの中に「index.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>
<h1>山田太郎の自己紹介</h1>
<p>HTMLとCSSを勉強しています。</p>
<h2>好きなこと</h2>
<ul>
<li>ゲームを作ること</li>
<li>音楽を聴くこと</li>
<li>新しい技術を試すこと</li>
</ul>
<h2>今後の目標</h2>
<p>自分で考えたWebサイトを公開することです。</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を扱うケースが増えてきました。難しいコードは不要で、基本的なタグを知っていれば自由にページを作れます。
自己紹介ページが表示されないときの確認ポイント
ファイル名が「index.html.txt」になっている
Windowsのメモ帳で保存すると、ファイル名の末尾に「.txt」が付くことがあります。
エクスプローラーで「ファイル名拡張子」を表示し、ファイル名が「index.html」になっているか確認してください。
全角の記号を使っている
HTMLタグの「<」「>」や、属性に使う引用符は半角で入力します。
日本語入力のまま記号を入力した場合は、全角になっていないか確認してください。
終了タグが抜けている
「」で始めた文章は「」で閉じます。
開始タグと終了タグがセットになっているか確認してください。
保存後にブラウザを更新していない
コードを変更したらファイルを保存し、ブラウザを再読み込みします。
変更が反映されない場合は、Windowsでは「Ctrl + F5」、Macでは「Command + Shift + R」を試してください。
違うファイルを開いている
編集した「index.html」と、ブラウザで開いているファイルが同じ場所にあるか確認してください。
よくある質問（FAQ）
Q. スマホで作れますか？
→ 一部のアプリでは可能ですが、編集・表示の確認をするためにもパソコン推奨です。
Q. 間違えてもうまく動かないけど大丈夫？
→ HTMLは「書いた通りに動く」ので、タグのスペルや順番を間違えないように気をつけましょう。少しずつ慣れていけばOKです！
Q. 画像や色をつけたい！
→ 次回の記事で「CSS（見た目を変える技術）」を紹介予定です。お楽しみに！
まとめ：HTMLで自己紹介ページを作るのは楽しい！
今回はHTMLの基本構造と、自己紹介ページを作る手順をご紹介しました。
- Webページの仕組みがわかる
- 自分のことを表現する楽しさがある
- プログラミングの第一歩になる
ぜひ楽しく取り組んでみてください🌱
次に読みたい記事
HTMLで自己紹介ページを表示できたら、次はCSSを追加して見た目を整えてみましょう。
背景色、文字の大きさ、余白などを変更すると、同じHTMLでもページの印象が大きく変わります。
完成コードから始めたい方は、CSS付きの自己紹介テンプレートも利用できます。
コメント