【6日でできるHTML入門】HTMLと作成手順
ホームページ（Webページ）は、テキストファイルとして記述されたHTML（HyperText Markup Language）によって作られます。ここでは、HTMLファイルを初めて作成するための基本的な流れを説明します。どなたでも使える「テキストエディタ」での編集手順から、ファイルの保存方法、ブラウザでの表示、再編集、そしてインターネット上への公開まで、一連の作業手順を学びましょう。学習の第１歩として、まずはテキストファイルをHTMLとして認識させる方法を身につけることが目標です。
１．HTMLの基礎
1.1. HTMLとは？
HTMLは「HyperText Markup Language」の略称で、見出しや段落、リンクなどをマーク（タグ）で指定し、Webブラウザに文書構造を伝える言語です。テキストエディタで編集できる単なる文字ファイルなので、特別なソフトは不要です。
1.2. HTMLファイルの構造
典型的なHTMLファイルは次のような構成要素で成り立ちます。
| 要素 | 説明 |
|---|---|
<!DOCTYPE html> | HTML5文書であることを宣言 |
<html> | 文書全体を囲むルート要素 |
<head> | メタ情報（文字コード、タイトルなど）を記述 |
<body> | 実際に画面に表示する内容を記述 |
２．HTMLファイルの作成手順
2.1. テキストエディタでの編集
ここでは、手軽にHTMLファイルの作成と編集ができるWindowsの「メモ帳」を例に説明しますが、後でVSCodeとの比較も行います。
「メモ帳」は、スタートメニューから「すべて」→「メモ帳」と選択すると起動できます。
以下のファイル名で作成します。
ファイル名： lesson01.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📚 サンプルページ</title>
</head>
<body>
<h1>ようこそ！</h1>
<p>これはサンプルのHTMLページです。</p>
</body>
</html>2.2. ファイルの保存設定
- ファイルの種類：すべてのファイル
- ファイル名：
lesson01.htmlのように末尾を.htmlにする - 文字コード：UTF-8
2.3. メモ帳とVSCodeの比較
| 比較項目 | メモ帳 | VSCode |
|---|---|---|
| 起動方法 | スタート→アクセサリ→メモ帳 | デスクトップアイコン／コマンド |
| シンタックスハイライト | なし | あり |
| オート補完 | なし | タグ補完、Emmet対応 |
| プロジェクト管理 | 単一ファイル | フォルダ単位で開発可能 |
| デフォルト文字コード | 手動でUTF-8を選択 | 初期設定でUTF-8 |
| 拡張機能 | なし | プラグインで機能拡張が容易 |
３．HTMLファイルをブラウザで表示する
3.1. ダブルクリックで開く
エクスプローラー上で sample.html のアイコンをダブルクリックすると、既定のWebブラウザでページが表示されます。
3.2. 出力結果の確認
表示例（ブラウザ画面）
４．HTMLファイルの再編集
4.1. 「プログラムから開く」の操作
ダブルクリックするとブラウザが起動します。ファイルを右クリック → プログラムから開く → メモ帳（またはVSCode）を選択します。
4.2. テキストエディタでの編集
再びエディタ上でコードを修正し、上書き保存すれば内容が更新されます。
５．ホームページを公開するには
5.1. FTPソフトでのアップロード
HTMLファイルをWWWサーバーに転送するには、FFFTPやFileZillaなどのFTPクライアントを利用します。ホスト名・ID・パスワードを設定し、HTMLファイルをサーバー上の公開フォルダへアップロードしてください。
5.2. サービス利用による公開
最近ではWixやJimdoなどのCMS型サービスを使えば、FTP設定不要でブラウザ上から簡単にページを公開できます。
まとめ
ここでは、HTMLファイルの作成からブラウザ表示、再編集、そしてサーバーへの公開までの基本手順を学びました。次のコンテンツ以降で、タグの使い方や構造化されたマークアップ、CSSを使った見た目の整え方へと進み、よりリッチなWebページを作成できるようになります。