【あつまれどうぶつの森】服のおすすめマイデザインまとめ【あつ森】
プロが見て優秀なHTMLエディタ6選！現在使っているプロの感想付き 2019. 06 ナレッジ HTMLエディタは HTMLを記述 書く する際に使うソフトです。 タグの入力をサポート 自動補完 してくれたり、他のファイルと連携をとれたりするのでHTMLに触れる人 Webデザイナーやプログラマー のほとんどが使っています。 しかし、HTMLエディタは種類が複数あるので、どれを選べば良いのかわかりにくいです。 HTMLエディタによって機能が異なることから、使ったことがない人にとっては 良いHTMLエディタを選ぶのは難しいでしょう。 そこで今回の記事では、まずHTMLエディタがどういったものなのか解説していきます。 記事の後半でおすすめのHTMLエディタと、その使い方をご紹介するので参考にしてください。 HTMLエディタとは？ HTMLエディタとはテキストエディタと呼ばれる、テキストを編集するためのソフトです。 Windowsの「メモ帳」やMacの「テキストエディット」もテキストエディタと言えます。 つまり、テキストエディタの中でも、 HTMLの編集に特化したものがHTMLエディタと呼ばれているのです。 HTMLエディタはタグの入力をサポート 自動補完 する機能や、エラーを表示してくれる機能があるので、効率的にHTMLを記述することが出来ます。 そのため、WebデザイナーやプログラマーといったHTMLに関わる人ほとんどがHTMLエディタを使っています。 実際にHTMLコーディングに関わる人でHTMLエディタを使っていない人には、今のところ出会ったことがありません。 それほどまでに、HTMLエディタを使うとHTMLコーディングの記述の負担が減り、 作業効率が高まるのです。 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などの記述 がより簡単になるのです。 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エディタを選ぶようにしましょう。 WebデザインスクールがおすすめするHTMLエディタ6選 ここでは、HTMLエディタを選ぶ際のポイントを参考にして選んだHTMLエディタを6つご紹介していきます。 それぞれの良いところや悪いところについてもご紹介するので、今後の参考にしてください。 また、そのHTMLを使ったことがあるデジタルハリウッドSTUDIO札幌のトレーナー Webデザイナー の感想も集めたのでHTMLエディタ選びに役立ててください。 4-1. Visual Studio Code ヴィジュアルスタジオコード Visual Studio Code VSCodeとも呼ばれている は、2015年にMicrosoft社 マイクロソフト がリリースした無料のHTMLエディタです。 HTML以外にもCSSやJavaScriptなど様々な言語に対応しています。 特に優れているのがインテリセンスと呼ばれる自動補完の機能です。 特定の文字を打つだけでHTMLが自動で記述されるので、HTMLを打つ手間が省けます。 他のエディタでもインテリセンスはありますが、Visual Studio Codeはその中でも優秀だと言えます。 使い方を解説しているWebサイトが多く、初心者でもおすすめ出来るHTMLエディタです。 ～Sトレーナーが使用した感想～ Visual Studio Codeの良いところはインテリセンスが優れているところです。 インテリセンスは、特定の文字を打つとタグを一から打たなくても自動で生成されます。 これがHTMLを記述する際の負担を減らしてくれます。 また、起動や動作も軽くストレスなく使うことが出来ます。 機能開発が早く、次々と機能が追加されるのも良いです。 逆に不便に感じるところは、特に見当たりませんでした。 強いて言えば、たまに日本語にバグがあることくらいです。 Sublime text3 サブライムテキスト Sublime textは多くのWeb制作者に使われている無料で使えるHTMLエディタです。 拡張機能によって自分が使いやすいHTMLエディタにカスタマイズすることが出来ます。 操作画面がキレイだと一時話題に上がるほどデザインに優れており、多くの人を魅了しているHTMLエディタと言えます。 しかし、拡張機能を使うには多数のコマンドを覚える必要があるので、少し苦労してしまうかもしれません。 そのため、使いこなすのに時間が必要なHTMLです。 Sublime textは利用している人が多く、Webサイトに使い方が載っているので調べながら使うことで徐々に慣れるでしょう。 ～Kトレーナー～ Sublime textは取引先の企業が使っていて、そことの仕事を円滑にするために使い始めました。 無料で使えるのにも関わらず、多数の拡張機能があってHTMLの記述をするのに苦労しません。 動きも軽いことから、ストレスを感じずに仕事が出来ます。 Sublime textはシェアウェアなので、有料版を無料で使える少しややこしいHTMLエディタです。 そのため、何度も購入を促す表示を我慢するか、ライセンスを購入してしまえばとても使いやすいHTMLエディタだと思います。 4-3. Atom アトム AtomはGithub社 ギットハブ が開発した無料のHTMLエディタです。 HTML以外にもCSSやJavaScriptなど様々な言語に対応しているので、他のファイルとの連携がとりやすいと言えます。 拡張機能が豊富なHTMLエディタなので、自分好みにカスタマイズして使うことが可能です。 Visual Studio Codeほどではありませんが、自動補完の機能も優れています。 操作画面がシンプルで使いやすいので、全くの初心者はAtomがおすすめです。 ただし、使っている環境によっては動作が重くなる可能性があるので、注意が必要でしょう。 ～Kトレーナーが使用した感想～ Atomは無料で使えるのに拡張機能が豊富で、自由自在にカスタマイズ出来るので使いやすいです。 私自身は動作が重いと感じたことがないので、人によるのかなと思います。 少し不便に感じたことが、ソフトのアップデートに時間がかかることです。 正確な時間は覚えていませんが、長いなと感じました。 4-4. Brackets ブラケッツ BracketsはAdobe社 アドビ が開発した無料のHTMLエディタです。 標準でプレビュー機能がついているので、拡張機能を入れる必要がありません。 デザインがシンプルで見やすく、HTMLの初心者でも使いやすいHTMLエディタです。 使い方の解説をしているWebサイトが非常に多いので、使い方には困らないでしょう。 同じくAdobe社ではこの後にご紹介するDreamweaverもありますが、Bracketsは無料なのでお金をかけたくない人はBracketsを選びましょう。 ～Yトレーナー～ BracketsはHTMLエディタをこれから使おうと思った時に、色々調べて選んだHTMLエディタです。 初めはどのHTMLエディタが良いのか正直わからないので、使いやすそうだなと思って選びました。 その結果、とても使いやすく今のところ他の他のHTMLエディタを使おうとは思いません。 拡張機能も豊富なので、特に他のエディタを使う必要がないからです。 1つ不便だと感じるのが、たまにプレビューが出来なくなることです。 原因が不明で調べても解決することが出来ませんでした。 いつの間にかプレビュー出来るようになっているので、ここが手間かなと思います。 4-5. webstorm ウェブストーム webstormはJetBrains社 ジェットブレインズ が開発した「有料」のHTMLエディタです。 有料で使えるHTMLエディタの中で最も人気があるもののひとつです。 自動補完の機能が優秀で、無駄な記述を減らすことが出来ます。 何か特定の文字を入力するだけで、HTMLの記述を自動で行ってくれるのでより効率的にHTMLの記述が可能です。 有料なだけあって機能が豊富なので、本格的にHTMLエディタを使いたい人は選ぶと良いでしょう。 最初の30日間は無料 通常6,800円～:2019年7月時点 で使えるので、お試しで使うことも出来ます。 4-6. Dreamweaver ドリームウィーバー DreamweaverはAdobe社 アドビ が販売している「有料」のHTMLエディタです。 使用するにはAdobeのアカウントに登録して、購入する必要があります。 Dreamweaver単体プランで税別2,480円～:2019年7月時点 ですが、コンプリートプランに入っていて、既にPhotoshop フォトショップ やIllustrator イラストレーター を使っている人はセットで使えます。 自動補完で閉じタグの記述を省略できるので、効率よくHTMLを記述することが出来ます。 Visual Studio Codeを使ってみた 今回の記事では例として、実際にWebデザインスクールがおすすめするHTMLエディタ6選でご紹介した、Visual Studio Codeを使ってみました。 Visual Studio Codeは使いやすさもありますが、機能の開発が早いことで 日々新しくなっていくWebの世界に対応することが出来ます。 不便に感じるところも少ないことから、初心者でも扱いやすいと感じました。 そのVisual Studio Codeのインストール方法や、基本的な使い方をご紹介していくのでこれからHTMLエディタを使う人は参考にしてください。 5-1. Visual Studio Codeのインストール方法 Visual Studio CodeはMicrosoft社の公式サイトからダウンロードすることが出来ます。 まずはにアクセスして、ダウンロードボタンをクリックしましょう。 そうするとZipデータをダウンロードすることが出来ます。 Zipデータをダブルクリックして開く 解凍 と「Visual Studio Code. app」というファイルが作られます。 このファイルを「アプリケーション」のフォルダに移動させましょう。 これでVisual Studio Codeのインストールは終了です。 5-2. Visual Studio Codeの日本語化 Visual Studio Codeは初めて開くとウエルカムページが表示されます。 ただこの英語画面では、ここを見ている方のほとんどが使いにくいと思うでしょうから、日本語化をしましょう。 左下の赤丸がついているボタンをクリックします。 今回は「Japanese Language Pack」という拡張機能をインストールします。 左上の検索窓にJapaneseといれると検索候補がでてきます（画面のように途中でもでてきます）。 「Japanese Language Pack」をクリックしてinstallをクリックすると拡張機能がインストールできます。 こちらでVisual Studio Codeの日本語化は完了です。 5-3. 基本的な使い方 ウエルカムページのままではどこからHTMLを記述すると良いのかわかりません。 そこで、画面左上 エクスプローラー にあるフォルダからHTMLのフォルダを作成すると、エディタ上でHTMLの編集をすることが出来ます。 下記の画像のようにFileメニューから「Auto Save」を選択して、自動保存の設定をしてください。 まずはここまで出来れば、HTMLの記述が出来るので他の操作については徐々に慣れていくようにしましょう。 5-4. 最低限必要な拡張機能 Visual Studio Codeを使ってみた結果、最低限必要だなと思う拡張機能が3つあります。 ・Japanese Language Pack：日本語表記になる（を参照）• ・Bracket Pair Colorizer：どのタグがどのタグのペアかわかりやすく色分けされる• ・Auto Rename Tag：開始タグを入れると自動で閉じタグが記述される 特にVisual Studio Codeは標準だと英語表記なので、Japanese Language Packは必ず入れたい拡張機能だと言えます。 他にも拡張機能は多数ありますが、まずは最低限ここでご紹介する拡張機能を利用しましょう。 まとめ HTMLエディタはHTMLを記述するのに特化されたテキストエディタのことでした。 40種類以上のHTMLエディタがありますが、最初に使ったものを慣れるまで使うことをおすすめします。 HTMLエディタは機能が豊富な反面、他のHTMLエディタを使うと機能を覚えるまでに時間がかかるからです。 だからこそ、最初のHTMLエディタ選びは重要だと言えます。 ここで紹介した6つのエディタは実際に使っている人も多くておすすめなので、今後の参考にしてください。
次の
