okiami1983のブログ

クオリティーが低い記事はあとで書き直します。。

エディタBracketsはhtmlやcss3のコーディングに便利。

以前Atomが良いという記事を書きましたが、htmlとcss3をコーディングするときにはもっと便利なエディタがあることがわかりました。

 

Bracketsです。

 

Bracketsの画面はこんな感じ。Atomと同じような感じです。

f:id:okiami1983:20160321095905p:plain

 

◎最大の特徴 クイック編集機能で素早くcssを編集する!

Webサイトを作成しているときよくあるのが、見た目を微調整するためにcssファイルを触ることです。このときはまず.htmlで該当箇所を探して、さらに対応するcssファイルの場所を探しにいくという手順。‥けっこう手間ですよね。 

 

Bracketsなら、クイック編集機能を使って素早くcssファイルが編集できます↓。cssファイルの該当箇所が自動的に表示され、そのまま編集できます。マウスの右クリック、またはショートカットキーのどちらでもOK。

f:id:okiami1983:20160321100417p:plain

f:id:okiami1983:20160321100445p:plain

 

 

 

他にも便利な機能が。

さらに、 編集中のhtmlをChoromeに表示させる機能(ライブプレビュー)もあります。Bracketsの基本機能はこちらのページで紹介されていて、参考になります。

【オープンソース】Adobe Brackets を使ってみたよ【テキストエディタ】 | Developers.IO

 

もちろん、プラグイン機能で拡張性もばっちりです。拡張機能はこちらのページが参考になりそうです。

コーディングを超加速するBrackets便利エクステンションまとめ - WEBCRE8.jp

  

Webの業界は、探せば便利なものがたくさんあるンですねえ。

 

 

今回の情報源はこちら。 

フロントエンドエンジニアのための現在とこれからの必須知識

フロントエンドエンジニアのための現在とこれからの必須知識