はじめに (対象読者・この記事でわかること)

この記事は、プログラミング初心者や「Webサイトを自分で作ってみたい」と思っている方を対象にしています。HTML・CSS・JavaScriptの基本的な概念と、実際にローカル環境で「Hello, World!」と表示できるシンプルなウェブページを作成する手順が理解できるようになることを目的としています。
背景として、昨今のノーコードブームの中でも、コードを書いて動かす経験は基礎的な技術力の土台になるため、最小限の環境構築と実装方法をまとめました。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。
- 基本的なコンピュータ操作（ファイルの作成・保存ができる）
- 任意のテキストエディタ（VSCode、Sublime Text など）を使えること

Webプログラミング入門の概要と背景

インターネット上の情報はすべて「HTML（構造）」「CSS（デザイン）」「JavaScript（振る舞い）」という3つの技術で構成されています。
- HTML はページの骨組みを記述し、見出しや段落、リンクなどの要素を定義します。
- CSS はその骨組みに対して色・レイアウト・フォントといった見た目を付与します。
- JavaScript はページに対してユーザーの操作に応じた動的な振る舞いを加えるためのプログラミング言語です。

なぜこの3つを学ぶべきかというと、Web開発の全体像を把握できるだけでなく、フロントエンドだけでなくバックエンドやフルスタックへのステップアップにも必須の基礎となるからです。本記事では、これらを「手を動かしながら」学ぶための最小構成環境と具体的な実装手順を示します。

実践：ローカル環境で作るシンプルなWebページ

以下のステップで、ローカルマシンにだけ存在する「Hello, World!」ページを作ります。ブラウザさえあればすぐに確認できるので、セットアップのハードルは極めて低いです。

ステップ1　作業ディレクトリとファイルの準備

  1. 任意の場所に作業フォルダを作成します（例: my-first-web）。
    bash mkdir my-first-web cd my-first-web
  2. フォルダ内に3つのファイルを作成します。
    - index.html（HTML の入口）
    - style.css（ページの見た目）
    - script.js（インタラクティブな振る舞い）

テキストエディタで以下の内容をそれぞれ貼り付けて保存してください。

index.html ```html

My First Web Page

Hello, World!

```

style.css ```css body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f0f8ff; text-align: center; margin-top: 100px; }

h1 { color: #333; }

button { padding: 10px 20px; font-size: 16px; cursor: pointer; } ```

script.js javascript document.getElementById('changeBtn').addEventListener('click', function() { const greetings = ['こんにちは！', 'Bonjour!', '¡Hola!', '안녕하세요!']; const random = greetings[Math.floor(Math.random() * greetings.length)]; document.getElementById('greeting').textContent = random; });

ステップ2　ブラウザで確認

保存が完了したら、エクスプローラー（または Finder）で index.html をダブルクリックします。デフォルトのブラウザが起動し、以下のように表示されます。

  • 大きく表示された「Hello, World!」という見出し
  • 「文字を変える」ボタン

ボタンをクリックすると、JavaScript が実行され、見出しのテキストが日本語・フランス語・スペイン語・韓国語のいずれかにランダムで置き換わります。

ハマった点やエラー解決

発生した問題 原因 解決策
style.css が適用されない link タグの href が相対パスで誤っていた href="style.css" と正しいファイル名を記入
ボタンをクリックしても変化しない script.js が正しく読み込まれていない index.html の <script src="script.js"></script> が head ではなく body の末尾にあるか確認し、パスを正しく設定
文字化け（日本語が ???） HTML の文字エンコードが UTF-8 でない <meta charset="UTF-8"> を <head> 内に必ず記載
ブラウザがキャッシュして古いスクリプトを表示 開発中にファイルを更新しても反映されない Ctrl + Shift + R（ハードリロード）でキャッシュをクリア

さらに発展させるアイディア

  • レスポンシブ対応：@media クエリを使ってスマホでも見やすいデザインに。
  • 外部ライブラリ導入：Bootstrap や Tailwind CSS を組み込み、レイアウトを簡単に整える。
  • サーバーにデプロイ：GitHub Pages や Netlify で無料公開し、URL 共有が可能に。

まとめ

本記事では、HTML・CSS・JavaScript の基本構造を理解し、ローカル環境でシンプルなインタラクティブページを作成する手順 を紹介しました。

  • HTML でページの骨組みを定義し、CSS で見た目を整え、JavaScript で動的な振る舞いを実装したこと。
  • ローカル環境だけで完結できる最小構成（3 ファイル）で、ブラウザで即時確認できる点。
  • ハマりやすいポイント（ファイルパス、文字コード、キャッシュ）とその具体的な対処法。

この記事を通して、「コードを書いて自分の手でWebページを動かす」感覚 を体感できたはずです。今後は、フレームワーク（React, Vue 等）やサーバーサイド（Node.js, Python） に挑戦し、より高度な Web アプリケーション開発へとステップアップしていく予定です。

参考資料