「HTMLファイルをブラウザに表示したいけど、やり方がわからない…。」そんなお悩みありませんか？
最初はファイルをどう表示すればいいかわからないですよね。
この記事では、HTMLファイルをブラウザに表示する方法を2つ紹介していきます。
今回の記事を読んで、本格的なHTMLの学習を始めてみてください。
それでは、見ていきましょう。
HTMLファイルをブラウザで開く2つの方法
HTMLファイルをブラウザで開く方法として、「ファイル管理アプリから開く方法」と「テキストエディターから開く方法」の2つを紹介します。
ファイル管理アプリから表示する方法
ファイル管理アプリから開く場合は、表示したいHTMLファイルをブラウザへドラッグ＆ドロップするか、右クリックまたはダブルクリックで開きます。
まずは、HTMLファイルを保存した場所をファイル管理アプリで開きます。Windowsでは「エクスプローラー」、macOSでは「Finder」を使用します。
次に、開きたいHTMLファイルが保存されているフォルダへ移動します。画像ではWindowsのエクスプローラーを使用しています。
ドラッグ&ドロップする場合は、ブラウザを開いた状態で行います。
ファイルをドラッグ(左クリックを押したままカーソルを動かす)し、ブラウザのタブのところでドロップ(左クリックを離す)します。
(上のようにドラッグ中はファイルが四角く表示されます。)
↓
(上のようにファイルをブラウザのタブのところまでもっていきます。)
↓
ここで左クリックを離します(ドロップします)。
↓
ここでHTMLがブラウザで表示されます(下の画像)。
次に、右クリックする場合です。
Windowsで右クリックする場合は、表示されるメニューから「プログラムから開く」を選択してください。macOSでは「このアプリケーションで開く」を選択します。
メニューの表示位置はOSのバージョンや設定によって異なるため、項目名を確認して選択してください。
↓
すると、インストールされているブラウザの項目が右に表示されます。
↓
ファイルを開きたいブラウザを選んでください。
↓
ブラウザを選ぶと、ファイルが選択したブラウザで開かれます。
使用するブラウザは、Google Chrome、Microsoft Edge、Firefox、Safariなどから選べます。基本的なHTMLは同じように表示されますが、細かな見た目や開発者ツールの操作方法が異なる場合があります。
HTMLファイルをダブルクリックすると、そのパソコンでHTMLファイルに関連付けられている既定のブラウザで開きます。
以上、HTMLファイルをエクスプローラーからブラウザで開く方法でした。
テキストエディターから表示する方法
次に、テキストエディター（コードを書くためのツール）から表示する方法を解説します。
ここでは、代表的なテキストエディターである「Visual Studio Code（ビジュアルスタジオコード）」を使用します。
Visual Studio Code（通称VS Code）は、Microsoftが開発しているテキストエディターです。Windows、macOS、Linuxで利用できます。
Visual Studio Codeで開いているHTMLファイルも、ブラウザへドラッグ＆ドロップして表示できます。
まずは、Visual Studio Codeとブラウザを両方起動します。
Visual Studio CodeでHTMLファイルを開き、変更内容を保存しておきます。保存していない変更はブラウザの表示に反映されないため注意してください。
HTMLファイルは、Visual Studio Codeのほか、Windowsのメモ帳などでも作成できます。
タブに表示されているHTMLファイル名を、左クリックしたまま押さえます。
そのままブラウザのタブ付近までドラッグします。画像のように、ブラウザがファイルを受け取れる位置へ移動してください。
↓
左クリックを離してドロップします。
↓
ここでHTMLファイルが表示されます(下の画像)。
画像の例ではHTMLファイルに表示内容を書いていないため、ブラウザには白いページが表示されています。
以上が、テキストエディタ「Visual Studio Code」からHTMLのファイルをブラウザに表示する方法です。
ブラウザとテキストエディタの関係性
HTMLを学び始めたばかりだと、テキストエディターとブラウザがそれぞれ何をするツールなのか、混同しやすいかもしれません。
確認のため、ブラウザとテキストエディタの関係性を見ておきます。
テキストエディターはHTMLを書くためのツールで、ブラウザは保存されたHTMLを読み取り、Webページとして表示するためのツールです。
テキストエディターでは、HTMLなどのテキストやコードを記述してファイルへ保存します。
書いた内容はHTMLファイルとして保存され、ブラウザが読み取れる状態になります。
ブラウザはHTMLのタグを解釈し、見出しや文章、画像などをWebページとして画面へ表示します。Googleなどの検索エンジンはWebページを探すサービスであり、ブラウザとは別のものです。
2つは別のツールですが、「テキストエディターで作成し、ブラウザで表示を確認する」という関係があります。
まとめ
いかがでしたか？
HTMLファイルをブラウザで表示する方法がクリアになったと思います。
「エクスプローラーから表示する方法」と「テキストエディタから表示する方法」を説明しました。
テキストエディターでHTMLを作成し、ブラウザで表示を確認するという役割の違いも覚えておきましょう。
今回の手順を参考にして、HTMLの学習を進めていってください。