プラグイン:Emmet LiveStyleのソースを表示

__NOTOC__
このページは執筆中です

==Emmet LiveStyle プラグイン (beta)==

[[ファイル:LiveStyle.png]]

[http://livestyle.io/ Emmet LiveStyle] はスタイルシートを高速に双方向・リアルタイム編集するためのツールです。

==スタイルシートの高速な双方向・リアルタイム編集==

===リアルタイム編集===
入力と同時に LiveStyle がブラウザのスタイルシートを更新します。ファイルの保存やページの再読み込みをしなくても Web ページに反映された状態を確認することができます。

===ブラウザからエディタへ===
ブラウザのデベロッパーツールでレイアウトを微調整し、これらの変更をソースコードに反映させたいですか？LiveStyle はこれができる唯一のツールです。LESS と SCSS にも対応しています。

==使用方法==
===1. はじめに LiveStyle のアプリケーションを下記からインストールしてください。===
:[http://livestyle.io/ http://livestyle.io/]
:[[ファイル:LiveStyle2.png|border]]
===2. LiveStyle のアプリケーションを起動したら「Install Chrome Extension」から Chrome の拡張機能をインストールします。===
:[[ファイル:LiveStyle3.png|border]]
===3. Mery の「ツール > プラグイン > Emmet LiveStyle」でプラグインを有効にします。===
:[[ファイル:LiveStyle4.png|border]]
===4. Chrome のメニューバーのアイコンから LiveStyle を起動します。===
===5. "Enable LiveStyle" のスイッチをONにします。===
:[[ファイル:LiveStyle5.png|border]]

=== 既知の問題 ===
:ブラウザのデベロッパーツールで特定の属性値をドロップダウンで選択した場合にエディタ側にセミコロンが残ることがある。例えば overflow-x の値を auto から hidden にドロップダウンで選択して変更した場合など。LiveStyle 専用のエディタ群でも同様の問題を確認。恐らく Chrome 拡張機能側の問題だと思われるのであちら側の修正待ち。