HTMLはdreamweaverが無くても同じような機能が無料で使えるフリーソフト「Brackets」を見つけた！初心者WEBデザイナー必見。

はい、白兎（@shirousagi_memo）です！＾＾。

今日は仕事中に最強のHTMLエディターを見つけたのでそのご紹介。HTMLを組むときにdreamweaver（ドリームウィーバー）を使う人多いですよね？僕もその一人であの意UIに慣れてしまったので手の感覚がもうdreamweaverに慣れてしまって…

僕みたいにWEBデザイナーが家でブログやったりする時、ワードプレスとかいじりますよね？その時dreamweaverが絶対ほしくなるんですが、今の会社は特にコーディングをしないのでdreamweaverが入ってない….涙

でも今の世の中絶対無料あるはず！と思って必死で探しました（笑）

そしたらあったんです！dreamweaver張りの機能が実装されて、かつUIも同じような物が。びっくりです。

これで自宅のPCを買い替えても安心！

史上最強のエディタBrackets

▲…ちなみに画像は英語ですが、日本語化もすぐできます。まずはUIのご紹介ですが、凄くdreamweaverに似てませんか？噂によるとdreamweaver自体がこの「Brackets」を真似たみたいで凄く酷似してます。凄く使いやす。

しかもこのページ何が凄いって日本からアクセスすると自動で翻訳が掛って日本語表記ないります、なので簡単。

無料のHTMLエディターBracketsで出来る事

ちょっと僕が必要としてた事だけまとめますね。僕はHTMLを組むときにコードヒントを凄く使います。早いしいちいちスペル覚えなくていいので。なのでそれらを踏まえて….

2画面コーディング

dreamweaverに慣れている人なら絶対使う2画面。これはデフォルトであります。当然右左の変更も可能ですし、ほぼdreamweaverと同じだと思ってくれて大丈夫。めちゃ使いやすいです。

簡単プラグインでプレビュー

実はHTMLエディタ―を探していてこれが無い物が多かった！無料なのでしょうがないか？と思いながらも使い勝手悪いなー（無料なのに文句ばかり言う…ｗ）と思ってました。でも「Brackets」は違いました（笑）ドリームウィーバーよりも軽く、しかも何もしなくてもリアルタイムプレビューです。これは感動！

ただ、簡単ですが、プラグインを入れる必要があるのでちょっと書いておきます！

でプラグインを入れる事が出来ます。ワードプレスみたいですね！

で、肝心のプレビュー機能ですが…▼

• Response-for-Brackets

と言うプラグインを探してみてください！コレをインストールするとプラグインが使えるようになるんです。

実際プレビューする時は画面下の…

赤い矢印の稲妻のようなマークをクリックするとウインドウが開きます。当然別ウインドウでもアプリケーション内で2画面でも表示可能。何度も言いますがしかも軽い。メチャクチャ動作が軽い。ちょっと感動すら覚えるレベルです。

コードヒント機能

これ…凄く大事じゃないですか？

白兎だけかな？？？

コードヒントとは一応書いておくとdと入れたらdivとか出てくる予測変換的な物です。実際自分で直打ちする時って….withd? width?とか止まるんです（笑）

だってHTMLのコード全部なんて覚えてられない…大学受験並みの単語覚えないといけないし（笑）

これは何の設定をしなくてもデフォルトで設定されてます。なのでインストールした時からすぐに使える嬉しい機能ですね。

オープンソースなので常に進化

これはワードプレスと同じです。オープンソースなので、世界中の人がプラグインを提供したりして常に使いやすくなります。なのでワードプレスのHTMLエディタ版だと思えば間違いなしです。とにかくドリを使っていた人からすると凄く嬉しいエディターなのは間違いないです。

その他Bracketsで出来る事

Webコーディングを速く行うためのプラグイン

まとめ

 知らないと損するというのは正にコレだね。今までずっと家では古いdreamweaverを使っていたけど、これからは「Brackets」に移行します。まだ使い始めなので全部は知らないけど、かなり満足のいくHTMLエディタでした。特にdreamweaver重かったので少しストレスでもあった。やっぱり探すとあるもんだね。