Google ChromeでHTMLファイルを開く方法|PC・スマホ別の手順を徹底解説

HTMLコードの理解と扱い方を身につければ、日々の作業がぐっと快適になります。たとえば、HTML署名を作成してメールのやり取りをよりプロフェッショナルに見せたり、WebページをWord文書として保存するなど、意外な場面でも活用できます。

ただし、HTMLファイルを扱ったことがない方にとっては、少し難しく感じられるかもしれません。この記事では、HTMLファイルとは何かという基本から、ChromeでHTMLファイルを開いて表示する方法まで、初心者にもわかりやすく解説します。

HTMLファイルとは?

HTMLは「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で、Webページの作成や構造化を目的としたマークアップ言語です。HTML(またはHTM)拡張子を持つファイルには、テキストと、画像や動画など他のファイルへの参照情報のみが含まれています。

HTMLファイルの作成・編集にはさまざまなソフトウェアが利用できますが、シンプルなテキストエディタであれば、テキストとして開いて読むことも可能です。一方、Webページが実際にどのように表示されるかを確認したい場合は、WebブラウザでHTMLファイルを実行する必要があります。

Google ChromeはHTMLに対応しており、「.html」拡張子のファイルであればすべて開くことができます。

ChromeでHTMLファイルを開く方法

ChromeでHTMLファイルを開く方法は複数あります。状況に合わせて使い分けましょう。

「プログラムから開く」コマンドを使う

1. 表示したいHTMLファイルを見つけて右クリックし、メニューから「プログラムから開く」を選択します。ファイルを開けるアプリの一覧が表示され、既定のブラウザはリストの先頭に表示されます。
2. リストからGoogle Chromeを選択すると、ブラウザ上でファイルが表示されます。
3. Google Chromeが既定のブラウザに設定されている場合は、HTMLファイルをダブルクリックするだけで自動的にChromeで開きます。もしダブルクリックしてもファイルが認識されない場合は、インストール済みのアプリで開くか、インターネットで拡張子を検索するよう求められます。「インストール済みのアプリから選択」を選び、再度リストからGoogle Chromeを選んでみてください。
4. 正しいHTMLファイルが開けているか確認するには、Chromeでページが表示された際のアドレスバーをチェックしましょう。アドレスバーの内容は、パソコン上のファイルの保存場所と一致しているはずです。

Chrome内からHTMLファイルを開く

すでにブラウザを起動している場合は、パソコン上でファイルを探すことなく、Chromeから直接HTMLファイルを開けます。

1. Chromeのメニューから「ファイル」を選択し、「ファイルを開く」をクリックします。
2. HTMLファイルの保存場所へ移動し、対象のファイルを選択して「開く」をクリックします。
3. ファイルが新しいタブで開きます。

キーボードショートカットを使う方法もあります。Chromeで新しいタブを開き、Ctrl(Windows)またはCmd(Mac)+Oを押してください。同じ「ファイルを開く」メニューが表示されるので、HTMLファイルを探して開きましょう。

ショートカットが機能しない場合は、お使いのブラウザでこの操作に別のホットキーが割り当てられている可能性があります。ブラウザの設定画面で確認できます。Google Chromeには、タブの切り替え、Googleカレンダーの予定作成、シークレットモードのオン/オフなど、ショートカットで素早く操作できる便利な機能が多数搭載されています。

ドラッグ&ドロップでファイルを開く

新しいタブにHTMLファイルを直接ドラッグ&ドロップするだけでも開けます。Chromeが自動的にページを表示してくれます。

HTMLソースコードを表示する方法

ページを表示するだけでなく、HTMLのソースコードそのものを確認したい場合もあるでしょう。Chromeならそれも簡単に行えます。

最も基本的な方法は、HTMLファイルをChromeの新しいタブで開き、ページ上で右クリックしてメニューから「ページのソースを表示」を選択することです。

よりインタラクティブなツールを使いたい場合や、自分が加えた変更がWebページにどう反映されるかをリアルタイムで確認したい場合は、Chromeのデベロッパーツールを活用しましょう。

手順は以下の通りです。まずHTMLファイルを新しいタブで開きます。次に、ウィンドウ右上の縦に3つ並んだ点のアイコンをクリックし、ドロップダウンメニューから「その他のツール」>「デベロッパーツール」を選択します。

画面の右側に表示されるパネルで「Elements(要素)」タブを選択すると、Webページの詳細なソースコードを確認できます。

スマートフォンでHTMLファイルを開く方法

スマートフォンでも、いくつかの方法でChrome上のHTMLファイルを開けます。

「アプリで開く」メニューを使う

スマートフォン上で開きたいHTMLファイルを見つけてタップします。「アプリで開く」メニューが表示されるので、Webページを閲覧できるアプリの一覧から選択できます。Chromeを選んでファイルを開きましょう。

SDカード内のHTMLファイルを開く

スマートフォンでChromeを起動し、新しいタブを開きます。アドレスバーに「file:///sdcard/」と入力すると、SDカードのストレージが開きます。そこから目的のファイルへ移動し、タップして表示してください。

HTMLへの理解を深めよう

ちょっとしたテクニックを覚えてHTMLへの理解を深めれば、コードでもテキストでも、より自由に作業できるようになります。たとえば、GoogleドキュメントにHTMLを埋め込む方法などを学ぶのもおすすめです。

あなたはHTMLファイルを扱うことはありますか?難しいと感じることはありますか?ぜひコメント欄であなたの経験を教えてください。