無料エディター「Brackets」がすごい!

ツール

無料エディター「Brackets」がすごいよ!

 

Bracketsをご存知でしょうか。PhotoshopやIllustratorで有名なAdobeが作成しているエディタです。これ、すごいんです。無料でここまでできるなんて!!そう感じました。

今回はBracketsをご紹介します。

Bracketsとは

BracketsはHTML、CSS、JavaScriptの作成に使用できるオープンソースのエディタです。

PCにインストールして使用するタイプのエディタで、Windows、Mac等で利用できます。

brackets-1

HTML、CSS、JavaScript

C言語やPHP、Rubyなどの主要な言語でシンタックスハイライト機能が用意されているので、大抵の言語で問題なく利用できます。

 

インストールが簡単な上、インストール直後から日本語で表示されるので、オススメです。

 

インストール

インストールはファイルをダウンロードして、実行するだけ。非常に簡単です。そのため割愛します。

 

起動&使ってみる

「Brackets」をクリックして起動します。

brackets-2

 

起動しました。日本語で表示されているのがわかります。

brackets-3

 

ハイライト!

早速操作してみます。<head>の箇所にマウスのカーソルを移動するとハイライトされて色が変わります。

brackets-4

 

折りたたみ

<head>の前にある「▼」をクリックすると、以下のように<head>タグで囲まれた箇所が折りたたまれます。

brackets-5

 

CSSでもハイライト!

ハイライトはCSSでもされます。

brackets-6

 

CSSでも折りたたみ!

折りたたみはCSSでも可能です。brackets-7

 

ライブプレビュー

ライブビュー、この機能はすばらしいです!

以下のように実行します。

brackets-8

 

確認画面で「OK」を押します。

brackets-10

 

すると、編集中の画面がブラウザで表示されます。

brackets-9

 

タイトルを編集してみましょう。

brackets-11

 

BRACKETSの画面に「かもとら」と入力すると、リアルタイムでブラウザにも表示されます!

brackets-12

 

カタカナに変換。それもそのまま反映されます。

brackets-13

 

ライブビューのすごいところはそれがCSSでも反映されるところ。

タイトルの色を変えてみます。

brackets-14

右クリックして「クイック編集」を選択します。

brackets-15

カラーピッカーが表示され、色をピッカーで色を選択するとブラウザでも色が変化してきます。こりゃすごい。

brackets-16

 

まとめ

Bracketsについて簡単にですが紹介してきました。ほかにもテーマ機能があったり、機能の拡張ができたりと、本当に素晴らしいエディタです。こんなすばらしいものを無料で使ってOKなんて、ありがたい限りです。

カモトラはPhpStormというエディタで開発を行っているのですが、こちらのエディタも少しずつ使っています。(2016年10月時点で、使用暦4ヶ月程度ですが)

PhpStormも非常に使いやすいエディタです。ただ有料なんですよね。

なので、「無料でオススメは?」と聞かれたら迷わず「Brackets」と答えますね。

ぜひ一度この素晴らしさを体験してみてください。

Secured By miniOrange
タイトルとURLをコピーしました