WEBページ制作時、CSSの変更をプレビューするために、ブラウザの開発者ツールを用いることがあるかと思います。
一時的、限定的な変更であればこれで済みます。

ただ、変更した結果を保存したい場合、本番環境のCSSを直接いじるわけにもいかず、開発環境であっても、
最新のソースは更新したくない。。。なんていう場合に役立つのが今回書いた方法です。

Sublime Textで編集した任意のCSSファイルの記述が、表示中のWEBページにリアルタイムに反映されるというものです。

Emmet LiveStyleというSublime Text用パッケージ、および同名のChrome拡張機能を導入すると、
ブラウザで表示しているページのCSSと、Sublime Textで開いているCSSを紐づける画面が現れ、
Sublime Textでの編集結果が、ブラウザにリアルタイムに反映されます。



まずは導入方法です。Chrome拡張がSubilme Text 2では動作しなかったので、今回はVer.3(ベータ版)を用いました。

【1】Sublime Text 3の導入
(1)インストール
ポータブル版であれば、以下の場所からOS環境に合ったファイルを落として、解凍するだけです。
https://sublime.wbond.net/installation#st3

以下全体の流れは ここ参照 http://livestyle.emmet.io/install/


(2)Package Controlのインストール
https://sublime.wbond.net/installation
SUBLIME TEXT3タブの内容を、Sublime Text 3のコンソールにペーストして、[Enter]キーを押下するとPackage Controlがインストールされます。

コンソールを開き、


配布元 https://sublime.wbond.net/installation のサイトからPackageControlインストール用のスクリプトをコピーして、






コンソールに貼り付け後、[Enter]キーを押下します。ステータスメッセージが表示されるので、完了まで待ちます。




一旦Subilme Text 3を終了し、起動し直します。


(3)Package ControlでのLiveStyleのインストール
コマンドパレットを開き


以下のように入力して「Enter」


しばらくするとパッケージ一覧が出るので


「livestyle」と入力して[Enter]


以上でSublime Text 3側のセットアップは完了です。

【2】ChromeのEmmet LiveStyle拡張機能のインストール
(1)Chromeウェブストアで追加
https://chrome.google.com/webstore/detail/diebikgmpmeppiilkaijjbdgciafajmg

あとは Sublime Text 3と Emmet LiveStyleの連携【2】(操作)

サイト内検索

長押しで
スクロール