htmlのコーディングを快適にしましょう！その１・Brackets編

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

Bracketsの特徴

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

ライブプレビュー

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

入力補助機能

簡略化したhtmlを書くと自動で補完してくれます。

クイック編集機能

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

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

Bracketsからインストールします。
Bracketsはデフォルトで日本語に対応しています。
画面が開いたら、「Download Brackets」ボタンを押してください。

ダウンロードしたファイルを開くとインストールが始まります。そのまま「NEXT」、「Install」を押してください。

しばらくするとインストールが完了します。「Finish」を押してください。

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

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

ライブプレビュー

とりあえず自分のウェブサイトかヘルプファイルを開いてみましょう。
ctrl＋alt＋PかBracketsの右上にあるイナズマボタンを押してください。Chromeが立ち上がりプレビューできます。

このままBracketsで編集するとそのままリアルタイムで反映されます。ブラウザのデベロッパーツールなどを使っていると、画面確認後再度エディタで編集しなおさなければなりませんが、ブラウザを見ながらhtml、CSS編集できるので便利です。