「プラグイン:Emmet LiveStyle」の版間の差分

提供: MeryWiki
ナビゲーションに移動 検索に移動
編集の要約なし
20行目: 20行目:
::[http://livestyle.io/ http://livestyle.io/]
::[http://livestyle.io/ http://livestyle.io/]
::[[ファイル:LiveStyle2.png|border]]
::[[ファイル:LiveStyle2.png|border]]


#LiveStyle のアプリケーションを起動したら「Install Chrome Extension」から Chrome の拡張機能をインストールします。
#LiveStyle のアプリケーションを起動したら「Install Chrome Extension」から Chrome の拡張機能をインストールします。
::[[ファイル:LiveStyle3.png|border]]
::[[ファイル:LiveStyle3.png|border]]


#Mery の「ツール > プラグイン > Emmet LiveStyle」でプラグインを有効にします。
#Mery の「ツール > プラグイン > Emmet LiveStyle」でプラグインを有効にします。

2016年6月8日 (水) 16:44時点における版

このページは執筆中です

Emmet LiveStyle プラグイン (beta)

Emmet LiveStyle はスタイルシートを高速に双方向・リアルタイム編集するためのツールです。

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

リアルタイム編集

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

ブラウザからエディタへ

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

使用方法

  1. はじめに LiveStyle のアプリケーションを下記からインストールしてください。
http://livestyle.io/


  1. LiveStyle のアプリケーションを起動したら「Install Chrome Extension」から Chrome の拡張機能をインストールします。


  1. Mery の「ツール > プラグイン > Emmet LiveStyle」でプラグインを有効にします。

既知の問題

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