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

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

メモ帳でもHTMLを書いたりファイルを開いたりすることはできるんですが、ダウンロードしたテンプレートなどの場合改行がなく、見づらくなっていることもあります。

HTMLファイルをメモ帳で開くと文字化けする

このような症状はHTMLに限らずWordpressのテンプレートやCSSファイルを開いたときにも発生することがあり、この状態で編集するのはかなり難しいです。

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

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

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

どのソフトもWindowsでもMacでも使えます。

無料のコードエディター

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

Visual Studio Code 無料のおすすめコードエディター Visual Studio Code

最近Web開発者やWebデザイナーの間で人気なのがこのVSCode。Googleのカンファレンスや海外の動画を見てもみんなこれ使ってる感じです。

様々な機能を追加できる拡張機能や変更可能なショートカット、スニペットの登録などなど基本的なところを抑えつつ軽量な動作を実現。

Atom 無料のおすすめコードエディター Atom

2つめはAtom。こちらも人気の高いエディター。Github製ということもありGithubとの連携が素晴らしいです。GithubのヘビーユーザーならAtomがおすすめ!

IDEのような機能を追加できる「Atom IDE」で機能をグレードアップできたり、同じコードを複数人が同時に編集できる「TeleType」という機能も使えるすごいやつです。

Brakets 無料のおすすめコードエディター Brakets

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

Copyright © 2022 homupedia.com