レッスン1：はじめてのHTML——エディタを用意して最初のページを開く

このレッスンで学ぶこと

HTMLとは何かを説明できる
Visual Studio Codeをインストールして使い始められる
フォルダとindex.htmlファイルを作成し、ブラウザで開ける
HTMLファイルの基本構造（DOCTYPE・html・head・body）を理解する

HTMLとは何か

私たちが普段見ているWebページは、ほとんどすべてHTMLで書かれています。HTMLはHyperText Markup Languageの略で、日本語では「ハイパーテキスト・マークアップ言語」と呼ばれます。

「マークアップ」は、文章のひとつひとつに「これは見出し」「これは段落」「これはリンク」と意味の印を付ける作業のことです。HTMLは、文章にこの印を付けてブラウザに伝えるための言語です。プログラミング言語と呼ばれることもありますが、計算や処理を書く言語ではなく、文章の構造を表現する言語です。

💡 ポイント HTMLは「Webページの骨格」を作る言語です。装飾を付けるのは別の言語であるCSS、動きを付けるのはJavaScriptです。本コースではHTMLとCSSの2つに集中して学びます。

このコースの実習スタイル

本コースは、ひと通りの説明を読んだあと、必ず手を動かしてコードを書く実習形式で進めます。自分のパソコンの中にフォルダを作り、ファイルを保存し、ブラウザで開く——この実際のWeb制作と同じ手順を、最初から体験してもらう構成です。

ファイルを保存する習慣、フォルダを整理する感覚、保存して再読み込みするリズムは、Webページを作るうえで欠かせない基礎です。最初は少し面倒に感じても、一度身につくと一生の財産になります。

🔰 初学者の方へ このコースは、Windows・macOSのいずれでも問題なく進められます。一部の操作（ファイル保存のショートカットなど）はOSによって異なりますが、その都度補足します。スマートフォンやタブレットでの実習は想定していません。パソコンを用意してください。

ステップ1：Visual Studio Codeを用意する

HTMLを書くためには、文字を入力できる「テキストエディタ」が必要です。本コースではMicrosoftが無料で配布している「Visual Studio Code」、略してVSCodeを使います。世界中のWeb制作者が使っている定番のエディタで、無料で日本語にも対応しています。

公式サイトからダウンロードしてインストールしてください。

公式サイト：https://code.visualstudio.com/

画面中央の「Download」ボタンを押すと、自分のOSに合ったインストーラーが自動で選ばれます。Windowsであれば.exeファイル、macOSであれば.zipファイルがダウンロードされます。

ダウンロードが終わったら、ファイルをダブルクリックして案内に従ってインストールしてください。Windowsの場合は、インストール途中で表示される選択肢のうち「PATHに追加する」「右クリックメニューに追加する」のチェックは、すべて入れたままで進めて構いません。

📝 補足 Macをお使いの場合、ダウンロードした.zipファイルをダブルクリックして展開し、出てきた「Visual Studio Code」のアイコンをアプリケーションフォルダにドラッグ＆ドロップして移動するだけでインストール完了です。

日本語化（任意）

VSCodeを最初に起動すると、画面は英語で表示されます。日本語にしたい場合は、左側のサイドバーにある四角が4つ並んだアイコン（拡張機能）をクリックし、検索欄に「Japanese」と入力します。一覧の先頭に表示される「Japanese Language Pack for Visual Studio Code」をインストールしてください。インストール後、画面右下に表示される「Restart」ボタンを押すと、日本語表示に切り替わります。

ステップ2：作業フォルダを作る

これからのレッスンで、Webページのファイルを保存していくフォルダを用意します。場所はどこでも構いませんが、自分がわかりやすい場所に作りましょう。例えばWindowsならドキュメントフォルダの中、Macなら書類フォルダの中などがわかりやすいです。

フォルダ名は半角英数字にします。日本語名のフォルダでも一応動きますが、Web制作では半角英数字が安全です。今回は my-website という名前にします。

「my-website」フォルダを作ったら、VSCodeを起動し、メニューから「ファイル」→「フォルダーを開く」（またはmacOSなら「ファイル」→「フォルダを開く」）を選び、いま作った my-website フォルダを選択して開きます。

⚠️ 注意 フォルダ名やファイル名にスペースや日本語を使うと、後でリンクの設定などでつまずく原因になります。「my-website」「practice」「mypage」のように、半角英数字とハイフンだけで命名する習慣をつけましょう。

ステップ3：index.htmlファイルを作る

VSCodeで my-website フォルダを開いた状態で、左サイドバーのフォルダ名にカーソルを合わせると小さなアイコンがいくつか表示されます。一番左の「新しいファイル」アイコン（紙のようなマーク）をクリックします。

ファイル名を入力する欄が現れるので、index.html と入力してEnterキーを押します。これで空のHTMLファイルが作成されました。

💡 ポイント Webサイトのトップページのファイル名は index.html にするのが慣例です。ブラウザにフォルダを指定してアクセスすると、自動で index.html が読み込まれます。覚えておきましょう。

ステップ4：HTMLの基本構造を書く

index.html を開いて、以下のコードをそのまま入力してください。コピー＆ペーストでも構いませんが、入力する手の感覚も大事なので、最初は少しずつでも自分でタイプしてみることをおすすめします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
</head>
<body>
  <h1>こんにちは、Webの世界！</h1>
  <p>これは私の最初のWebページです。</p>
</body>
</html>

入力したら、必ず保存してください。Windowsなら Ctrl + S、macOSなら Command + S で保存できます。タブの右上に丸印（●）が付いていなければ保存されています。

各部分の意味

書いたコードを順に見ていきましょう。

<!DOCTYPE html> は、このファイルがHTMLであることをブラウザに伝える宣言です。すべてのHTMLファイルの先頭に書きます。

<html lang="ja"> から </html> までが、HTMLファイル全体を囲むタグです。lang="ja" は「このページは日本語で書かれている」という意味で、ブラウザや検索エンジン、読み上げソフトに言語を伝えます。

<head> から </head> までは、ページの「メタ情報」を記述する場所です。文字の文字コード（<meta charset="UTF-8">）や、ブラウザのタブに表示されるタイトル（<title>）などを書きます。ここに書いた内容は、ページ本文には表示されません。

<body> から </body> までが、ブラウザの画面に実際に表示されるページ本文です。<h1> は大見出しを表すタグ、<p> は段落を表すタグです。これらは次のレッスンで詳しく学びます。

📝 補足 タグは原則として、開始タグ <タグ名> と終了タグ </タグ名> でペアになっています。ペアの間に書いた内容が、そのタグの効果を受けます。タグを開いたら閉じる、というのが基本のルールです。

ステップ5：ブラウザで開いて確認する

保存した index.html を、ブラウザで開いてみましょう。表示されるかどうかが、Web制作の最初のチェックポイントです。

開き方は簡単です。my-website フォルダをエクスプローラー（Windows）またはFinder（macOS）で開き、index.html ファイルをダブルクリックしてください。お使いのパソコンの標準ブラウザ（Edge、Chrome、Safariなど）が起動して、ページが表示されます。

画面に「こんにちは、Webの世界！」という大きな文字と、その下に「これは私の最初のWebページです。」という文字が表示されたら成功です。ブラウザのタブには「はじめてのページ」と表示されているはずです。

💡 ポイント ファイルパスを示すアドレスバーには file:///～ から始まるパスが表示されます。これは「このパソコンの中のファイルを直接開いている」状態です。インターネットに公開しているわけではないので、自分以外の人には見えません。安心して試行錯誤できます。

編集→保存→再読み込みのサイクル

Web制作の作業は、次の3ステップを繰り返すのが基本です。

VSCodeでコードを編集する
ファイルを保存する（Ctrl + S または Command + S）
ブラウザで再読み込みする（F5 または Command + R）

このサイクルを「保存して再読み込み」と呼びます。リズムをつかむと、書いて確認、書いて確認、と気持ちよく作業が進みます。

試しに、<h1> の中身を別の文章に変えて保存し、ブラウザを再読み込みしてみてください。表示が変わるはずです。これで、最初の編集サイクルを体験したことになります。

⚠️ 注意 編集してもブラウザの表示が変わらない場合、ほとんどの原因は「保存し忘れ」か「再読み込みし忘れ」のどちらかです。ファイル名のタブに丸印（●）が付いていたら未保存のサインです。

まとめ

このレッスンでは、以下のことを学びました。

HTMLは、文章にマークアップ（意味の印）を付ける言語である
Visual Studio Code（VSCode）はWeb制作の定番のテキストエディタである
フォルダとindex.htmlを作って、ブラウザで開くのがWebページ表示の基本手順である
HTMLファイルは、DOCTYPE宣言・html要素・head要素・body要素で構成される
編集→保存→再読み込みの3ステップが、Web制作作業の基本リズムである

次のレッスンでは、HTMLの基本タグをひと通り学び、自己紹介ページに見出し・段落・リスト・リンク・画像を配置する実習を行います。HTMLの「文章を整理する力」を身につけましょう。

確認クイズ

このレッスンの理解度をチェックしましょう。