はじめに
この章では、Windowsのメモ帳を使ってホームページを作る目的と進め方をやさしく説明します。特別なソフトは不要で、基本的なHTMLのしくみを知るだけで、誰でも自分のWebページを作れます。実際に手を動かしながら学べるように、順を追って説明していきます。
この記事の目的
- メモ帳だけでホームページを作る方法を丁寧に示します。
- HTMLの基本を実際のファイル作成を通して理解できるようにします。
対象読者
- ホームページ作成が初めての方。
- 専門ソフトを使わずに学びたい方。
- 自分の情報を簡単に公開したい方。
この連載で学べること
- メモ帳でHTMLファイルを作る方法と保存のコツ。
- 基本的なHTMLタグの使い方（見出し、段落、リストなど）。
- 画像やリンクの追加、ブラウザでの確認方法。
- 作成したページの公開と更新の基礎。
読み進め方のヒント
各章を順に読み、実際に手を動かしてみてください。小さなページを一つ完成させることで、HTMLの全体像が自然に見えてきます。つまずいたら、まずは保存とブラウザでの表示を確認すると問題を見つけやすくなります。
メモ帳でホームページ作成は誰でもできる
誰でもできる理由
特別な有料ソフトや高性能なパソコンは不要です。Windowsに標準搭載されているメモ帳だけで、HTMLの基本を覚えれば簡単なWebページを作れます。プログラミング未経験でも、まずは例をコピーして動かすところから始められます。
まずはコピペで1ページ作成
以下のテンプレートをメモ帳に貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>はじめてのページ</title>
</head>
<body>
<h1>ようこそ</h1>
<p>これはメモ帳で作ったページです。</p>
</body>
</html>
保存するときは「名前を付けて保存」で文字コードをUTF-8、ファイル名を”index.html”にします。ファイルの種類は「すべてのファイル」にして拡張子が.htmlになるようにしてください。
開いて確認する
保存したindex.htmlをダブルクリックすると既定のブラウザで開きます。編集したら保存してブラウザで再読み込み（更新）すると変更が反映されます。手軽に繰り返して学べます。
ポイントと注意
- 文字化けする場合は文字コードをUTF-8にする。
- ファイル名に日本語やスペースを入れるとリンクで不具合が出ることがあるので英数字推奨。
- 初めは見た目より動作確認を優先して、少しずつタグを増やしましょう。
次章では、作業に必要な準備と環境設定を詳しく説明します。
必要な準備と環境
必要な機器
パソコンを用意します。Windowsを推奨しますが、Macでも作成できます。キーボードとマウスがあれば十分です。
テキストエディタ（メモ帳）
Windows標準のメモ帳で始めます。まずはシンプルに作業できます。本格的に作るときや効率化したいときは、Visual Studio CodeやNotepad++など高機能エディタがおすすめです。
ブラウザと開発環境
作ったHTMLはブラウザで表示します。ChromeやEdge、Firefoxなどを用意してください。編集後にファイルをダブルクリックするだけで確認できます。
ファイルと文字コード
ファイル名はindex.htmlなど拡張子を付けます。保存するときは文字コードをUTF-8に設定してください（メモ帳では「名前を付けて保存」→エンコードで選択）。文字化けを防げます。
作業の基本ルール
・作業用フォルダを作り、imagesなどのサブフォルダで整理します。
・こまめに保存やコピーでバックアップします。クラウドに置くと安心です。
これらを整えれば、メモ帳だけでもホームページ作成を始められます。
HTMLホームページ作成の基本手順
はじめに
ここでは、メモ帳を使って初心者でも簡単にホームページを作る手順を順を追って説明します。できるだけ具体的に書きますので、そのまま真似してみてください。
ステップ1：メモ帳を開く
Windowsなら「スタートメニュー → Windowsアクセサリ → メモ帳」で開けます。検索ボックスに「メモ帳」や「Notepad」と入力しても起動できます。
ステップ2：基本的なHTMLコードを書く
まずは最小限のHTMLを書きます。例：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>はじめてのページ</title>
</head>
<body>
<h1>ようこそ</h1>
<p>これはテストページです。</p>
</body>
</html>
上のコードをそのままコピーしてメモ帳に貼れば、簡単に表示できます。
ステップ3：ファイルを保存する
メニューの「ファイル → 名前を付けて保存」を選びます。ファイル名は「index.html」などにして、ファイルの種類を「すべてのファイル」にします。文字コードは「UTF-8」を選ぶと日本語が正しく表示されます。注意点：拡張子が「.txt」にならないようにしてください。
ステップ4：ブラウザで開き表示を確認する
保存したHTMLファイルをダブルクリックするか、ブラウザにドラッグ＆ドロップします。ページが表示されたら、編集して上書き保存し、ブラウザで再読み込み（F5）すれば変更が反映されます。うまく表示されないときは、保存場所や拡張子を確認してください。
ちょっとしたコツ
- ファイルは一つのフォルダにまとめると管理しやすいです。
- ファイル名は半角英数字で短くする（例：mypage.html）。
- 画像やリンクを使うときはフォルダ構成を意識して相対パスで指定します。
これで基本の手順は完了です。慣れれば短時間でページを作れるようになります。
HTMLの基本タグと要素
HTMLの最小単位は「タグ」です。ここではよく使う基本タグと使い方の例をやさしく説明します。
見出し（h1〜h6）
見出しは文章の章立てに使います。h1が最も重要で、h6が小さい見出しです。例えば：
<h1>サイトのタイトル</h1>
<h2>セクションの見出し</h2>
段落（p）
段落は本文のまとまりに使います。改行ではなく
を使って文章を区切ります。
<p>ここに本文を書きます。複数の文をまとめて表示できます。</p>
リンク（a）
クリックできるリンクはタグで作ります。href属性に移動先URLを書きます。
<a href="https://example.com">Exampleサイトへ</a>
新しいタブで開きたいときは target=”_blank” を追加します。
画像（img）
画像はタグで表示します。srcにファイル名、altに代替テキストを書きます。
<img src="photo.jpg" alt="青い海の写真">
altは画像が表示されないときや音声読み上げで重要になります。
注意点
- タグは基本的に開始タグと終了タグが必要です（例外あり）。
- 属性は<属性名>=”値”の形で書きます。パスは相対・絶対のどちらも使えます。
画像やリンクの追加方法（初心者向け）
画像を表示する基本
画像ファイルをHTMLと同じフォルダに置き、タグで表示します。例：
<img src="photo.jpg" alt="花の写真" width="400">
alt属性は説明文で、画像が表示されないときや音声読み上げで役立ちます。widthやheightで表示サイズを指定できますが、元画像の縦横比を崩さないようにします。
画像ファイル形式とパス
一般的な形式はjpg、png、gif、webpです。ファイル名は半角英数字にすると安全です。サブフォルダに入れる場合は相対パスを使います。
<img src="images/photo.png" alt="風景">
リンクの貼り方（外部・内部）
外部サイトへのリンク例：
<a href="https://example.com" target="_blank" rel="noopener">公式サイトを見る</a>
target=”_blank”で別タブで開き、rel=”noopener”で安全性を高めます。内部ページへのリンクはファイル名を指定します。
<a href="about.html">会社案内へ</a>
ページ内リンクはid属性を使います。
<a href="#section1">この項目へ</a>
...
<h2 id="section1">見出し</h2>
よくある間違いと確認点
- ファイル名の大文字小文字やスペースに注意。Webは区別します。
- パスを間違えると画像やリンクが切れます。ブラウザでHTMLを開いて表示を確認してください。
- 画像が重いと表示が遅くなるので、必要ならサイズを小さくします。
これらを試せば、画像やリンクを安全に追加できます。
作成したホームページの更新・公開
ローカルでの更新方法
メモ帳でHTMLファイルを開き、修正して保存します。保存後はブラウザで該当ページを表示し、リロード（F5またはCtrl＋R）して変更を確認してください。画像やリンクを追加した場合は、ファイルの相対パスが正しいかもチェックします。ブラウザの表示が変わらないときは、キャッシュのクリア（Ctrl＋F5）を試してください。
インターネットで公開するために必要なもの
公開には「レンタルサーバー（またはホスティング）」と「ドメイン」が必要です。レンタルサーバーはファイルを置く場所、ドメインはアクセスするための住所です。契約後、サーバーの管理画面でドメインを紐づけます。
アップロードの手順（例）
- サーバーの「public_html」や「www」フォルダを確認します。通常ここにindex.htmlを置きます。
- FTPソフト（例：FileZilla）かサーバーのファイルマネージャーを使ってファイルをアップロードします。SFTPが使える場合はSFTPで送ると安全です。
- アップロード後、ウェブブラウザで自分のドメインにアクセスして確認します。反映に時間がかかる場合はブラウザのキャッシュやDNSの伝播を待ちます。
更新時の注意点と便利な習慣
- 元のファイルは必ずバックアップ（例：index_20230901.htmlのように日付を付ける）を取ります。
- フォルダ構成やファイル名は分かりやすく統一します。相対パスを変えるとリンク切れが起きやすいです。
- 小さな修正は直接サーバー上で上書きできますが、大きな変更はローカルで確認してからアップロードする方が安全です。
上記を守れば、メモ帳で作ったホームページでも安心して更新・公開できます。
よくある質問・注意点
文字化けを防ぐには
HTMLのhead内に必ずを書いてください。これでブラウザが文字コードを正しく解釈します。ファイルはUTF-8で保存すると安心です。
ファイル名と拡張子に注意
作ったファイルを保存する際、拡張子は必ず「.html」にしてください。「.txt」や余計な拡張子が付くとブラウザで正しく表示されません。Windowsでは保存時の設定を確認しましょう。
タグの書き忘れ・閉じ忘れ
タグの開け忘れや閉じ忘れは表示エラーの主な原因です。特にや、の有無を確認してください。エラー時はブラウザの開発者ツールやエディタの警告を活用すると見つかりやすいです。
便利なエディタのおすすめ
メモ帳でも作れますが、入力支援やエラー表示があるエディタ（例：VS Code、Sublime Text）を使うと作業が楽になります。拡張機能でプレビューや自動整形も使えます。
よくある質問（簡潔に）
Q: 文字が化ける→A: とUTF-8保存を確認
Q: ページが白紙→A: タグの閉じ忘れや拡張子を確認
困ったときは一つずつチェックすると原因が見つかります。
まとめ
ホームページ作りを始めるときは、まず「コピペ＋保存＋ブラウザで確認」の3ステップを試してください。メモ帳でHTMLを書いて、ファイル名をexample.htmlのように保存し、ブラウザで開くだけで形になります。
ポイントはタグの意味と構造を押さえることです。<!DOCTYPE>や、、といった枠組みを理解すれば、見出し（
）や段落（
）、リンク（）、画像（）の追加はシンプルです。例を真似しながら手を動かすと覚えやすいです。
ローカルで十分に練習してください。文字コードはUTF-8で保存し、ブラウザの表示や開発者ツールで見え方を確認しましょう。反復することでエラーの原因もつかめます。
公開するにはサーバーとドメインが必要です。まずは無料のサービス（例：GitHub Pagesなど）で試すか、レンタルサーバーを契約してアップロードの流れを覚えてください。公開前にはバックアップと表示確認を必ず行いましょう。
初心者でも、基本を押さえて少しずつ作業を重ねればホームページを作れます。まずは一つのページを完成させることを目標にしてください。
