HTMLを書いたものの、「どうすればブラウザに表示できるの？」と迷うことがありますよね。ファイルを保存しただけでは、Webページとして確認する手順が分かりにくいかもしれません。
結論からいうと、index.htmlをダブルクリックするか、ブラウザの「ファイルを開く」から選択すれば表示できます。この記事では、HTMLファイルの作成から表示、修正後の再読み込みまで順番に解説します。
HTMLファイルをブラウザで表示する2つの方法
初心者が試しやすい方法は、次の2つです。どちらもインターネットへ公開する操作ではなく、自分のパソコンに保存したHTMLを確認する方法です。
- ファイル管理アプリから開く：WindowsのエクスプローラーやmacOSのFinderでHTMLファイルを開きます。
- ブラウザからファイルを開く：ChromeやEdgeなどの「ファイルを開く」機能でHTMLを選びます。
まずは表示するHTMLファイルを用意し、そのあとで2つの開き方を試してみましょう。
表示するindex.htmlを作成する
作業用フォルダを1つ作り、その中にindex.htmlというファイルを保存します。Visual Studio Codeなどのコードエディターでファイルを開き、次のコードを記述してください。
完成したHTMLをブラウザで開くと、次のように見出し・文章・リンクが表示されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>このページはHTMLファイルから表示しています。</p>
<a href="https://example.com/">サンプルリンク</a>
</body>
</html><h1>は見出し、<p>は段落、<a>はリンクを表します。ブラウザはこれらのタグを読み取り、それぞれの役割に合った形で画面へ表示します。
ファイル名と保存形式を確認する
保存するときは、ファイル名を正確にindex.htmlとします。index.html.txtやindex.htm.txtになっていると、HTMLとして開けません。
文字コードはUTF-8を選びます。上のコードにも<meta charset="UTF-8">を書いているため、日本語の文字化けを防ぎやすくなります。
方法1：エクスプローラーやFinderから開く
最も簡単なのは、保存したindex.htmlをファイル管理アプリから開く方法です。
- Windowsではエクスプローラー、macOSではFinderを開きます。
index.htmlを保存したフォルダへ移動します。- ファイルをダブルクリックします。
- 既定のブラウザでHTMLが表示されたことを確認します。
別のブラウザで確認したい場合は、ファイルを右クリックします。Windowsでは「プログラムから開く」、macOSでは「このアプリケーションで開く」からChrome、Edge、Firefox、Safariなどを選択してください。
メニュー名や位置はOSのバージョンによって少し異なりますが、「どのアプリでこのファイルを開くか」を選ぶ操作は同じです。
方法2：ブラウザの「ファイルを開く」から選ぶ
すでにブラウザを開いている場合は、キーボードショートカットからHTMLを選べます。
- ChromeやEdgeなどのブラウザを開きます。
- Windowsでは
Ctrl + O、macOSではCommand + Oを押します。 - ファイル選択画面で
index.htmlを選びます。 - 「開く」を選択し、ブラウザ表示を確認します。
ブラウザによっては、HTMLファイルをウィンドウ内へドラッグ＆ドロップして開くこともできます。ただし、最初はダブルクリックか「ファイルを開く」を使うと操作を間違えにくいでしょう。
HTMLを修正したら保存して再読み込みする
HTMLを変更しただけでは、開いているブラウザの表示は自動で変わりません。次の順番で更新します。
- コードエディターでHTMLを修正します。
Ctrl + SまたはCommand + Sで保存します。- ブラウザへ戻り、再読み込みボタンを押します。
表示が変わらないときは、編集しているファイルとブラウザで開いているファイルが同じか確認してください。同名のindex.htmlが複数あると、別のファイルを見てしまうことがあります。
ブラウザとコードエディターの役割
コードエディターはHTMLを書くためのツールで、ブラウザは保存されたHTMLを読み取ってWebページとして表示するツールです。
- コードエディター：HTMLやCSSを記述し、ファイルへ保存します。
- ブラウザ：保存されたファイルを読み取り、見出し・文章・画像などを画面へ表示します。
パソコン内のHTMLを直接開くと、アドレス欄はfile:///...から始まります。これはインターネット上のURLではなく、自分のパソコンにあるファイルを表示している印です。
HTMLがブラウザに表示されないときの確認点
- 白い画面になる：
<body>内に表示する文字があるか、ファイルを保存したか確認します。 - コードがそのまま表示される：ファイル名が
.htmlで終わっているか確認します。 - 日本語が文字化けする：UTF-8で保存し、
meta charsetを記述します。 - 修正が反映されない：保存後にブラウザを再読み込みし、同じファイルを開いているか確認します。
- 画像やCSSだけ表示されない：HTMLから指定したファイルの名前と保存場所が合っているか確認します。
HTMLだけなら直接開いて確認できますが、通信処理や一部のJavaScriptはfile:///では制限される場合があります。その段階になったら、開発用のローカルサーバーを利用します。
HTMLの基本テンプレートも確認しておこう
HTMLファイル全体の基本構造や、CSSファイルを読み込む実務向けの雛形は、次の記事で詳しく解説しています。
まとめ
HTMLファイルは、エクスプローラーやFinderでダブルクリックするか、ブラウザの「ファイルを開く」から選択すると表示できます。
まずindex.htmlを正しい拡張子で保存し、ブラウザで開いてみましょう。コードを変更したあとは「保存→ブラウザを再読み込み」の順で確認すると、HTMLの学習をスムーズに進められます。