コーディングを快適にしましょう!その1・Brackets編
皆さんこんにちは。フローラです。
星の数ほどあるテキストエディタですが、皆さまテキストエディタは何をお使いですか?
最近はとっても便利な機能を搭載しているものが多々あります。エディタそのものの機能だけではなくプラグインも充実していると便利ですね。
ご存知の方も多いと思いますが、今回はBracketsをご紹介したいと思います。

Bracketsの特徴

Bracketsはadobe製品の高機能テキストエディタです。
特にHTMLのコーディングには優れた威力を発揮してくれます。
主な特徴としては、

  • ライブプレビュー
  • ブラウザで即時に反映され、コピー&ペーストで書き直す必要もありません。ただしChromeがインストールされている必要があります。

  • 入力補助機能
  • 簡略化したhtmlを書くと自動で補完してくれます。

  • クイック編集機能
  • htmlファイルでcssのスタイルを呼び出し編集出来たり、cssファイルでカラーコードを視覚的に確認しながら編集できます。

では、インストールしましょう

Bracketsからインストールします。
Bracketsはデフォルトで日本語に対応しています。
画面が開いたら、「Download Brackets」ボタンを押してください。
Bracketsインストール画面
ダウンロードしたファイルを開くとインストールが始まります。そのまま「NEXT」、「Install」を押してください。
Bracketsインストール画面
Bracketsインストール画面
しばらくするとインストールが完了します。「Finish」を押してください。

早速Brackets使ってみましょう!

一番最初はヘルプファイルが開きます。基本的な使い方が掲載されているので読んでみると良いでしょう。
ちなみに末尾にはカッコイイ?Bracketsのアスキーアートが貼られています。
Brackets

  • ライブプレビュー
  • とりあえず自分のウェブサイトかヘルプファイルを開いてみましょう。
    ctrl+alt+PかBracketsの右上にあるイナズマボタンを押してください。Chromeが立ち上がりプレビューできます。
    Brackets
    このままBracketsで編集するとそのままリアルタイムで反映されます。ブラウザのデベロッパーツールなどを使っていると、画面確認後再度エディタで編集しなおさなければなりませんが、ブラウザを見ながらhtml、CSS編集できるので便利です。

  • html,CSSの入力補助機能
  • 簡略化したhtmlを書くと自動で補完してくれます。

  • クイック編集機能
  • htmlファイルでcssのスタイルを呼び出し編集出来ます。コード上で右クリック-「クイック編集」または、ctrl+Eで使えます。
    Brackets
    cssファイルでカラーコードを視覚的に確認しながら編集できる機能はとても便利です!
    カラーピッカーを使い色を変更することができます。
    Brackets

  • 画像を視覚で確認できる
  • コード編集していると何の画像か分かりにくいものですが、Bracketsではマウスオーバーするだけで画像のプレビューウィンドウが表示されるので、画像の編集作業もとっても楽です。
    Brackets

最後に・・・

今回ざっくりご紹介しましたが、これだけでも機能多彩ですね。
Bracketsは拡張機能も豊富にありますので、「他にもこんな機能がほしい!」などある時はきっと見つかると思いますので、是非使い込んでみてください!

投稿者プロフィール

フローラ
フローラ
久しぶりにWEB制作の仕事に戻りました。
WEB制作に関する新しい情報をたくさん掲載し、自分自身もスキルアップをしていきたいと思っています!