主婦ママその他アーカイブ2020年1月(4)2019年12月(3)11月(6)10月(8)9月(5)8月(6)7月(7)6月(6)5月(4)4月(5)3月(6)2月(2)1月(4)2018年12月(6)11月(4)10月(8)9月(6)8月(7)7月(7)6月(8)5月(9)4月(11)3月(11)2月(7)1月(8)2017年以前の記事はコチラからプロが見て優秀なHTMLエディタ6選!現在使っているプロの感想付き2019.08.06ナレッジHTMLエディタはHTMLを記述(書く)する際に使うソフトです。タグの入力をサポート(自動補完)してくれたり、他のファイルと連携をとれたりするのでHTMLに触れる人(Webデザイナーやプログラマー)のほとんどが使っています。HTMLエディタは種類が複数あるので、どれを選べば良いのかわかりにくいです。HTMLエディタによって機能が異なることから、使ったことがない人にとっては良いHTMLエディタを選ぶのは難しいでしょう。そこで今回の記事では、まずHTMLエディタがどういったものなのか解説していきます。記事の後半でおすすめのHTMLエディタと、その使い方をご紹介するので参考にしてください。Codeの日本語化5-3.基本的な使い方5-4.最低限必要な拡張機能6.まとめ1.HTMLエディタとは?HTMLエディタとはテキストエディタと呼ばれる、テキストを編集するためのソフトです。Windowsの「メモ帳」やMacの「テキストエディット」もテキストエディタと言えます。テキストエディタの中でも、HTMLの編集に特化したものがHTMLエディタと呼ばれているのです。HTMLエディタはタグの入力をサポート(自動補完)する機能や、エラーを表示してくれる機能があるので、効率的にHTMLを記述することが出来ます。そのため、WebデザイナーやプログラマーといったHTMLに関わる人ほとんどがHTMLエディタを使っています。実際にHTMLコーディングに関わる人でHTMLエディタを使っていない人には、今のところ出会ったことがありません。それほどまでに、HTMLエディタを使うとHTMLコーディングの記述の負担が減り、作業効率が高まるのです。2.HTMLエディタで出来る4つのことHTMLエディタはただHTMLを記述出来るだけではなく、様々な機能があります。ここでは、その中でも代表的なHTMLエディタで出来る4つのことをご紹介します。「HTMLを記述する際のサポート」のはHTMLを記述する上で必須の機能だと言えるでしょう。2-1.HTMLを記述する際のサポートHTMLエディタはHTMLを記述する際のサポート機能(プラグインも含む)があるので、タグの入力にかかる手間を省いたりスペルミスを防ぐことができます。通常はHTMLを記述する時、開始タグと閉じタグの両方を記述する必要があります。(閉じタグを省略できる場合もある)しかし、HTMLエディタを使えば、開始タグを入れたり特定の文字を入れたりすることで閉じタグが自動で入力されるのです。自動補完の機能があれば記述ミスが起こりにくいので、初心者にありがたい機能と言えます。2-2.色付けされて見やすくなるHTMLエディタはタグの色分けや文章の色付けがされる機能があります。文字数が多くなるほどタグ同士の関係性がわかりにくくなったり、記述ミスが起きてしまいます。上記の画像のように色分けされていると、構造がわかりやすくなるのでどこに何が書いてあるのか理解しやすいです。HTMLは記述ミスが起こるとエラーになったり、正しく表示できなかったりするので特に初心者に必須の機能でしょう。2-3.プレビュー機能がついているHTMLエディタは、記述した内容がどのようにWeb上で表示されるのか確認できるプレビュー機能があります。メモ帳やテキストエディタでも確認することは出来ますが、手順を踏む必要があるので少し面倒です。HTMLエディタでは特定のキー(ショートカットキー)を押すだけで、瞬時にプレビューすることが出来ます。記述した内容がどのように表示されるのか確認しながら進めるので、作業効率が高まります。2-4.他のファイルとの連携がとれる多くのHTMLエディタはHTMLだけではなく、HTML以外の様々な言語も扱うことが出来るので同じエディタの中で編集することが可能です。HTMLを記述する際は、HTMLだけではなくCSS(文章の装飾)やJavaScript(動きをつける)といった言語も扱うことがほとんどです。その時に、別のファイルで各言語を管理しているとその都度違うファイルを開く必要があるので手間がかかってしまいます。HTMLエディタは他のファイルとの関連付けが簡単なので、コーディング(HTMLやCSSなどの記述)がより簡単になるのです。3.HTMLエディタを選ぶ際のポイントここからは、HTMLエディタを選ぶ際のポイントを2つお伝えします。HTMLエディタは確認出来るだけでも40種類以上あります。その中から自分に合った良いエディタを見つけるのは難しいです。ここでお伝えする2つのポイントを抑えれば、使いやすくて自分に合ったHTMLエディタを選べるでしょう。3-1.エディタの使い方を解説しているWebサイトが多いものを選ぶHTMLエディタは、機能で選ぶ前に「そのエディタの使い方を解説しているWebサイトが多い」ものを選ぶようにしましょう。多機能なHTMLエディタを選んでも、使い方がわからなければその機能を持て余してしまうからです。HTMLエディタは機能を追加する拡張機能(プラグイン)があります。機能を追加することでよりHTMLエディタが使いやすくなりますが、どのプラグインがどんな機能があるか見ただけではわからないでしょう。(表記が英語の場合もある)もしそのプラグインについて解説しているWebサイトがあれば、自分で調べて機能を追加することが出来ます。初心者は使い方を調べながらHTMLエディタを使うことが多いので、解説しているWebサイトが多いことはとても重要です。3-2.動きが軽いエディタを選ぶ次に、動きが軽いHTMLエディタを選ぶのも重要です。多機能なHTMLエディタであっても、動きが遅ければストレスを感じてしまうでしょう。HTMLエディタの乗り換えでよく聞くのが「動きが重たい」「飽きてしまった」などです。毎日HTMLエディタを使う人にとって、動きが重たいのはとてもストレスに感じてしまうのです。起動が遅いHTMLエディタも中にはあるので、なるべく動きが軽いHTMLエディタを選ぶようにしましょう。4.WebデザインスクールがおすすめするHTMLエディタ6選ここでは、HTMLエディタを選ぶ際のポイントを参考にして選んだHTMLエディタを6つご紹介していきます。それぞれの良いところや悪いところについてもご紹介するので、今後の参考にしてください。そのHTMLを使ったことがあるデジタルハリウッドSTUDIO札幌のトレーナー(Webデザイナー)の感想も集めたのでHTMLエディタ選びに役立ててください。※ここでご紹介するHTMLエディタはWindowsでもMacでも使うことが出来ます。Code(VSCodeとも呼ばれている)は、2015年にMicrosoft社(マイクロソフト)がリリースした無料のHTMLエディタです。HTML以外にもCSSやJavaScriptなど様々な言語に対応しています。優れているのがインテリセンスと呼ばれる自動補完の機能です。特定の文字を打つだけでHTMLが自動で記述されるので、HTMLを打つ手間が省けます。Codeはその中でも優秀だと言えます。使い方を解説しているWebサイトが多く、初心者でもおすすめ出来るHTMLエディタです。Codeの良いところはインテリセンスが優れているところです。インテリセンスは、特定の文字を打つとタグを一から打たなくても自動で生成されます。これがHTMLを記述する際の負担を減らしてくれます。起動や動作も軽くストレスなく使うことが出来ます。機能開発が早く、次々と機能が追加されるのも良いです。逆に不便に感じるところは、特に見当たりませんでした。言えば、たまに日本語にバグがあることくらいです。textは多くのWeb制作者に使われている無料で使えるHTMLエディタです。拡張機能によって自分が使いやすいHTMLエディタにカスタマイズすることが出来ます。操作画面がキレイだと一時話題に上がるほどデザインに優れており、多くの人を魅了しているHTMLエディタと言えます。with)」というキャッチフレーズがあるほどです。拡張機能を使うには多数のコマンドを覚える必要があるので、少し苦労してしまうかもしれません。そのため、使いこなすのに時間が必要なHTMLです。textは利用している人が多く、Webサイトに使い方が載っているので調べながら使うことで徐々に慣れるでしょう。textは取引先の企業が使っていて、そことの仕事を円滑にするために使い始めました。無料で使えるのにも関わらず、多数の拡張機能があってHTMLの記述をするのに苦労しません。動きも軽いことから、ストレスを感じずに仕事が出来ます。textはシェアウェアなので、有料版を無料で使える少しややこしいHTMLエディタです。そのため、何度も購入を促す表示を我慢するか、ライセンスを購入してしまえばとても使いやすいHTMLエディタだと思います。text3のダウンロードは公式サイトをタップしてください。公式サイト4-3.Atom(アトム)AtomはGithub社(ギットハブ)が開発した無料のHTMLエディタです。HTML以外にもCSSやJavaScriptなど様々な言語に対応しているので、他のファイルとの連携がとりやすいと言えます。拡張機能が豊富なHTMLエディタなので、自分好みにカスタマイズして使うことが可能です。Codeほどではありませんが、自動補完の機能も優れています。操作画面がシンプルで使いやすいので、全くの初心者はAtomがおすすめです。使っている環境によっては動作が重くなる可能性があるので、注意が必要でしょう。~Kトレーナーが使用した感想~Atomは無料で使えるのに拡張機能が豊富で、自由自在にカスタマイズ出来るので使いやすいです。私自身は動作が重いと感じたことがないので、人によるのかなと思います。不便に感じたことが、ソフトのアップデートに時間がかかることです。正確な時間は覚えていませんが、長いなと感じました。※Atomのダウンロードは公式サイトをタップしてください。公式サイト4-4.Brackets(ブラケッツ)BracketsはAdobe社(アドビ)が開発した無料のHTMLエディタです。標準でプレビュー機能がついているので、拡張機能を入れる必要がありません。デザインがシンプルで見やすく、HTMLの初心者でも使いやすいHTMLエディタです。使い方の解説をしているWebサイトが非常に多いので、使い方には困らないでしょう。Adobe社ではこの後にご紹介するDreamweaverもありますが、Bracketsは無料なのでお金をかけたくない人はBracketsを選びましょう。~Yトレーナー~BracketsはHTMLエディタをこれから使おうと思った時に、色々調べて選んだHTMLエディタです。初めはどのHTMLエディタが良いのか正直わからないので、使いやすそうだなと思って選びました。その結果、とても使いやすく今のところ他の他のHTMLエディタを使おうとは思いません。拡張機能も豊富なので、特に他のエディタを使う必要がないからです。1つ不便だと感じるのが、たまにプレビューが出来なくなることです。原因が不明で調べても解決することが出来ませんでした。いつの間にかプレビュー出来るようになっているので、ここが手間かなと思います。※Bracketsのダウンロードは公式サイトをタップしてください。公式サイト4-5.webstorm(ウェブストーム)webstormはJetBrains社(ジェットブレインズ)が開発した「有料」のHTMLエディタです。有料で使えるHTMLエディタの中で最も人気があるもののひとつです。自動補完の機能が優秀で、無駄な記述を減らすことが出来ます。何か特定の文字を入力するだけで、HTMLの記述を自動で行ってくれるのでより効率的にHTMLの記述が可能です。有料なだけあって機能が豊富なので、本格的にHTMLエディタを使いたい人は選ぶと良いでしょう。最初の30日間は無料(通常6,800円~:2019年7月時点)で使えるので、お試しで使うことも出来ます。※webstormのインストールは公式サイトをタップしてください。公式サイト4-6.Dreamweaver(ドリームウィーバー)DreamweaverはAdobe社(アドビ)が販売している「有料」のHTMLエディタです。使用するにはAdobeのアカウントに登録して、購入する必要があります。(Dreamweaver単体プランで税別2,480円~:2019年7月時点)ですが、コンプリートプランに入っていて、既にPhotoshop(フォトショップ)やIllustrator(イラストレーター)を使っている人はセットで使えます。自動補完で閉じタグの記述を省略できるので、効率よくHTMLを記述することが出来ます。※Dreamweaverのダウンロードは公式サイトをタップしてください。Codeを使ってみました。Codeは使いやすさもありますが、機能の開発が早いことで日々新しくなっていくWebの世界に対応することが出来ます。不便に感じるところも少ないことから、初心者でも扱いやすいと感じました。Codeのインストール方法や、基本的な使い方をご紹介していくのでこれからHTMLエディタを使う人は参考にしてください。CodeはMicrosoft社の公式サイトからダウンロードすることが出来ます。公式サイトにアクセスして、ダウンロードボタンをクリックしましょう。※ここではMacでのインストール方法をご紹介しています。するとZipデータをダウンロードすることが出来ます。Code.app」というファイルが作られます。このファイルを「アプリケーション」のフォルダに移動させましょう。Codeのインストールは終了です。Codeは初めて開くとウエルカムページが表示されます。この英語画面では、ここを見ている方のほとんどが使いにくいと思うでしょうから、日本語化をしましょう。左下の赤丸がついているボタンをクリックします。Pack」という拡張機能をインストールします。左上の検索窓にJapaneseといれると検索候補がでてきます(画面のように途中でもでてきます)。Pack」をクリックしてinstallをクリックすると拡張機能がインストールできます。Codeの日本語化は完了です。5-3.基本的な使い方ウエルカムページのままではどこからHTMLを記述すると良いのかわかりません。そこで、画面左上(エクスプローラー)にあるフォルダからHTMLのフォルダを作成すると、エディタ上でHTMLの編集をすることが出来ます。編集したHTMLのファイルは「command+S(Mac)」で保存出来ますが、自動保存の設定をしておけば自動的に保存してくれます。Save」を選択して、自動保存の設定をしてください。ここまで出来れば、HTMLの記述が出来るので他の操作については徐々に慣れていくようにしましょう。Codeを使ってみた結果、最低限必要だなと思う拡張機能が3つあります。Packは必ず入れたい拡張機能だと言えます。他にも拡張機能は多数ありますが、まずは最低限ここでご紹介する拡張機能を利用しましょう。6.まとめHTMLエディタはHTMLを記述するのに特化されたテキストエディタのことでした。40種類以上のHTMLエディタがありますが、最初に使ったものを慣れるまで使うことをおすすめします。HTMLエディタは機能が豊富な反面、他のHTMLエディタを使うと機能を覚えるまでに時間がかかるからです。最初のHTMLエディタ選びは重要だと言えます。ここで紹介した6つのエディタは実際に使っている人も多くておすすめなので、今後の参考にしてください。