バナー画像

ビューアーとは?

ビューアーとは、コンピューターのデータやファイルを表示するためのソフトウェアや機器のことです。

主に画面や画像の表示、印刷機能をもっており、編集や保存機能は持ち合わせていないものがほとんどです。

画像ビューアーやテキストビューアーなどを総称して「ビューアー」と呼ばれることもあります。

HTMLビューアーとは?

HTMLビューアーとは、ブラウザにある基本機能を用いて、HTMLファイルを表示させるビューアーのことを指します。

または、HTMLファイルを編集するテキストエディタのことをビューアーと呼ぶ場合もあります。

ここでは、HTMLファイルを編集するビューアーについて解説します。

HTMLビューアーでおすすめのもの5つ

HTMLビューアーでおすすめのものは、次の5つです。

ひとつずつ解説します。

Atom

Atom

Atom

Atomは、GitHubで開発されたテキストエディタです。

タブ型の使いやすいUIや、無料公開しているパッケージを使うことで機能の追加も可能といった特徴があります。

ほかにもプラグインが豊富に用意されており、使い方次第でコーディング作業が捗ります。

ひとつのウィンドウで単一のファイルやプロジェクト全体、複数のプロジェクトを開くことも可能です。

classやidなどの固有名称も記憶するため、初心者から上級者まで使いやすいビューアーと言えます。

Windows版、Mac版が用意されており、公式サイトから無料でダウンロードできます。

初期設定ではメニューなどが英語で書かれていますが、パッケージを使用することで日本語に変更可能です。

利用者が多いことから、使い方がわからなくても調べればで解決することが多いですよ。

Visual Studio Code

Visual Studio Code

Visual Studio Code

Visual Studio Codeは、Microsoft社が提供しているテキストエディタです。

HTMLやCSS、JavaScript、PHP、Pythonなどさまざまな言語に対応しています。

配色テーマも豊富にあり、好みに応じてカスタマイズ可能、日本語対応、文字コード設定などとにかく機能がたくさんあるのが特徴と言えます。

拡張機能が豊富にあり、導入することでコーディングがより快適になります。

おすすめの拡張機能は、次の7つです。

Windows版、Mac版、Linux版が用意されており、さまざまなユーザーが使用できます。

Atom同様に利用者が多いため、使い方やおすすめの拡張機能などの情報は調べればわかることがほとんどです。

Brackets

Brackets

Brackets

Bracketsは、Adobe社が提供しているテキストエディタです。

HTML、CSS、JavaScript用があり、この3つ言語以外にも30以上の言語に対応しているため、一般的な言語であれば問題なく利用可能です。

Braketsは、他のテキストエディタとは違い最初から日本語設定ができるため、ダウンロードしてからすぐに使用可能です。

最大の特徴がライブ・プレビュー機能が使えることで、HTMLファイルの出力が一目でわかるようになっています。

初心者さんに特におすすめのビューアーと言えます。

GitHub上に公開している拡張機能をインストールすれば、自分好みのエディタにカスタマイズもできますよ。

・Emmet(コード入力の省略)
・Color Hint(カラー入力の記憶)
・Beautify(コードの整形)

上記あたりの拡張機能がおすすめですので、ぜひインストールしてみてください。

その他にも、編集コードがハイライトで表示されたり、カーソルを画像ファイル名の文字列に合わせると、該当画像がポップアップで表示される「ホバービュー」、コードを折りたたむ機能も備わっています。

サクラエディタ

サクラエディタ

サクラエディタは、基本的な機能がわかりやすく高機能なビューアーなため、初心者におすすめです。

テキスト入力スピードを上げる機能や、処理の自動化を可能にする機能などの利用もできます。

リリースされてからも多くの人に利用されている、信頼性のあるビューアーと言えます。

TeraPad

TeraPad

TeraPadは、Windowsで使用可能なフリーのHTMLビューアーです。

タグの色分け表示、行番号の表示、ブラウザでのプレビューといった機能が備わっています。

HTMLファイルだけでなく、メモ帳としても高機能なフリーソフトです。

AndroidのHTMLビューアーでおすすめのもの5つ

PCではなくAndroidでHTMLビューアーを使いたいのですが、おすすめはありますか?

AndroidにもさまざまなHTMLビューアーがありますが、ここではおすすめのものを5つ紹介します。

HTML Viewer(青)

HTML Viewer(青)

HTML Viewer(青)は、Yogev Hahamが配信しているHTML&CSSアプリです。

Webサイトのアドレスを入力することで、HTMLコードとサイトのWebビューを取得できます。

他のアプリケーションからWebサイトのアドレスをインポートしたり、HTMLコードを別のアプリケーションにエクスポートすることも可能です。

Local HTML Viewer

Local HTML Viewer

Local HTML Viewerは、ローカルのHTMLファイルを閲覧できる軽量アプリです。

スマホ用に作成したHTMLファイルや、JavaScriptの動作検証に利用できます。

シンプルながらに機能がしっかりしたアプリを使いたい場合におすすめです。

HTML Reader / Viewer

HTML Reader / Viewer

HTML Reader / Viewerは、スマホ端末に保存されているHTMLファイルとWebページを読み取れるスマホアプリです。

シンプルで使いやすく、JavaScriptの有効/無効を切り替えられる機能などが備わっています。

コード表示画面も見やすく、スマホのテキストエディタからの編集もスムーズにできるでしょう。

HTML Viewer(赤)

HTML Viewer(赤)

HTML Viewer(赤)は、ローカルのHTMLファイルとWebサイトが表示できるHTMLビューアーです。

ファイルにJavaScriptの処理を記述することで、JavaScriptの勉強や動作確認も可能になります。

ファイルに保存されたJavaScriptを開けるので、毎回入力する必要がありません。

付属のファイルマネージャーを使用して、新規ファイルの作成、jsと入力して保存、アプリを使用してWebページにロードもできます。

HTML Dual Viewer

HTML Dual Viewer

HTML Dual Viewerは、Google検索に対応している2画面HTMLビューアーです。

左画面にブラウザの画面、右画面にHTMLソースコードを同時に表示し、それぞれの画面の幅調整も簡単に行える特徴があります。

Google検索にも対応しているためURLを直接打つ必要がなく、新しいページを開くとリアルタイムでソースコードが更新されます。

Syntax Highlighter機能も追加され、今後の機能増加も期待できるHTMLビューアーと言えます。

デフォルトのHTMLビューアーを解除する方法

PCやスマホでHTMLファイルを開くビューアーを選ぶと、以降自動的に開くビューアーが決まりますよね。

「間違えて開くビューアーを選んでしまって、解除する方法がわからない…」と悩んでいる人もいるのではないでしょうか?

ここでは、デフォルトで選んだHTMLビューアーを解除する方法を解説します。

PC(Mac)の場合

まず、開きたいHTMLファイルの「情報を見る」を選択しましょう。

PC(Mac)の場合

「このアプリケーションで開く」から、開きたいHTMLビューアーを選択すればOKです。

PC(Mac)の場合

スマホ(android)の場合

androidの場合は、次の手順でデフォルト設定を解除します。

  1. ホーム画面から「設定」をタップ
  2. 設定画面から「アプリ」をタップ
  3. 端末によってはアプリ画面から「アプリ」をタップ
  4. 現在デフォルトで開いているアプリをタップ
  5. 「既定で開く」を開くをタップ
  6. 「設定を消去」で解除が完了します

まとめ

HTMLビューアーの概要や、おすすめHTMLビューアーについてまとめました。

HTMLビューアーにはさまざまなものがありますが、おすすめはシンプルでありながらさまざまな機能を備えているものです。

この記事で紹介したHTMLビューアーは、どれもおすすめになっていますので、ぜひ参考に検討してみてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。