Bracketsを使ってみた

HTMLやCSSを書き慣れていない人にオススメ、無料のテキストエディタ「Brackets」 | 簡デザ −かんたんデザインブログ−

すごいのは、HTMLやCSSを書いたすぐそばから反映してくれること。保存とか、再読み込みとかしなくてもすぐに反映されるので、見ながらコード書いたりもできます。
史上最強のエディタBracketsに出会ってしまった | Planner(プランナー) クリエイティブの壺ツボ

初期搭載されている機能がすごい
コーディングを超加速するBrackets便利エクステンションまとめ - WEBCRE8.jp

便利過ぎワロタ系のやつです。編集中のHTMLが読み込んでいるCSSのセレクターに書かれているclassとIDが、属性値の記述時にコードヒントとして出てきます。
Atomを最近知ったばかり…。
そんな人が書いている記事なので、詳しい情報は上記リンク先をみたほうがいいと思います。
ただ、バージョンによって挙動が異なるようで…。

Chromeが再起動される欠点がある、デベロッパーツールが使えない→Brackets1.12+Chrome64では問題ないようです。
Bracketsのライブプレビューを使うと、別のユーザープロファイルを持つChromeが多重起動。デベロッパーツールを使う事もできる…と思います。
こちらで把握しきれていない何かがあるのかもしれませんが…。
Shizimily Multi-Encoding for Brackets
Brackets1.12はUTF-8、Shift_JISを自動で判別します。
Brackets1.12にShizimily Multi-Encoding for Bracketsをインストールすると、動作しなくなるため注意が必要です。

これまでDreamweaver8で行ってきた趣味のWebサイトの維持管理ができれば問題ないので、すでに作成しているコンテンツで試してみました。

Brackets
Brackets

画像の挿入。

画像ファイルを一覧から選ぶだけ。
タグも、Emmetという拡張機能をインストールしていればimgと書いてTabキーを押すだけで
<img src="" alt="">
まで入力される。

Brackets

右クリックでCSSのクイック編集。

リンクしていないファイルの一覧も出てくるから面倒…と思いましたが、IE8用の設定まで見渡す事ができたり…。

Brackets

CSSの定義一覧。クリックすると該当行に移動。

Brackets

HTMLエンティティのエンコード。

Brackets

ライブプレビュー。ブラウザを選択すると、ソースの該当箇所のタグがハイライトされる。ソースを選択するとブラウザの該当箇所がハイライトされる。
ソースを編集すると、保存していなくてもプレビューに反映される。

Dreamweaver8でもプレビュー画面をみながらソースを編集、という事が多かったのでこれで十分です。
Brackets CSS Class Code hint
Brackets Icons
CSSFier
Emmet
Highlight Multibyte Symbols
More HTML5 Code Hints + Fat-Free Framework Template Tags
右クリック拡張
W3C Validation (by Umoxfo)

Bracketsにインストールしている拡張機能。
posted by さとぴあ at 2018/03/10 09:18 | Web制作

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。