前の記事

前の記事
開発環境の準備
【1-2】HTML・CSSを書くための開発環境をととのえよう
2025年12月6日

次の記事

次の記事
初めてのCSS
【1-4】HTMLに色をつけてデザインの一歩目を踏み出そう
2025年12月6日

「 HTML って、どうやって書き始めればいいの？」

「ファイルを作ったあと、どうやって画面に表示するの？」

初めてだと、この”最初の一歩”がとても大きな壁に見えるものです。

でも安心してください。

HTML は、たった1つのファイルを作って1行書くだけで、すぐにブラウザに表示できます。

この記事では、 HTML ファイルの作り方から基本形の書き方、そして” Hello World “を実際に表示するところまでを、実際に動かしながら進めていきます。

難しい知識はまだ必要ありません。

自分の書いた”文字が画面に映る感動”を、まずは一緒に体験しましょう。

それではまず、 HTML ファイルを作ってブラウザで開くところから始めます。

目次 [ open ]

HTMLファイルを作ってブラウザで開いてみよう

HTML を始めるうえで最初にやることは、” HTML ファイルを作る → ブラウザで開く”という超シンプルな流れです。

まだ何も書かれていなくてもOK。

まずは”ファイルを作って開く”という体験をしてみましょう。

HTMLファイルって何？

HTML ファイルは、中に文字が書かれているだけの ただのテキストファイル です。

普通のメモ帳と違うのは、名前の最後に” .html “が付いていることだけ。

  • index.html
  • test.html
  • profile.html

この” .html “がついているファイルは、ブラウザ（ Chrome や Edge ）が特別に扱って Web ページとして表示してくれます。

index.html を作ってみよう

ここでは、作業フォルダの中に index.html を作ります。

（前の記事で作ったフォルダをそのまま使う想定です）

  1. デスクトップで右クリック
  2. “新規作成” → “フォルダー”
  3. 名前を html-css など、わかりやすいものにする
  4. VS Code を開く
  5. 左側にあるファイルのアイコンを押す
  6. “フォルダーを開く”を押す
  7. “このフォルダー内のファイルの信頼しますか？”と聞かれるので”はい、作成者を信頼します”を押す
  8. フォルダーが開ける
  9. 左側のフォルダ名の右にある”新しいファイル”アイコンをクリック
  10. ファイル名を index.html と入力して Enter

とりあえずブラウザで開いてみる

今はまだ何も書かれていなくてもOK。

HTML ファイルは” .html “さえついていれば開けるので、ブラウザで表示させてみましょう。

  1. VS Code で index.html を開く
  2. 右下にある “ Go Live ” をクリック
  3. ブラウザが自動で立ち上がり、HTMLが表示される

白い画面が表示されれば成功です！

中身が空なら、白い画面が出るのが正しい状態です。

うまく開けないときのチェックポイント

初心者がよくつまずくポイントを先にまとめておきます

  • ファイル名が” index.html.txt “になっている
    • .txt が付いていると HTML として扱われません
      • 対処：拡張子の表示を ON にして” .html “に修正
  • 全角の” ．html “になっている
    • 見た目は同じでもブラウザは HTML と認識できません
  • 保存しないまま開こうとしている
    • まずは保存（ Ctrl + S ）

どれも初心者あるあるですが、落ち着いて確認すれば大丈夫です。

ここまでのまとめ

  • HTML ファイルは” .html “がついた普通のテキストファイル
  • VS Code で index.html を作れば準備完了
  • ブラウザで開くと白い画面が表示される（正しい動作）
  • ファイル名のミスに注意（ .html が大事）

HTMLファイルの基本形

HTML ファイルを作ったら、まず最初に“おまじないのような決まった形”を書きます。

初めて見ると「なんだこれ？」と思うかもしれませんが、これは HTML ファイルを正しく表示させるためのカタチです。

むずかしいことは考えず、まずは「こういう形なんだな」と覚えてもらえばOKです。

なぜ基本形が必要なの？

ブラウザが HTML ファイルを読むときに、

  • これは HTML ですよ
  • 日本語を使いますよ
  • タイトルはこれですよ

という最低限の情報が必要なんです。

そのために最初に”決まった型”を置きます。

最小構成のHTMLを書いてみよう

VS Code の index.html を開いて、次のコードをそのまま入れてみてください

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML</title>
</head>
<body>

</body>
</html>
HTML

このコードで何をしているの？

初めて見ると「うわっ難しそう！」と思うかもしれませんが、1つずつ見ると実はとてもシンプルです。

  • <!DOCTYPE html>
    • 「これから HTML を書くよ！」という宣言
  • <html lang="ja">
    • HTML 全体を包むタグ。” ja “は日本語の意味
  • <head>
    • 画面に表示されない設定を書く場所
  • <meta charset="UTF-8">
    • 文字が文字化けしないための設定
  • <title>
    • ブラウザのタブに表示される名前
  • <body>
    • 画面に見える内容をここに書く！

実際に手を動かしておくと、この後の学習がスムーズになります。

保存してブラウザを確認してみよう

  1. VS Code で Ctrl + S （保存）
  2. 右下の Go Live かブラウザを更新

見た目はまだまっ白ですが、タブの名前が“はじめての HTML “になっていれば成功です！

ここまでのまとめ

  • HTML には”最初に書く決まった形”がある
  • むずかしい意味を全部覚える必要はない
  • <body> が”画面に出る場所”として重要
  • 保存 → ブラウザ更新で反映される

<html><head><body>ってなに？

HTMLを書き始めると、必ず出てくるのが<html>、<head>、<body>の3つのタグ。

最初は意味がわからず「とりあえず書いてるだけ…」という状態になりがちですが、実はそれぞれはっきりと役割が分かれた大事な”場所”なんです。

ここでざっくりとイメージをつかんでおきましょう。

HTML 全体を包む”<html>”

<html> は、“ここからここまでがHTMLファイルですよ”という全体の枠です。

家の図でいうと、“家そのものを包む外枠”のイメージ。

  • HTMLは、この<html>の中に全部書く
  • ファイルの始まりと終わりを明確にする役割

例

<html>
  <!-- ここに全てを書いていく -->
</html>
HTML

設定を書く場所”<head>”

<head> は、画面には表示されない裏側の設定を書く場所です。

  • ページのタイトル
  • 文字コード（UTF-8）
  • CSSファイルの読み込み（このあと出てくる）
  • Googleの検索用の情報など

ユーザーには見えないけれど、ページを正しく表示するうえでとても大事。

例

<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML</title>
</head>
HTML

画面に出る内容を書く”<body>”

<body> は、実際に画面に表示される内容を書く場所です。

あなたが普段見ている

  • 見出し
  • 文章
  • 画像
  • ボタン
  • リスト

などはすべてbody の中に書いて表示されます。

<body>
  ここに表示したい内容を書きます！
</body>
HTML

つまり、この3つは”家の構造”みたいなもの

イメージしやすいようにまとめると

  • <html>
    • 家の外枠（建物そのもの）
  • <head>
    • 設備・設定（見えないところ）
  • <body>
    • 住む空間（見える部分）

このイメージを覚えておくと、今後タグが増えても迷いにくくなります。

ここまでのまとめ

  • <html>はHTML全体の箱
  • <head>は見えない設定を書く場所
  • <body>は画面に表示される内容を書く場所
  • 中身は全部<body>に入る！

この3つの違いがわかれば、もうHTMLの”土台”は理解できています。

最初の1文字を書いてみよう（Hello World!）

HTMLの基本形ができたら、いよいよ自分の書いた文字を画面に出す体験をしてみましょう。

最初に表示する言葉は、Web制作でおなじみの「Hello World!」です。

これは”プログラミングの世界への最初の一歩”という意味もあり、世界中で最初の練習に使われています。

body の中に文字を書いてみよう

前の章で作ったindex.htmlを開いて、<body>タグの中に次のコードを書いてみましょう。

<body>
  Hello World!
</body>
HTML

これだけでOKです。

保存してブラウザを更新しよう

  1. VS Code でCtrl + S（保存）
  2. 右下の Go Liveかブラウザを更新

すると、画面にHello World!の文字が出てきます。

たったこれだけですが、「自分で書いた文字が画面に出た！」というのは、最初の大きな成功体験です。

よくある”出ない…”の原因

もし画面に文字が表示されない場合は、次のポイントを確認してみてください。

  • body の外に書いていない？
    → <body> の中に書かないと表示されません
  • 保存してない？
    → Ctrl + S はクセにしましょう
  • ファイルが index.html ではなく「index.html.txt」になってない？
    → 拡張子を確認
  • 全角の <ｂｏｄｙ> になってない？
    → タグはすべて半角

ここを直すとほぼ解決します。

ここまでのまとめ

  • <body>に書いた文字はそのまま画面に表示される
  • 保存してブラウザを更新すると反映される
  • Hello World!が出れば、大成功！

改行してもブラウザでは変わらない理由

HTMLを書いていると、「コードでは改行しているのに、ブラウザでは1行になってしまう…」という疑問が必ず出てきます。

実はこれ、HTMLの仕組みとして正しい動作なんです。

ここでは、その理由をやさしく説明します。

HTMLは”見た目”より”文章の意味”を大事にする

HTMLの役割は文章の意味を伝えることです。

そのため、HTMLでは

  • スペース
  • 改行
  • タブ

といった”余分な空白”は、1つのスペースとしてまとめて扱われます。

たとえば、次のように書いても…

<body>
  Hello
  World
</body>
HTML

ブラウザでは“Hello World”と1行にまとめられます。

“見た目の改行”はタグで指示する必要がある

HTMLでは、見た目の改行は”命令”が必要です。

その役割を持っているのが<br>タグ。

<body>
  Hello<br>
  World
</body>
HTML

これならブラウザでは

と改行されます。

コードの改行と画面の改行は別物

初心者が混乱しやすいポイントはここ。

  • コードの改行
    • 整理のためのもの（見た目は変わらない）
  • HTMLタグによる改行
    • 画面の見た目を変える

という違いがあります。

つまり、あなたが”どう見せたいか”をタグで指示するのがHTMLのルールなんです。

あとで CSS を学ぶと”見た目の調整”がもっと自由に

改行や余白は、HTMLの<br>だけでなく、あとで学ぶCSSの”margin””padding”でもっと細かくコントロールできるようになります。

今はまだ知らなくてOK！

“HTMLは意味、CSSは見た目”と覚えておけば大丈夫です。

ここまでのまとめ

  • HTMLは空白をまとめる（改行しても見た目は変わらない）
  • 改行したい場合は<br>を使う
  • コードの改行と画面の改行は別のもの
  • 見た目の調整はCSSで自由にできる

よくあるエラーと対処法（保存し忘れ・拡張子ミスなど）

HTMLを書き始めると、ほぼ全員が必ずと言っていいほど直面するのが「あれ？表示されない…」という問題。

でも安心してください。

ほとんどの原因は “よくあるミス”で、すぐ解決できます。

ここでは、初心者が特につまずきやすいポイントだけに絞って説明します。

保存し忘れている（めっちゃ多い）

VS Code で書いても、保存しないとブラウザには反映されません。

Ctrl + Sで保存を忘れずに！

初心者のトラブルの半分はこれで解決します。

ファイル名が”.html”になっていない

とても多いのがこれ

  • index.html.txtになっている
  • index.html.htmlになっている
  • 全角の．htmlになっている

エクスプローラーで見ると一見HTMLぽく見えるので気づきにくいです。

エクスプローラーの”表示”→”ファイル名拡張子”にチェック
.htmlだけになっているか確認

タグが全角になっている

<ｂｏｄｙ>
<!--↑全角なのでブラウザは読めない-->
  Hello<br>
  World
</ｂｏｄｙ>
HTML

一見見分けづらいですが、

  • < と >
  • /
  • タグ名（html、body など）

全部半角で書く必要があります。

VS Codeなら色がつかないので気づきやすいです。

bodyの外に書いてしまっている

<html>
<head></head>
<!--↓body の外なので表示されない-->
Hello World!
<body></body>
</html>
HTML

表示されるのはbody の中だけ。

もしHello Worldが出ない時は、まずbodyの場所を確認しましょう。

フォルダを間違えて開いている

Live Serverがうまく動かないときに多い原因です。

  • VS Code で”ファイル単体”だけ開いている
  • 作業フォルダそのものを開いていない
  • 同名ファイルが別の場所にある

対処法：必ず”フォルダごと”開く

VS Code → ファイル → フォルダーを開く

タグの閉じ忘れ

<p>こんにちは
HTML

閉じタグ</p>を書き忘れると、レイアウトが崩れたり動作が不安定になります。

VS Codeの色分けをよく見ると気づきやすいポイントです。

ここまでのまとめ

  • 保存しないと反映されない
  • 拡張子”.html”が超重要
  • タグは全角NG（すべて半角）
  • 表示する内容は<body></body>の中だけ
  • 同じファイル名が複数あると迷いやすい
  • タグの閉じ忘れに注意

これらを覚えておくだけで、初心者の”表示されない問題”のほとんどが解決できます。

今日できたこと＆次のステップ

ここまで進められたあなたは、もう自分の力でHTMLを書くための”最初の一歩”を完全に踏み出せています。

最初はむずかしそうに見えたHTMLですが、実際にやってみると「意外とシンプルかも？」と思えたはずです。

ここで、今日できたことをいったん整理しておきましょう。

できるようになったこと
  • index.htmlを自分で作れるようになった
  • HTMLの基本形を書けるようになった
  • <html><head><body>の役割がわかった
  • <body>に書いた文字が画面に表示されることを体験できた
  • Hello World!を表示して「書けた！」を実感できた
  • 改行しても表示が変わらない理由を理解できた
  • 初心者がよくつまずくエラーと対処法を知れた

確認問題

HTMLの中で”画面に見える部分”を書く場所はどこ？

  1. <head>
  2. <body>
  3. <html>
答え

答え：2.<body>

“Hello World!”を表示する正しいコードはどれ？

  1. <head>Hello World!</body>
  2. <body>Hello World!</body>
  3. <html>Hello World!</html>
答え

答え：2.<body>Hello World!</body>

自分で1行だけ書いてみよう

あなた自身の言葉で、<body>の中に好きな文字を1行書いてブラウザで表示してみてください。

できたら、それはもうあなた自身が作った”Webページ”です。

答え

例

<body>
  はじめてHTML書けた！
</body>
HTML

次は”初めてのCSS”に進もう

次は、HTMLとセットで使う“はじめてのCSSを触る”に進みます。

ここからは、

  • 文字の色を変える
  • 背景色をつける
  • HTMLとCSSをリンクでつなぐ

など、いよいよ”見た目を整える”世界に入ります。

HTMLが”中身”、CSSが”デザイン”という流れを、ここから実践で理解していきましょう。

前の記事

前の記事
開発環境の準備
【1-2】HTML・CSSを書くための開発環境をととのえよう
2025年12月6日

次の記事

次の記事
初めてのCSS
【1-4】HTMLに色をつけてデザインの一歩目を踏み出そう
2025年12月6日