HTML、CSSファイルの正しい開き方
HTMLファイルやCSSファイルを編集するための一番簡単な方法は、パソコンに最初からインストールされているメモ帳やテキストエディットを使う方法です。
メモ帳でもHTMLを書いたりファイルを開いたりすることはできるんですが、ダウンロードしたテンプレートなどの場合改行がなく、見づらくなっていることもあります。
このような症状はHTMLに限らずWordpressのテンプレートやCSSファイルを開いたときにも発生することがあり、この状態で編集するのはかなり難しいです。
HTMLやCSSファイルを開いたときに正しく表示されるようにするためには、**メモ帳ではなくコードエディターを使用します。**これを使うことで先ほどのように改行が無視されることなく、綺麗に見やすく表示されるのです。
HTML、CSSファイルを開く方法
HTMLファイルを開くためのツールやソフトは無料でたくさん公開されているので、そのなかでもおすすめのコードエディターをいくつか紹介します。
どのソフトもWindowsでもMacでも使えます。
無料のコードエディター
コードエディターのダウンロードやインストールの方法は通常のソフトと同じなのでここでは省略します。
最近Web開発者やWebデザイナーの間で人気なのがこのVSCode。Googleのカンファレンスや海外の動画を見てもみんなこれ使ってる感じです。
様々な機能を追加できる拡張機能や変更可能なショートカット、スニペットの登録などなど基本的なところを抑えつつ軽量な動作を実現。
2つめはAtom。こちらも人気の高いエディター。Github製ということもありGithubとの連携が素晴らしいです。GithubのヘビーユーザーならAtomがおすすめ！
IDEのような機能を追加できる「Atom IDE」で機能をグレードアップできたり、同じコードを複数人が同時に編集できる「TeleType」という機能も使えるすごいやつです。
BracketsはPhotoshopやillustratorで有名なAdobeが提供するフリーのコードエディター。見た目もかなりクールで見やすく、機能も充実してます。実際の仕事でも使えるレベルのエディター。日本語にも対応してるので初心者の方でも安心です。
インストールしたエディターでHTMLファイルを開く方法
ダウンロードしたソフトでHTMLファイルやCSSファイルを開くには、各エディタのメニューから、ファイル->開くでファイルを選択する方法と、開きたいファイルを右クリックでプログラムから開く方法があります。
どちらでも開くことができるので、やりやすい方法で開いて下さい。
無料のオンラインエディタでHTMLファイルを開く
通常はソフトをダウンロードすることでHTMLファイルを正しく表示できるようになりますが、ウィルスチェックソフトでエラーが出たり、外部ソフトをインストールできない端末を使っているなど、特殊な事情もあるでしょう。
そんなときはオンラインエディタを使ってみます。オンラインエディタなら、ブラウザでファイルを開くことができるので、外部ソフトをインストールしたりする必要はありません。また、WindowsでもMacでも使える方法です。
オンラインエディタを使うには、GoogleChromeをインストールする必要があります。
インストールできたら、Shifteditという拡張機能をインストールします。これはGoogleDriveやDropBoxにアップロードしたファイルをブラウザ上で編集できるようになるツールです。
拡張機能をインストールしたら、Googleのアカウントでログインし、GoogleDriveにアクセスします。すると、アップロードしたファイルが左のカラムに表示され、ダブルクリックしてHTMLファイルを開いて編集もできます。
まとめ
ここまでHTML・CSSファイルを開くための方法をまとめてきました。メモ帳だとうまく表示されなかったり、コードの編集に非常に手間がかかりますが、コードエディターを使うと綺麗に表示されるようになります。
無料で使えるツールなので、HTMLを編集することがあるなら１つは持っておくと大変便利。
