HTML、CSSファイルの正しい開き方

Pocket

HTMLファイルやCSSファイルを編集するための一番簡単な方法は、パソコンに最初からインストールされているメモ帳やテキストエディットを使う方法です。

メモ帳でもHTMLを書いたりファイルを開いたりすることはできるんですが、ダウンロードしたテンプレートなどの場合改行がなく、見づらくなっていることもあります。
HTMLファイルをメモ帳で開いた場合
このような症状はHTMLに限らずWordpressのテンプレートやCSSファイルを開いたときにも発生することがあり、この状態で編集するのはかなり難しいです。

HTMLやCSSファイルを開いたときに正しく表示されるようにするためには、メモ帳ではなくコードエディターを使用します。これを使うことで先ほどのように改行が無視されることなく、綺麗に見やすく表示されるのです。

HTMLファイルを開くためのツールやソフトは無料でたくさん公開されているので、そのなかでもおすすめのコードエディターをいくつか紹介します。

HTML、CSSファイルを開く方法

無料のコードエディタでHTMLファイルを開く

まずはソフトをダウンロードして使うコードエディタから。ダウンロードやインストールの方法は通常のソフトと同じなのでここでは省略します。

Wndows、Mac共通

Brackets
BracketsはPhotoshopやillustratorで有名なAdobeが提供するフリーのコードエディター。見た目もかなりクールで見やすく、機能も充実してます。実際の仕事でも使えるレベルのエディター。日本語にも対応してるので初心者の方でも安心です。

関連記事:初心者にもおすすめ!無料のコードエディターBracketsの使い方
bracketsでHTMLファイルを開いたり編集できる

Sublime Text2
SublimeText2は僕も使っている高機能なコードエディタ。プラグインを追加することで様々な機能を追加でき、HTMLファイルやWordpressテンプレートのコーディングをする際に非常に便利な機能を提供してくれます。英語ですが、日本語化も可能。
sublime-text

Windowsのみで使えるエディタ

Notepad++
Notopad++は昔から使われているエディター。見た目が少し古いですが、永く使われている分機能も充実しています。日本語対応。
notepad++でHTMLファイルを開く

Macのみで使えるエディタ

CotEditor
Coteditorは非常にシンプルで軽いエディター。MacユーザーでちょこっとHTMLファイルの編集をする程度ならこのエディターがおすすめ。最近のバージョンアップで見た目もクールになってます。
CotEditorでHTMLファイルを開く

インストールしたエディターでHTMLファイルを開く方法

ダウンロードしたソフトでHTMLファイルやCSSファイルを開くには、各エディタのメニューから、ファイル->開くでファイルを選択する方法と、開きたいファイルを右クリックでプログラムから開く方法があります。

どちらでも開くことができるので、やりやすい方法で開いて下さい。
HTMLファイルの開き方

無料のオンラインエディタでHTMLファイルを開く

通常はソフトをダウンロードすることでHTMLファイルを正しく表示できるようになりますが、ウィルスチェックソフトでエラーが出たり、外部ソフトをインストールできない端末を使っているなど、特殊な事情もあるでしょう。

そんなときはオンラインエディタを使ってみます。オンラインエディタなら、ブラウザでファイルを開くことができるので、外部ソフトをインストールしたりする必要はありません。また、WindowsでもMacでも使える方法です。

オンラインエディタを使うには、GoogleChromeをインストールする必要があります。
Chromeをインストール

インストールできたら、Shifteditという拡張機能をインストールします。これはGoogleDriveやDropBoxにアップロードしたファイルをブラウザ上で編集できるようになるツールです。

拡張機能をインストールしたら、Googleのアカウントでログインし、GoogleDriveにアクセスします。すると、アップロードしたファイルが左のカラムに表示され、ダブルクリックしてHTMLファイルを開いて編集もできます。
shifteditでHTMLファイルを編集

まとめ

ここまでHTML・CSSファイルを開くための方法をまとめてきました。メモ帳だとうまく表示されなかったり、コードの編集に非常に手間がかかりますが、コードエディターを使うと綺麗に表示されるようになります。

無料で使えるツールなので、HTMLを編集することがあるなら1つは持っておくと大変便利。