HTMLの勉強を始めたときにHTMLファイルをブラウザで開いて表示する方法が全くわかりませんでした。
一体どのようにしてHTMLファイルを「Chrome」「Safari」「Firefox」などの主要なブラウザを指定して開くことができるか悩んだものです。
私みたくHTMLファイルの開き方の壁にぶち当たってしまった場合は、PCのフォルダやファイル操作を覚えてしまえば解決することができ、HTMLファイルをブラウザで開いて表示することができます。
HTMLファイルをブラウザで開く方法
HTMLファイルをブラウザで開く場合には、作成したHTMLファイルをマウスでダブルクリックすると、ブラウザが立ち上がり、HTMLファイルに記述してるテキストが表示できます。
この場合のHTMLファイルの開き方で立ち上がるブラウザは、それぞれ使用してるPCの設定でファイルをどのブラウザを既定やデフォルトにしてHTMLファイルを開くかの設定によってHTMLファイルが開くブラウザが違います。
例えば「HTMLファイルをダブルクリックして開くブラウザがChromeで表示される」という場合は既定のブラウザはChromeがHTMLファイルの開き方として設定されてます。
HTMLファイルの開き方を既定のブラウザ以外に指定して開くようにしたい場合は、開きたいHTMLファイルをマウスで右クリックします。そして開いた項目から、HTMLファイルの開き方を、どのブラウザで表示したいか指定できます。
このときにHTMLファイルの開き方を選べる選択項目にHTMLファイルを開きたいブラウザが表示されない場合は、そのブラウザをPCにインストールする必要があります。
またHTMLファイルの開き方をブラウザ指定して表示するやり方はMacとWindowsで若干ですが違いがあります。
MacとWindows10を使った場合を例にして説明しますので、それぞれのPC環境に合う方法を参考に使ってください。
MacでHTMLファイルの開き方
MacでHTMLファイルの開き方をブラウザを指定して表示する方法は、2つのやり方があります。
1つ目は、開きたいHTMLファイルをMacのFinder内のフォルダやデスクトップに置いてると思うので、開くHTMLファイルまで進み、目的のHTMLファイルを右クリックします。
HTMLファイルを右クリックすると「このアプリケーションで開く」という項目が表示されます。「このアプリケーションで開く」にマウスポインタを載せるとHTMLファイルの開き方をどのブラウザで表示するかブラウザのappが表示されます。
「Chrome」「Safari」「Firefox」などのブラウザがMacにインストールしてあれば選択できるので、HTMLファイルの開き方をどのブラウザにしたいか選択します。
選択するとHTMLの開き方として指定したブラウザでHTMLファイルが自動で開きます。
2つ目のMacでhtmlファイルの開き方は、MacのFinderのフォルダやデスクトップに置いたHTMLファイルを右クリックします。
HTMLファイルを右クリックすると「情報を見る」の項目が表示します。
表示した「情報を見る」をクリックします。すると開きたいHTMLファイルの情報が表示され、開いたHTMLファイル情報の中に、「このアプリケーションで開く」という項目があります。
次に「このアプリケーションで開く」の右側の矢印をクリックすると、HTMLファイルをどのブラウザで開きたいかを指定できるappが表示するので、HTMLファイルの開き方をどのブラウザにするか選択してください。
そして該当のHTMLファイルの上でマウスをダブルクリックすると自動でHTMLファイルを選択した指定ブラウザで開くことができます。
windows10でHTMLファイルの開き方
Windows10でHTMLファイルの開き方をブラウザを指定して表示する方法です。2つのやり方があります。
1つ目の方法は、Windowsエクスプローラーに入ってる開きたいHTMLファイルを右クリック。
すると「プログラムから開く」の項目にWindowsにインストールしてるブラウザが表示されるので、どのブラウザをHTMLファイルの開き方として使いたいかクリックで選択すれば自動で該当のHTMLが指定ブラウザで表示できます。
2つ目の方法は、Windows10の設定から「既定のアプリ」を開きます。
既定のアプリを開くと「Webブラウザー」の項目があるので、「Webブラウザー」をクリックすると「アプリを選ぶ」という画面の項目にWindowsにインストールしてる各ブラウザが表示されます。
あとはHTMLファイルを開きたいブラウザを選択すれば、お使いのPC内のHTMLファイルが、既定のアプリの「Webブラウザー」で指定したブラウザがHTMLファイルを開く既定のブラウザとして設定できます。
設定後はWindowsエクスプローラー内のHTMLファイルを確認すると指定したブラウザのアイコンでHTMLファイルが表示されてるので、どのブラウザが既定のブラウザになっているか判断しやすいです。
iphoneでHTMLファイルを開く場合は？
iphoneでhtmlファイルを開くことができます。ただしiPhoneにHTMLエディタのアプリを無料ダウンロードして、iPhoneのHTMLエディタからプレビューでHTMLファイルを開くという方法です。
この方法の場合、HTMLファイルの作成からHTMLファイルの編集、そして作成や編集をしたHTMLファイルを開くことまで可能な方法です。
HTMLファイルを開くブラウザについては、iPhoneのHTMLエディタアプリ専用のブラウザのようで、基本的なページ表示、スクロール、リンク先への移動をSafariと同じ操作ですることができます。ブラウザ指定はできませんがiPhoneでHTMLファイルを開く方法としてはおすすめです。
HTMLファイルの開き方が簡単なブラウザ
HTMLファイルの開き方をブラウザごとで考えた場合、ブラウザによってはHTMLファイルをブラウザにドラッグ&ドロップするだけの簡単な操作で開くことができるブラウザがあります。
Chrome
GoogleのChromeをHTMLファイルの開き方として選ぶ場合は、HTMLファイルをドラッグ&ドロップで開く簡単な方法が使えます。
やり方は簡単。Chromeを開いて表示される最初の画面にChromeで開きたいHTMLファイルをドラッグ&ドロップするだけです。これだけでHTMLファイルをChromeで開くことができます。
また複数のHTMLファイルをフォルダに入れてまとめて管理してる場合でも、Chromeにフォルダごとドラッグ&ドロップをすれば、HTMLファイルを表示するだけでなく、ChromeだけでHTMLファイルの編集や保存、そして検証をすることも可能なので便利です。
ChromeでHTMLとCSSファイルを作成して編集や保存をする
Firefox
FirefoxをHTMLファイルの開き方として選びたい場合もChromeと同じやり方のHTMLファイルをドラッグ&ドロップするだけで簡単に表示確認できます。
まとめ
HTMLファイルの開き方を、自分自身でどのブラウザを指定して表示するかできるようになると、Webサイト作成したときは各ブラウザごとでページデザインが崩れたりしてないか確認作業の手助けになります。
ブログの下書きでも、HTMLファイルに書いたテキストを使いやすいと思うブラウザを指定して表示を見ながらHTMLファイルを編集し、調べたいことは別のブラウザで。のように活用できるので、時間があるときに覚えてみてください。
