Emmet LiveStyleで爆速HTML/CSSコーディングの境地へ

- by konitter

簡単な記述でHTML/CSSが爆速でコーディングできるという神プラグイン「Emmet」。フロントエンドな人ならほとんどの方が使っているんじゃないかと思います。この度そのEmmetから「Emmet LiveStyle」なるものが出ました。

簡単に言うと、エディタとブラウザ双方向でCSSがリアルタイムに編集できるプラグインで、現在のところ、Google Chrome、Safari、Sublime Textで動作するとのこと。

といってもよくわからないと思いますので、まずは以下のスクリーンキャストをご覧ください。一瞬でも「あ、これヤバイわ」って思ったなら試してみる価値は十分にあると思います。

「Emmet LiveStyle」は以下の手順で簡単に始められます。

  1. Sublime TextのPackage Controlから「LiveStyle」をインストール
  2. Google Chromeの専用エクステンションをインストール
  3. 編集したいページを開く
  4. Sublime TextでCSSファイルを開く
  5. Google ChromeのDevToolsから「LiveStyle」パネルを開く

より詳しい使用方法は「How to use」のページを参照。

個人的にもまだガッツリと触れてませんが、これからのHTML/CSSコーディングでは必須のツールとなりそうです。