はじめてのプログラミング体験｜HTMLで「こんにちは」を表示する超入門ガイド

HTML入門
2025.09.23

こんにちは！

駆け出しエンジニアのまるです👓🦍

前回は「VSCodeのインストール方法」について紹介しました。

そして今回は、いよいよ、あなたの人生で”初めてのコード”を書くステップに進みます。

さらに、この記事は完全初心者向けに優しく構成しているので、安心して読み進めてください。

この通りに進めるだけで、自然と「コードを書いて動かす」体験ができます。

今回のゴール

まず、今回やることは次の3つです👇️

  1. VSCodeで新しいファイルを作る
  2. HTMLで「こんにちは」と表示するコードを書く
  3. ブラウザで表示して動作確認する

つまり、これができればあなたも今日からプログラマーの仲間入りです✨️

1.　新しいファイルを作ってみよう

最初のステップとして、VSCodeを開きます。

▶手順

  1. VSCodeを起動する
  2. 左上の「新しいファイル」をクリック
  3. 「hello.html」という名前で保存する

拡張子(html.)がつくと、これは”Webページのファイル”として扱われます。

これだけで、あなたはすでにプログラマーの準備万端！

2.　HTMLで「こんにちは」を表示してみよう！

続いて、保存したhello.htmlに、次のコードを書き写してみましょう👇️

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>はじめてのコード</title>
</head>
<body>
  <p>こんにちは！これがはじめてのコードです。</p>
</body>
</html>

え、いきなり難しい…？

しかし、心配はいりません。
最初は意味がわからなくて当たり前！

まずは”書いて動かす”これだけでOKです。
プログラミングは、先に動かしてから少しずつ理解して行くほうが挫折しません。

3.　実行してみよう

さっき保存したhello.htmlをダブルクリックして開いてみましょう。
するとブラウザ（Chrome,Edgeなど）が開きます。

その結果、画面に以下の表示がされれば成功です👇️

もし表示されたら、あなたの書いたコードが正しく動いた証拠です！
まさにプログラミング最初の成功体験ですね🎉🎉🎉

最初の一歩って、とても大切なんだよね！
たった数行でも、自分のコードが画面に出るとワクワクしてくるよ✨️

今日できるようになったことを整理しよう

ここまでで、あなたは次のスキルを身に着けました。

できること説明
HTMLファイルを作れたWebページの最も基本的な形
コードを書く経験ができた文字が命令として働くことを体験
ブラウザで実行できた結果を確認するところまで到達

さらに、これはプログラミング学習の中で最も大きな壁を突破した状態です。
多くの人が”最初のコードを書いて動かす前”に挫折します。
しかし、あなたはここまで来ました。自身を持ってください✨️

次回予告：どのプログラミング言語を選べばいいの？

次回は、いよいよ「プログラミング言語の選び方」を解説します。

たとえば👇️

  • JavaScript
  • Python
  • PHP
  • Java

など、代表的な言語が「何に向いているのか？」「どんな違いがあるのか？」をやさしく説明します。

これを読むと、
どの言語から始めればいいか迷わなくなりますよ！

コメント