はじめてのプログラミング体験｜HTMLで「こんにちは」を表示する方法

HTML
2025.09.23

こんにちは！

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

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

今回はいよいよ、実際にコードを書いてみるところから始めます！

今回のゴール

  • コードを書く場所（VSCode）を開く
  • 「はじめてのコード」を書いて実行してみる
  • 画面に「こんにちは」と表示される

これができれば、あなたも立派なプログラマーの第一歩です！

新しいファイルを作ろう

  1. VSCodeを開く
  2. 画面左の「新しいファイル」をクリック
  3. 保存する時に「hello.html」という名前をつける

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

保存した hello.html に、次のコードを書いてみましょう！

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

なんか難しそうにみえるけど、
真似して書けば大丈夫！

実行してみよう

  1. 保存した hello.html をダブルクリック
  2. ブラウザ（Chrome や Edge など）が開く
  3. 下記画像のように「こんにちは！これがはじめてのコードです。」と表示されたら成功！

まとめ

  • コードはただの文字だけど、コンピュータにとっては「命令」
  • ほんの数行書くだけで、ブラウザに表示されるのを体験できる
  • 最初の成功体験が「もっと書いてみたい！」につながる

ほら、できたでしょ！？
これで立派なプログラマーの仲間入りだ！

今回の体験で「文字が画面に表示される！」というプログラミングの第一歩を踏み出せました。

もし、コードの意味がまだわからなくても大丈夫。今回はまずコピペでOKです！

次回以降の記事で、ひとつずつ意味を解説していきますので安心してくださいね。

そして次回は、HTML以外にどんなプログラミング言語があり、それぞれ何ができるのか？をわかりやすく紹介していきます。

「どの言語から始めるべきか」がイメージできるようになりますよ！

コメント