ビューアーとは？
ビューアーとは、コンピューターのデータやファイルを表示するためのソフトウェアや機器のことです。
主に画面や画像の表示、印刷機能をもっており、編集や保存機能は持ち合わせていないものがほとんどです。
画像ビューアーやテキストビューアーなどを総称して「ビューアー」と呼ばれることもあります。
HTMLビューアーとは？
HTMLビューアーとは、ブラウザにある基本機能を用いて、HTMLファイルを表示させるビューアーのことを指します。
または、HTMLファイルを編集するテキストエディタのことをビューアーと呼ぶ場合もあります。
ここでは、HTMLファイルを編集するビューアーについて解説します。
HTMLビューアーでおすすめのもの5つ
HTMLビューアーでおすすめのものは、次の5つです。
- Atom
- Visual Studio Code
- Brackets
- サクラエディタ
- TeraPad
ひとつずつ解説します。
Atom
Atomは、GitHubで開発されたテキストエディタです。
タブ型の使いやすいUIや、無料公開しているパッケージを使うことで機能の追加も可能といった特徴があります。
ほかにもプラグインが豊富に用意されており、使い方次第でコーディング作業が捗ります。
ひとつのウィンドウで単一のファイルやプロジェクト全体、複数のプロジェクトを開くことも可能です。
classやidなどの固有名称も記憶するため、初心者から上級者まで使いやすいビューアーと言えます。
Windows版、Mac版が用意されており、公式サイトから無料でダウンロードできます。
初期設定ではメニューなどが英語で書かれていますが、パッケージを使用することで日本語に変更可能です。
利用者が多いことから、使い方がわからなくても調べればで解決することが多いですよ。
Visual Studio Code
Visual Studio Codeは、Microsoft社が提供しているテキストエディタです。
HTMLやCSS、JavaScript、PHP、Pythonなどさまざまな言語に対応しています。
配色テーマも豊富にあり、好みに応じてカスタマイズ可能、日本語対応、文字コード設定などとにかく機能がたくさんあるのが特徴と言えます。
拡張機能が豊富にあり、導入することでコーディングがより快適になります。
おすすめの拡張機能は、次の7つです。
- Auto rename tag（タグの自動補正）
- CSSTree validator（CSSの検証）
- Visual Studio Code CSS Support for HTML Documents（HTMLドキュメントのCSSサポート）
- IntelliSense for CSS class names in HTML（CSSクラスの入力補完）
- Japanese Language Pack for Visual Studio Code（UI表示を日本語対応）
- HTMLhint（構文チェック）
- zenkaku（全角スペースの可視化）
Windows版、Mac版、Linux版が用意されており、さまざまなユーザーが使用できます。
Atom同様に利用者が多いため、使い方やおすすめの拡張機能などの情報は調べればわかることがほとんどです。
Brackets
Bracketsは、Adobe社が提供しているテキストエディタです。
HTML、CSS、JavaScript用があり、この3つ言語以外にも30以上の言語に対応しているため、一般的な言語であれば問題なく利用可能です。
Braketsは、他のテキストエディタとは違い最初から日本語設定ができるため、ダウンロードしてからすぐに使用可能です。
最大の特徴がライブ・プレビュー機能が使えることで、HTMLファイルの出力が一目でわかるようになっています。
初心者さんに特におすすめのビューアーと言えます。
GitHub上に公開している拡張機能をインストールすれば、自分好みのエディタにカスタマイズもできますよ。
・Emmet（コード入力の省略）
・Color Hint（カラー入力の記憶）
・Beautify（コードの整形）
上記あたりの拡張機能がおすすめですので、ぜひインストールしてみてください。
その他にも、編集コードがハイライトで表示されたり、カーソルを画像ファイル名の文字列に合わせると、該当画像がポップアップで表示される「ホバービュー」、コードを折りたたむ機能も備わっています。
サクラエディタ
サクラエディタは、基本的な機能がわかりやすく高機能なビューアーなため、初心者におすすめです。
テキスト入力スピードを上げる機能や、処理の自動化を可能にする機能などの利用もできます。
リリースされてからも多くの人に利用されている、信頼性のあるビューアーと言えます。
TeraPad
TeraPadは、Windowsで使用可能なフリーのHTMLビューアーです。
タグの色分け表示、行番号の表示、ブラウザでのプレビューといった機能が備わっています。
HTMLファイルだけでなく、メモ帳としても高機能なフリーソフトです。
AndroidのHTMLビューアーでおすすめのもの5つ
PCではなくAndroidでHTMLビューアーを使いたいのですが、おすすめはありますか？
AndroidにもさまざまなHTMLビューアーがありますが、ここではおすすめのものを5つ紹介します。
HTML Viewer（青）
HTML Viewer（青）は、Yogev Hahamが配信しているHTML&CSSアプリです。
Webサイトのアドレスを入力することで、HTMLコードとサイトのWebビューを取得できます。
他のアプリケーションからWebサイトのアドレスをインポートしたり、HTMLコードを別のアプリケーションにエクスポートすることも可能です。
Local HTML Viewer
Local HTML Viewerは、ローカルのHTMLファイルを閲覧できる軽量アプリです。
スマホ用に作成したHTMLファイルや、JavaScriptの動作検証に利用できます。
シンプルながらに機能がしっかりしたアプリを使いたい場合におすすめです。
HTML Reader / Viewer
HTML Reader / Viewerは、スマホ端末に保存されているHTMLファイルとWebページを読み取れるスマホアプリです。
シンプルで使いやすく、JavaScriptの有効/無効を切り替えられる機能などが備わっています。
コード表示画面も見やすく、スマホのテキストエディタからの編集もスムーズにできるでしょう。
HTML Viewer（赤）
HTML Viewer（赤）は、ローカルのHTMLファイルとWebサイトが表示できるHTMLビューアーです。
ファイルにJavaScriptの処理を記述することで、JavaScriptの勉強や動作確認も可能になります。
ファイルに保存されたJavaScriptを開けるので、毎回入力する必要がありません。
付属のファイルマネージャーを使用して、新規ファイルの作成、jsと入力して保存、アプリを使用してWebページにロードもできます。
HTML Dual Viewer
HTML Dual Viewerは、Google検索に対応している2画面HTMLビューアーです。
左画面にブラウザの画面、右画面にHTMLソースコードを同時に表示し、それぞれの画面の幅調整も簡単に行える特徴があります。
Google検索にも対応しているためURLを直接打つ必要がなく、新しいページを開くとリアルタイムでソースコードが更新されます。
Syntax Highlighter機能も追加され、今後の機能増加も期待できるHTMLビューアーと言えます。
デフォルトのHTMLビューアーを解除する方法
PCやスマホでHTMLファイルを開くビューアーを選ぶと、以降自動的に開くビューアーが決まりますよね。
「間違えて開くビューアーを選んでしまって、解除する方法がわからない…」と悩んでいる人もいるのではないでしょうか？
ここでは、デフォルトで選んだHTMLビューアーを解除する方法を解説します。
PC（Mac）の場合
まず、開きたいHTMLファイルの「情報を見る」を選択しましょう。
「このアプリケーションで開く」から、開きたいHTMLビューアーを選択すればOKです。
スマホ（android）の場合
androidの場合は、次の手順でデフォルト設定を解除します。
- ホーム画面から「設定」をタップ
- 設定画面から「アプリ」をタップ
- 端末によってはアプリ画面から「アプリ」をタップ
- 現在デフォルトで開いているアプリをタップ
- 「既定で開く」を開くをタップ
- 「設定を消去」で解除が完了します
まとめ
HTMLビューアーの概要や、おすすめHTMLビューアーについてまとめました。
HTMLビューアーにはさまざまなものがありますが、おすすめはシンプルでありながらさまざまな機能を備えているものです。
この記事で紹介したHTMLビューアーは、どれもおすすめになっていますので、ぜひ参考に検討してみてください。
