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

← 古い編集新しい編集 →

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

このページは執筆中です

Emmet LiveStyle プラグイン (beta)

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

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

リアルタイム編集

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

ブラウザからエディタへ

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

使用方法

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

http://livestyle.io/

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

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

4. Chrome のメニューバーのアイコンから LiveStyle を起動します。

5. "Enable LiveStyle" のスイッチをONにします。

6. Meryでスタイルシートのファイル(css, less, scss)を読み込むか、新規作成して編集モードを「css」に設定します。

7. Chrome側のLiveStyleでスタイルシートを選択します。

既知の問題

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

@@ 35行目: / 35行目: @@
 '''5. "Enable LiveStyle" のスイッチをONにします。'''
 :[[ファイル:LiveStyle5.png|border]]
+'''6. Meryでスタイルシートのファイル(css, less, scss)を読み込むか、新規作成して編集モードを「css」に設定します。'''
+:[[ファイル:LiveStyle6.png|border]]
+'''7. Chrome側のLiveStyleでスタイルシートを選択します。'''
+:[[ファイル:LiveStyle7.png|border]]
 === 既知の問題 ===
 :ブラウザのデベロッパーツールで特定の属性値をドロップダウンで選択した場合にエディタ側にセミコロンが残ることがある。例えば overflow-x の値を auto から hidden にドロップダウンで選択して変更した場合など。LiveStyle 専用のエディタ群でも同様の問題を確認。恐らく Chrome 拡張機能側の問題だと思われるのであちら側の修正待ち。