- 投稿日：2026/02/15
- 更新日：2026/02/21
〜ゼロからのWeb開発！おみくじアプリを作ろう〜
前回（第1回）では、VS Codeのインストールとフォルダの準備を行いました。開発の「作業場」が整ったところで、いよいよ今回から実際にコードを書いていきます。
🎯 今回のゴール
HTMLファイルを自分で作って、ブラウザに自分の書いた文字を表示させる。 たったこれだけですが、これがWeb開発の記念すべき第一歩になります。
そもそもHTMLって何？
まず最初に、「HTML（エイチティーエムエル）」とは何なのかを簡単に説明しますね。
HTMLは、ブラウザに「こう表示してください」と伝えるための言葉です。
たとえば、「この文字は大きい見出しにしてください」「この文字は普通の文章として表示してください」といった 指示書 のようなものだとイメージしてもらえればOKです。
普段みなさんが見ているWebサイト——たとえばYahoo!やAmazon、YouTubeなども、裏側ではこのHTMLが使われています。
ちなみに、HTMLは正確には「プログラミング言語」ではなく、「マークアップ言語」と呼ばれるものです。プログラミング言語は「計算して」「繰り返して」といった命令ができますが、HTMLは「ここは見出し」「ここは段落」のように 文書の構造を指定する のが役割です。とはいえ、Web開発をするなら絶対に避けて通れない土台中の土台ですので、まずはここからしっかり始めていきましょう。
VS Codeで新しいファイルを作ろう
さっそくHTMLファイルを作っていきましょう。前回作った作業フォルダをVS Codeで開いている状態からスタートです。
手順
1. VS Codeの左側にある「エクスプローラー」パネル（フォルダのアイコン）を見てみてください
2. フォルダ名のあたりにマウスを持っていくと、小さなアイコンがいくつか表示されます
3. その中にある 「新しいファイル」のアイコン（紙に＋マークがついたもの）をクリックしてください
4. ファイル名を入力する欄が出てくるので、index.html と入力してEnterキーを押します
これで index.html というファイルが作成できたはずです。右側のエディタ部分に、空のファイルが開かれていますね。
「index.html」 という名前には、ちょっとした意味があります。Webの世界では、Webサイトの入口（トップページ）のファイル名を index.html にするのが昔からの慣習なのです。今回のおみくじアプリでも、このファイルがアプリの入口になりますので、この名前にしておきましょう。
はじめてのHTMLを書こう
index.html が開かれた状態で、以下のコードをそのまま入力（またはコピペ）してみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのHTML</title> </head> <body> <h1>Hello World!</h1> <p>はじめてのHTMLへようこそ！</p> </body> </html>
入力できたら、Ctrl + S（Macの方は Cmd + S）でファイルを保存してください。
「なんだかそれっぽい！」と感じた方もいるかもしれません。一方で「何がなんだかわからない……」という方もご安心ください。ここから一つずつ説明していきますね。
コードの中身を見てみよう
さきほど書いたコードを、上から順番に確認していきましょう。
<!DOCTYPE html>
<!DOCTYPE html>
これは「このファイルはHTMLで書いています」とブラウザに宣言するための1行です。おまじないのようなものですので、毎回書くもの と覚えておけば問題ありません。
<html lang="ja"> 〜 </html>
<html lang="ja"> ...ここにHTMLの中身が入る...</html>
HTMLの中身全体を囲む 一番外側のタグ です。lang="ja" は「このページは日本語です」という意味で、ブラウザや検索エンジンに言語の情報を伝えています。
<head> 〜 </head>
<head> <meta charset="UTF-8"> <title>はじめてのHTML</title> </head>
ページの設定情報 を書く場所です。ここに書いた内容は、画面には直接表示されません。
・<meta charset="UTF-8"> → 日本語が文字化けしないようにするための設定です
・<title>はじめてのHTML</title> → ブラウザのタブに表示されるタイトルです
<body> 〜 </body>
<body> <h1>Hello World!</h1> <p>はじめてのHTMLへようこそ！</p> </body>
ここが一番大事な部分です。 画面に実際に表示される内容 を書く場所になります。
・<h1>Hello World!</h1> → 大きな見出し です（h1は heading 1、つまり「一番大きい見出し」の意味）
・<p>はじめてのHTMLへようこそ！</p> → 段落（普通の文章） です（pは paragraph、つまり「段落」の意味）
HTMLでは<なにか> と </なにか> でテキストを挟むことで、「この文字はこういう役割ですよ」と指定します。この <なにか> のことを 「タグ」 と呼びます。タグで文字を挟むことを「マークアップする」と言ったりもしますが、今はこの2つのタグだけ覚えておけば十分です。
ブラウザで表示してみよう
さあ、ここが今日のハイライトです。自分で書いたHTMLをブラウザで開いてみましょう。
方法① ファイルをダブルクリック
1. パソコンのエクスプローラー（Macの方はFinder）で、さきほど作った index.html を探します
2. そのファイルを ダブルクリック します
3. ブラウザが開いて、ページが表示されます
方法② ブラウザにドラッグ＆ドロップ
1. ブラウザ（Chrome、Edge、Safariなど）を開きます
2. エクスプローラー（Finder）から index.html をブラウザのウィンドウに ドラッグ＆ドロップ します
3. ページが表示されます
どちらの方法でも構いません。お好みの方法で試してみてください。
画面に「Hello World!」と大きく表示されて、その下に「はじめてのHTMLへようこそ！」と出ていれば成功です。
ブラウザのタブに「はじめてのHTML」と表示されていることも確認してみてください。これはさきほど <title> タグに書いた文字ですね。
ここまでできた方、おめでとうございます。 自分で書いたコードがブラウザに表示される——この瞬間が、Web開発者としての記念すべき第一歩です。
記念すべき上記のような表示、お手元の環境で確認できましたか？✨
🔧 ミニチャレンジ①：自分の名前を表示してみよう
「Hello World!」が表示できたところで、さっそくコードを変更してみましょう。
<h1> タグの中の「Hello World!」を 自分の名前 に変えてみてください。あわせて <p> タグの中の文章も、自分の好きなメッセージに変えてみましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>自己紹介ページ</title> </head> <body> <h1>ふく太郎のページ</h1> <p>プログラミング学習はじめました！よろしくお願いします！</p> </body> </html>
もちろん「ふく太郎」の部分はご自身の名前（ハンドルネームでもOKです）に変えてくださいね。
変更したら Ctrl + S（Cmd + S）で保存 → ブラウザを更新（F5キーまたはCtrl + R） して、表示が変わることを確認してみてください。
自分の名前が画面に大きく表示されると、ちょっと嬉しいものです。その感覚を大事にしてください。
ご自身の名前が表示されていますか？確認してみてくださいね！
🔧 ミニチャレンジ②：行を増やしてみよう
もう少し触ってみましょう。 <body> の中に <p> タグをいくつか追加して、文章を増やしてみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>自己紹介ページ</title> </head> <body> <h1>ふく太郎のページ</h1> <p>プログラミング学習はじめました！</p> <p>趣味は映画鑑賞とゲームです。</p> <p>目標：おみくじアプリを完成させること！</p> </body> </html>
<p> タグを増やすと、その分だけ段落が増えていきますね。HTMLは、こうして タグを並べて画面の中身を組み立てていく ものです。レゴブロックを積み上げていく感覚に近いかもしれません。
ここまでできた方は、もう立派に「HTMLを書ける人」です。素晴らしいですね。
うまく表示されないときは？
もし画面に何も表示されない、文字化けするなどのトラブルがあった場合は、以下を確認してみてください。
文字が何も表示されない場合 → <body> と </body> の間に文字を書いているか確認してください。<head> の中に書いても画面には表示されません。
日本語が文字化けする場合 → <meta charset="UTF-8"> が <head> の中に入っているか確認してください。
タグが文字としてそのまま表示される場合 → ファイルの拡張子が .html になっているか確認してください。.txt になっていると、HTMLとして読み込まれません。
保存したのにブラウザの表示が変わらない場合 → ブラウザでページを更新（F5キー）してみてください。ブラウザは自動では更新されませんので、コードを変更したら毎回更新が必要です。
今回のまとめ
今回やったことを振り返ってみましょう。
HTMLとは： ブラウザに「こう表示してください」と伝えるための言葉です。Webサイトの土台となるものです。
HTMLファイルの基本構造： <!DOCTYPE html> で始まり、<html> の中に <head>（設定情報）と <body>（画面に表示される内容）があります。
今回使ったタグ： <h1> は大きな見出し、<p> は段落（普通の文章）です。タグで文字を挟んで、文字の役割を指定します。
ブラウザで確認する方法： HTMLファイルをダブルクリック、またはブラウザにドラッグ＆ドロップします。コードを変更したら、保存 → ブラウザ更新で反映されます。
自分で書いたコードがブラウザに表示される——この体験ができたことが、今回の一番大きな収穫です。「書いたものが動く」という感覚を、ぜひ覚えておいてください。これからもっと楽しくなっていきます。
次回予告
次回（第3回）では、いよいよ CSS に挑戦します。
今回作ったHTMLページは、まだ白い背景に黒い文字だけのシンプルな見た目ですよね。CSSを使うと、文字の色を変えたり、背景色を付けたり、文字の大きさを変えたりできるようになります。
今回作った index.html をベースに、見た目をガラッと変える体験をしていきましょう。お楽しみに。
📝 第2回おわり｜第3回「CSSで見た目を整えよう」につづく
