ブログ

スタッフブログ

webデザイナー募集中webデザイナー募集中

Brackets_eyecatch

こんにちは!アウラコーダーの仁木です。

コーディングをする時に普段使っているエディターは、人によって様々なソフトが使われていると思います。僕はAdobeの「Dreamweaver」やPanic Inc.の「Coda2」というソフトを使っています。
もしかしたらメモ帳などでコーディングをしている強者な方もいるのかもしれませんが、やっぱり自分にあった、便利な機能がついているソフトで作業をしたいものです。。

そこで今回は個人的にすごく魅力を感じたAdobe社のフリーの開発エディターソフト「Brackets」の紹介をしたいと思います!

Sassも使えるおすすめエディター「Brackets」

brackets-intro

BracketsはAdobeが提供しているオープンソースの開発ソフトで、WindowsとMac両方に対応しています。そしてちゃんと日本語にも対応しています。さすがAdobeです。
拡張機能も豊富で、好きな機能をインストールして使い勝手の良いようにカスタマイズしていけます。もちろんデフォルトで組み込まれている機能だけでも充分に使えますので、いくつかピックアップして紹介していきます。

CSSのスタイルが一瞬で確認できます!

まず一番初めにこのBracketsを使ってみたいと、心を動かされた機能がこのCSSのクイック編集です。
新しくスタイルを適用したい、もしくは適用されているスタイルを調べたい時にその要素やクラス名、ID名にカーソルを合わせて、「Ctrl」+「E」を押すとクイック編集ウインドウが現れてすぐにCSSの編集をすることが出来ます。わざわざブラウザで検証してスタイルを確認しなくてもエディター内だけで済んでしまいます。
しばらく触っていなかったサイトなどで、修正が必要になったときに役立ちそうな機能ですね。

ブラウザチェックが便利なライブプレビュー機能

プレビュー機能はHTMLをメインに扱うエディターにはよくある機能だと思いますが、Bracketsのライブプレビュー機能も編集中のファイルを変更すると即座にブラウザに反映されます。
CSSも変更した瞬間にスタイルが変わって表示されます。

拡張機能やエディターのテーマが豊富

拡張機能のフォルダーを開くと何百種類もの拡張機能を検索し、インストールすることが出来ます。僕は手始めに”emmet”と”SASS”の拡張機能をインストールしてみましたが、検索してインストールボタンを押すだけであっという間に機能を追加することが出来ました。便利です。
テーマもその時の気分に合わせて色々かえられて良いですね。

SASSも使えます

Dreamweaverだと扱いづらいSASSのファイルもBracketsはエディター自体に何も手を加えずに使うことが出来ます。


まとめ

上に挙げたもの以外にも、HTMLファイルの画像のURLにカーソルをホバーするだけで画像の中身を確認できたり、カラーコードの変更もカラーピッカーからパパッと変更できます。もちろんテキストの検索・置換も
だいたい僕が普段Dreamweaverで使っている機能にプラスして痒いところにもちゃんと手が届いているエディターで、シンプルなのにちゃんと仕事にも使えるいいエディターです。気軽に導入できるのでぜひ一度試してみてください。

Tweet about this on TwitterShare on Google+Share on FacebookPin on Pinterest
webデザイナー募集中webデザイナー募集中

株式会社アウラ 松永巳知子 社長ブログ

webデザイナー募集中

お電話からのお問い合わせはこちら

お気軽にご相談ください。 06-6292-8577 【電話受付】 10:00~18:30(平日)

インターネットから24時間受付中
お問い合わせ専用フォーム 24時間受付中!

御社のホームページ、ご活用されていますか? インターネットからのお問い合わせは24時間受付中

御社のホームページ、ご活用されていますか?