Sublime Text 3と Emmet LiveStyleの連携【１】（インストール）の続きです。


Emment LiveStyleの利点ですが、既存のCSSとは別のCSSファイルの編集結果をサイトにリアルタイムに反映させることができることかなと思います。

以下の操作はこんなケースを想定しています。

・サイトデザインの変更にあたり、元のCSSをコピーして編集を加えつつ、リアルタイムに結果を確認する

・以下の環境を利用しています。
　開発環境URL・・・XAMPPベースで（http://localhost/joomla3）
　物理パス・・・（C:\pleiades\xampp\htdocs\joomla3） 

【１】ブラウザの準備

（１）Chromeで、開発対象のURLを開きます


（２）F12キーを押下して、デベロッパーツールを開きます


右端に「LiveStyle」のタブが追加されています。

（３）このページで読み込まれているCSSを確認します

CSSファイル名にマウスカーソルを当てると、ファイルパスが表示されます。


【２】Sublime Text 3の準備

（１）開発環境の物理パス（ドキュメントルート）を開きます




（２）左側にフォルダ、ファイルのツリーが表示されます。

（３）上記【１】の（３）で確認したファイルを、あらかじめコピーして、template_new.cssなどとして同じパスに保存します。

（４）template_new.cssファイルを開きます。
 

（５）Chromeのデベロッパーツール画面の「LiveStyle」タグをクリックし、「Enable LiveStyle for current page」にチェックを入れます。

（６）template.css,overlay.cssは、現在のページで読み込まれているｃｓｓファイルで、プルダウンに表示されているファイルは、Sublime Text 3で開かれているCSSファイルです。

（７）template.cssをコピーしてtemplate_new.cssファイルを作っておいたので、プルダウンからそれを選択します。

 

（８）これで、template_new.cssファイルをSublime Text 3で編集すると、その結果が即Chromeブラウザ上に反映されます。
　　★ デベロッパーツールの画面は常に開いておく必要があります。

以上で準備完了です

【３】実際に使ってみる

（１）例えばこんな感じに画面を並べてみます。「Joomla3」というタイトル文字のデザインは、6031行目で定義されてます。
（右クリック－＞「要素の調査」で調べられます。）


（２）fontサイズを変えてみます

<before>
 

<after>
 

こんな感じで、Sublime Text 3上の編集結果が即ブラウザ上に反映されます。

簡単な変更確認であれば、ChromeのElementsタブ内でも可能ですが、オリジナルのCSSではなく、別ファイルでの編集結果を確認し、保存できるのが大きな利点だと思います。
もちろんリネームしたファイルでなくとも、custom.cssなどの新規ファイルを作成し、そこに記述を追加しても反映されます。

以上です