便利過ぎる!視覚的にCSSを編集出来る様になる「Emmet LiveStyle」

あっちを弄ってもこっちを弄っても即反映!

screenshot_52

さて今回導入してみたのはSiblimeText2のプラグインである「Emmet LiveStyle」です。

巷で話題になっていたので後で入れてみようと思いつつすっかり忘れていて現在に至りました。

結論から言うと、「黙って使え」レベルの至高ツールです。

具体的にどんな事になるのかというと、↓この動画を見て下さい。

見て貰うと分かると思いますが、

ブラウザのDOMインスペクタ(CSSの値を変えたりする場所:デベロッパーツール)で編集を行うとSublimeTextで開いているCSSファイルの値が書き換わり、逆にSublimeText上でCSSを編集するとブラウザ上のCSSが書き換わるという非常に便利な現象がおきます。

これ、何が便利と言うとリアルタイムで表示を確認しながら作業出来ると言う事になりますよね。

今までだとブラウザ上で値を調整してからエディタにコピペなり入力なりして2ステップかかっていたものが1ステップで可能です。

う~ん、これはいよいよDreamweaverいらなくなってきたかも知れない。

導入方法してみよう!

簡単にではありますが導入までの流れを。

SublimeTextは既にパッケージコントロールが導入されている前提になります。

まずは「Ctrl」+「Shift」+「P」を押してコマンドパレットを呼び出してパッケージコントロールを起動します。

screenshot_43

次にパッケージコントロールで「LiveStle」を探してインストールします。

screenshot_44

これでSublimeTextの方は完了です。

次にChromeの拡張をインストールするのでChromeでこちらのページに移動して拡張機能をインストールして下さい。

screenshot_45

拡張機能のインストールが完了したら導入は完了ですъ(´д`)グッ

早速使ってみる

では編集してみたいサイトをChromeで開いてみましょう。
あと、そのサイトで編集するCSSのファイルも読み込んで置きましょう。

CSSをSublimeTextで開きます。

screenshot_48

WEBサイトをChromeで開きます。

screenshot_46

開いたらChromeで「F12」キーを押してDOMインスペクタ(デベロッパーツール)を表示させます。

すると、「LiveStyle」というタブが増えていると思いますのでそちらをクリックします。

クリックしてタブを切り替えると下記画像の様なチェックボックスを付けるページになるのでチェックを付けて有効化します。

screenshot_47

チェックを付けるとそのWEBサイトで使用しているCSSの名前がずらっと並んでその横にセレクトボックスが出てくるかと思います。

目的のCSS名のセレクトボックスをクリックします。

screenshot_49

するとSublimeTextで開いているファイルのファイルパスが出ていると思いますのでそちらを選択。

はい、これで完了です。

あとはどちらで編集しても反映される事になります。

screenshot_50

screenshot_51

(もちろん、本当にWEBサイトに反映させるには編集後のファイルをアップロードする必要があります。)

まとめ

個人的にはとても便利だと思います。

CSSでの調整は悩みの種と言えば悩みの種なのでこのように視覚的に確認しながら編集出来るのはとても助かります。

SublimeText使っている人には是非お勧めしたいです。

まだSublimeTextを使っていない人で興味が出た人は下記が参考になるかと思います。

【超オススメ】Sublime Text2を導入しよう!! – NAVER まとめ

Sublime Text 2入門 (全14回) – プログラミングならドットインストール

Dreamweaver歴8年半の僕が3日前にSublime Text 2にしてやったこと |  clear sky source