「プラグイン:Emmet LiveStyle」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし |
編集の要約なし |
||
| 18行目: | 18行目: | ||
==使用方法== | ==使用方法== | ||
#はじめに LiveStyle のアプリケーションを下記からインストールしてください。 | #はじめに LiveStyle のアプリケーションを下記からインストールしてください。 | ||
[http://livestyle.io/ http://livestyle.io/] | |||
[[ファイル:LiveStyle2.png|border]] | |||
#LiveStyle のアプリケーションを起動したら「Install Chrome Extension」から Chrome の拡張機能をインストールします。 | #LiveStyle のアプリケーションを起動したら「Install Chrome Extension」から Chrome の拡張機能をインストールします。 | ||
[[ファイル:LiveStyle3.png|border]] | |||
#Mery の「ツール > プラグイン > Emmet LiveStyle」でプラグインを有効にします。 | #Mery の「ツール > プラグイン > Emmet LiveStyle」でプラグインを有効にします。 | ||
[[ファイル:LiveStyle4.png|border]] | |||
=== 既知の問題 === | === 既知の問題 === | ||
:ブラウザのデベロッパーツールで特定の属性値をドロップダウンで選択した場合にエディタ側にセミコロンが残ることがある。例えば overflow-x の値を auto から hidden にドロップダウンで選択して変更した場合など。LiveStyle 専用のエディタ群でも同様の問題を確認。恐らく Chrome 拡張機能側の問題だと思われるのであちら側の修正待ち。 | :ブラウザのデベロッパーツールで特定の属性値をドロップダウンで選択した場合にエディタ側にセミコロンが残ることがある。例えば overflow-x の値を auto から hidden にドロップダウンで選択して変更した場合など。LiveStyle 専用のエディタ群でも同様の問題を確認。恐らく Chrome 拡張機能側の問題だと思われるのであちら側の修正待ち。 | ||
2016年6月8日 (水) 16:46時点における版
このページは執筆中です
Emmet LiveStyle プラグイン (beta)
Emmet LiveStyle はスタイルシートを高速に双方向・リアルタイム編集するためのツールです。
スタイルシートの高速な双方向・リアルタイム編集
リアルタイム編集
入力と同時に LiveStyle がブラウザのスタイルシートを更新します。ファイルの保存やページの再読み込みをしなくても Web ページに反映された状態を確認することができます。
ブラウザからエディタへ
ブラウザのデベロッパーツールでレイアウトを微調整し、これらの変更をソースコードに反映させたいですか？LiveStyle はこれができる唯一のツールです。LESS と SCSS にも対応しています。
使用方法
- はじめに LiveStyle のアプリケーションを下記からインストールしてください。
- LiveStyle のアプリケーションを起動したら「Install Chrome Extension」から Chrome の拡張機能をインストールします。
- Mery の「ツール > プラグイン > Emmet LiveStyle」でプラグインを有効にします。
既知の問題
- ブラウザのデベロッパーツールで特定の属性値をドロップダウンで選択した場合にエディタ側にセミコロンが残ることがある。例えば overflow-x の値を auto から hidden にドロップダウンで選択して変更した場合など。LiveStyle 専用のエディタ群でも同様の問題を確認。恐らく Chrome 拡張機能側の問題だと思われるのであちら側の修正待ち。
スポンサーリンク