Adobe – オープンソースコードエディター『Brackets』


Bracketsを使ってみよう

サイト作成に皆さんは何を使ってコードの記述をしているのでしょうか?

Dreamweverが多いのでしょうか。Sublime Textも人気があるようですが、今回のおすすめは「Brackets」です。
Bracketsとは、Adobe社製のHTML/CSS/JavaScriptで作られている、HTML/CSS/JavaScriptを扱うWeb 開発者およびデザイナー向けの軽量なコードエディターです。そして無料なのです。
*Edge Codeの開発が中止されBracketsがそのあとを継いだようです。
またSublime Textは英語メニュー(日本語の入力は可)となっていますが、「Brackets」は日本語メニューが利用出来るのです。

どんな機能があるのか、ほんの一部分を以下に

  • その場でインライン編集できるようにする“クイック編集”
  • 編集中のHTMLファイルのリアルタイムプレビューを行う“ライブプレビュー”
  • HTML/CSS/JavaScriptのコード補完機能
  • カラースウォッチのプレビューなど、CSS/LESS/SCSS で標準の名前付きカラーのコードヒント
  • ドラッグ&ドロップでテキストを並べ替え
  • 拡張機能も利用可能。
  • PSDファイルからレイヤーの位置やサイズ、色といった情報を抽出し、CSSコードを出力する拡張機能「Extract」など。

Bracketsのインストール

brackets1


Download Brackets 1.2をクリックしてダウンロード(2015/03/07現在)
ダウンロードしたBrackets.1.2.Extract.msiを実行してインストール。
インストールが完了したらBrackets.exeを実行してみましょう。
(自環境ではショートカットは出来ず[C:\Program Files (x86)\Brackets]内にありました。)
起動画面
brackets


2ペイン表示
brackets


候補の表示もあり使いやすい
brackets


カラー候補
brackets


開始タグと終了タグをハイライト
開始タグをクリックするとその終了タグをハイライトしてくれる。わかりやすい!
brackets


クイック編集
HTMLタグ右クリックでCSS編集画面が表示されるので手間が省けます。
brackets


ライブプレビュー
右側のボタンを押すとChromeが立ち上がりプレビュー画面を確認することが出来る。
brackets


拡張機能についてはまたの機会に。。。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL