こんにちは、えんぞーです。
さて今回導入してみたのはSiblimeText2のプラグインである「Emmet LiveStyle」です。
巷で話題になっていたので後で入れてみようと思いつつすっかり忘れていて現在に至りました。
あっちを弄ってもこっちを弄っても即反映！
結論から言うと、「黙って使え」レベルの至高ツールです。
具体的にどんな事になるのかというと、↓この動画を見て下さい。
見て貰うと分かると思いますが、
ブラウザのDOMインスペクタ（CSSの値を変えたりする場所：デベロッパーツール）で編集を行うとSublimeTextで開いているCSSファイルの値が書き換わり、逆にSublimeText上でCSSを編集するとブラウザ上のCSSが書き換わるという非常に便利な現象がおきます。
これ、何が便利と言うとリアルタイムで表示を確認しながら作業出来ると言う事になりますよね。
今までだとブラウザ上で値を調整してからエディタにコピペなり入力なりして2ステップかかっていたものが1ステップで可能です。
う～ん、これはいよいよDreamweaverいらなくなってきたかも知れない。
導入方法してみよう！
簡単にではありますが導入までの流れを。
SublimeTextは既にパッケージコントロールが導入されている前提になります。
まずは「Ctrl」+「Shift」+「P」を押してコマンドパレットを呼び出してパッケージコントロールを起動します。
次にパッケージコントロールで「LiveStle」を探してインストールします。
これでSublimeTextの方は完了です。
次にChromeの拡張をインストールするのでChromeでこちらのページに移動して拡張機能をインストールして下さい。
拡張機能のインストールが完了したら導入は完了ですъ（´д｀）ｸﾞｯ
早速使ってみる
では編集してみたいサイトをChromeで開いてみましょう。
あと、そのサイトで編集するCSSのファイルも読み込んで置きましょう。
CSSをSublimeTextで開きます。
WEBサイトをChromeで開きます。
開いたらChromeで「F12」キーを押してDOMインスペクタ（デベロッパーツール）を表示させます。
すると、「LiveStyle」というタブが増えていると思いますのでそちらをクリックします。
クリックしてタブを切り替えると下記画像の様なチェックボックスを付けるページになるのでチェックを付けて有効化します。
チェックを付けるとそのWEBサイトで使用しているCSSの名前がずらっと並んでその横にセレクトボックスが出てくるかと思います。
目的のCSS名のセレクトボックスをクリックします。
するとSublimeTextで開いているファイルのファイルパスが出ていると思いますのでそちらを選択。
はい、これで完了です。
あとはどちらで編集しても反映される事になります。
↓
（もちろん、本当にWEBサイトに反映させるには編集後のファイルをアップロードする必要があります。）
まとめ
個人的にはとても便利だと思います。
CSSでの調整は悩みの種と言えば悩みの種なのでこのように視覚的に確認しながら編集出来るのはとても助かります。
SublimeText使っている人には是非お勧めしたいです。
まだSublimeTextを使っていない人で興味が出た人は下記が参考になるかと思います。
【超オススメ】Sublime Text2を導入しよう！！ – NAVER まとめ
Sublime Text 2入門 (全14回) – プログラミングならドットインストール
Dreamweaver歴8年半の僕が3日前にSublime Text 2にしてやったこと | clear sky source
