はじめに
「HTMLでホームページを作ってみたいけれど、メモ帳に何を書けばいいの？」
「コードを書いたあと、どうやってブラウザにホームページとして表示するの？」と迷っていませんか。
Windowsのメモ帳を開いても白い画面が表示されるだけなので、最初の1行をどこから書けばよいのか、保存するときに何を設定すればよいのか分かりにくいですよね。
この記事では、メモ帳を使ってHTMLを書く方法から、ファイルとして保存し、ChromeやEdgeなどのブラウザでホームページを表示するまでの手順を紹介します。
HTMLをメモ帳で作ってホームページを表示する方法は？
HTMLのホームページは、専用の作成ソフトがなくてもWindowsのメモ帳を使って作成できます。
ここでは、メモ帳だけでHTMLを作れる理由から、HTMLの入力・保存、ブラウザで表示するまでの手順を順番に説明します。
メモ帳だけでHTMLのホームページを作れる
HTMLは文字で記述するため、Windowsに標準搭載されているメモ帳だけでもホームページを作れます。
専用ソフトを用意する必要はなく、HTMLを入力して「.html」の拡張子で保存すれば、ブラウザで表示できるファイルを作成できます。
メモ帳にHTMLを書いて保存する
メモ帳を開いたら、表示したい文章や見出しなどをHTMLで入力します。
入力後は「名前を付けて保存」を選び、「index.html」のようにファイル名の末尾へ「.html」を付けて保存しましょう。
保存したHTMLをブラウザで開く
保存したHTMLファイルをダブルクリックすると、ChromeやEdgeなどのブラウザで内容を確認できます。
HTMLを修正したときはメモ帳で上書き保存し、ブラウザを再読み込みすると変更した内容が反映されます。
メモ帳でホームページを作る基本的な手順
メモ帳でホームページを作るときは、最初にHTMLの基本構造を書き、その中に見出しや文章などの内容を追加していきます。
ここでは、HTMLの基本構造を書くところからブラウザで表示を確認するところまで、作成の流れに沿って説明します。
HTMLの基本構造を書く
メモ帳を開いたら、最初にHTML文書の基本構造を入力します。
HTMLは「html」「head」「body」などの要素で構成され、ブラウザに表示したい内容は「body」の中に記述します。
見出しや文章を追加する
ホームページに表示する見出しや文章は、「body」の中に追加します。
見出しには「h1」や「h2」、文章には「p」タグを使うと、それぞれに合った形でブラウザに表示されます。
リンクや画像を追加する
リンクを設置するときは「a」タグ、画像を表示するときは「img」タグを使います。
「a」タグには移動先のURL、「img」タグには画像ファイルの場所を指定し、正しく表示されるか確認しましょう。
画像を指定しても表示されない場合は、ファイルの保存場所やパスの書き方を確認してみましょう。
▶HTMLで画像が表示されない原因は？パスの指定方法と対処法を解説
保存してブラウザで表示を確認する
HTMLを書き終えたら、ファイル名の末尾を「.html」にして保存します。
保存したファイルをChromeやEdgeなどで開き、見出しや文章、リンク、画像が正しく表示されているか確認しましょう。
作ったホームページを自分のパソコンだけでなくインターネット上に公開したい場合は、サーバーへのアップロード方法も確認しておくと安心です。
▶Webサイトをサーバーにアップロードする方法は？基本手順と表示されないときの対処法を解説
HTMLファイルを保存するときの注意点
メモ帳にHTMLを書き終えたら、ブラウザで正しく開ける形式でファイルを保存する必要があります。
ここでは、拡張子を「.html」にする方法から、ファイルの種類と文字コードの設定まで順番に説明します。
拡張子を「.html」にして保存する
HTMLを書き終えたら「名前を付けて保存」を開き、ファイル名を「index.html」のように「.html」を付けて保存します。
保存後に「.txt」が付いている場合はHTMLファイルとして扱われないため、拡張子を確認しておきましょう。
ファイルの種類を「すべてのファイル」にする
保存するときは、「ファイルの種類」を「すべてのファイル」に変更します。
「テキスト ドキュメント」のままだと「.txt」が付く場合があるため、「すべてのファイル」を選んでから保存すると安心です。
文字コードをUTF-8で保存する
「名前を付けて保存」の画面では、文字コードに「UTF-8」を選びます。
日本語の文字化けを防ぐためにも、文字コードが「UTF-8」になっていることを確認してから保存しましょう。
メモ帳で作ったホームページが表示されないときの確認ポイント
メモ帳でHTMLを作成しても、保存方法やファイル内の指定に問題があると、ブラウザで正しく表示されないことがあります。
ここでは、表示されない症状ごとに確認するポイントを順番に説明します。
拡張子を「.html」にして保存する
HTMLを書き終えたら「名前を付けて保存」を開き、ファイル名を「index.html」のように「.html」を付けて保存します。
保存後に「.txt」が付いている場合はHTMLファイルとして扱われないため、拡張子を確認しておきましょう。
ファイルの種類を「すべてのファイル」にする
保存するときは、「ファイルの種類」を「すべてのファイル」に変更します。
「テキスト ドキュメント」のままだと「.txt」が付く場合があるため、「すべてのファイル」を選んでから保存すると安心です。
文字コードをUTF-8で保存する
「名前を付けて保存」の画面では、文字コードに「UTF-8」を選びます。
日本語の文字化けを防ぐためにも、文字コードが「UTF-8」になっていることを確認してから保存しましょう。
まとめ
HTMLは、Windowsのメモ帳にコードを書き、ファイル名の末尾を「.html」にして保存すれば、ChromeやEdgeなどのブラウザでホームページとして表示できます。
作成するときは、HTMLの基本構造を書いてから、見出しや文章、リンク、画像を追加し、保存後にブラウザで表示を確認します。
保存時は「すべてのファイル」を選び、文字コードを「UTF-8」にすると、テキストファイルとして保存されたり日本語が文字化けしたりする失敗を防ぎやすくなります。
うまく表示されない場合は、「.txt」が付いていないか、画像やリンクのファイル名と保存場所がHTMLの指定と一致しているかを順番に確認しましょう。
