2026年4月25日
はじめに
「HTMLでWebページを作ってみたい！」と思ったことはありませんか？HTML（エイチティーエムエル）は、ウェブページの内容と構造を作るための言語です。この記事では、たった5分で初めてのWebページを作る方法をステップごとに解説します。
プログラミングが初めてでも大丈夫。必要なのはパソコンとブラウザだけです。一緒にやってみましょう！
ステップ1：VS Codeを起動してフォルダを開く
まず、コードを書くためのエディタ（編集ソフト）を用意します。おすすめは VS Code（ブイエスコード） です。無料でダウンロードできます。
- VS Codeを起動する
- 画面上部の「ファイル」メニューをクリック
- 「フォルダーを開く...」を選ぶ
- デスクトップに
my-first-pageという新しいフォルダを作って選ぶ
VS Codeの左側に、開いたフォルダの名前が表示されれば成功です。
📖 詳しくはVS Codeのインストール方法で解説しています。
ステップ2：HTMLファイルを作成する
次に、HTMLファイルを作ります。
- VS Codeの左側（エクスプローラー）で「新しいファイル」アイコンをクリック
- ファイル名を
index.htmlと入力してEnter
ポイント：ファイル名は必ず .html で終わるようにしましょう。これがHTMLファイルの目印です。
ステップ3：HTMLの基本構造を書く
作成した index.html に、以下のコードを書きましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは私がはじめて作ったWebページです。</p>
<p>HTMLって楽しい！</p>
</body>
</html>それぞれのタグ（タグ＝HTMLの命令）の意味を説明します。
<!DOCTYPE html>— 「これはHTML5のページです」とブラウザに伝える宣言<html lang="ja">— ページ全体を囲むタグ。lang="ja"は日本語のページという意味<head>— ページの設定情報を書く場所（画面には表示されない）<meta charset="UTF-8">— 日本語が文字化けしないようにする設定<title>— ブラウザのタブに表示されるタイトル<body>— 画面に表示したい内容を書く場所<h1>— 一番大きな見出し<p>— 段落（文章のまとまり）
👉 HTMLタグ一覧【よく使う20選】も参考にしてください。
ステップ4：ブラウザで確認する
コードを書いたら、Ctrl+S（Macは Cmd+S）で保存します。
保存したら、index.html ファイルをダブルクリックしてブラウザで開きましょう。「こんにちは！」という見出しと文章が表示されれば成功です！
.html で保存されているか確認しましょう。また、タグの閉じ忘れ（</h1> など）がないかチェックしてみてください。
🔗 あわせてHTMLとは？初心者向け解説もチェックしてみましょう。
アレンジしてみよう
基本のページができたら、自分なりにアレンジしてみましょう。
<h1>の中身を自分の名前に変えてみる<p>を増やして自己紹介を書いてみる<h2>で小見出しを追加してみる
変更したら保存して、ブラウザを更新（F5キー）すると反映されます。
💡 HTML問題ドリルで基礎を確認できます。
最初のページを作ったあとにやってみよう
最初のページが表示できたら、少しずつ内容を増やしてみましょう。以下のステップで進めると、無理なくスキルアップできます。
ステップ1：自己紹介を充実させる
名前だけでなく、好きなもの、趣味、将来の夢などを追加しましょう。段落タグ（p）を使って、文章を区切ると読みやすくなります。箇条書きにしたいときはul・liタグを使います。
ステップ2：見出しで構造を作る
h1タグで大きなタイトルを書いたら、h2タグで「好きなもの」「趣味」などの小見出しをつけましょう。見出しがあると、ページの内容が一目でわかるようになります。
ステップ3：リンクを追加する
aタグを使って、好きなサイトへのリンクを貼ってみましょう。href属性にURLを書くだけです。「お気に入りのサイト」というセクションを作ると、自己紹介ページらしくなります。
ステップ4：画像を入れる
imgタグを使えば、写真やイラストを表示できます。自分で描いた絵や、撮った写真を載せてみましょう。src属性に画像ファイルのパスを書きます。alt属性には画像の説明を忘れずに書いてください。
ステップ5：2ページ目を作る
index.htmlとは別に、もう1つHTMLファイルを作ってみましょう。たとえばhobby.htmlという名前で趣味のページを作り、index.htmlからリンクで飛べるようにします。これで「複数ページのサイト」が完成です。
一度に全部やる必要はありません。1日1ステップずつ進めれば、1週間で立派な自己紹介サイトが完成します。うまくいかないときは、保存を忘れていないか、タグの閉じ忘れがないかを確認してみてください。
まとめ
- ✅ VS Codeでフォルダを開き、
index.htmlを作成する - ✅ HTMLの基本構造（DOCTYPE・html・head・body）を書く
- ✅
<h1>と<p>で見出しと段落を作る - ✅ 保存してブラウザで表示を確認する
初めてのWebページが完成しました！次はレッスンでもっとたくさんのタグを学んでみましょう。
あわせて読みたい記事
- HTMLとは？初心者向け解説 — HTML全体の学習ロードマップ
- VS Codeのインストール方法 — VS Codeのインストール
- HTMLの見出しタグの使い方 — 見出しタグの使い方
- HTMLリンクの作り方 — リンクの貼り方
- HTMLで画像を表示する方法 — 画像の表示方法
- CSSでWebページにスタイルを付ける方法 — CSSで見た目を変える