リロード不要!Sublime TextでCSS変更を即座にChromeに反映させる方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

僕はCSSなどの動作確認をするときに、小さく書いてブラウザでチェックします。

こうすると、小さなミスにも気づきやすいですし、問題がどこにあったのかもすぐにわかります。

ただ、毎回「ちょっと書く → 保存 → リロード → 確認」の繰り返しで、保存とリロードが結構面倒くさいです。特にリロードで待っている時間がもったいないです。

そこで今回は、このちょっと面倒くさい「保存とリロード」を省いて「ちょっと書く → 確認」と手間と時間のかかる工程が2つも短縮できるSublime Textの設定方法の紹介です。

今回の方法を行うことで、以下のようなWordpressテーマの編集でも、エディター上でCSSを変更することによって、即座にChromeに反映させられるようになります。

LiveStyleで背景色を変更

スポンサーリンク
レクタングル(大)広告

設定方法の主な手順

今回の設定には、Sublime Textと、Chromeが必要になります。

設定で行う主な手順は以下です。

  1. Sublime TextにLiveStyleパッケージをインストール
  2. ChromeにLiveStyle拡張をインストール
  3. Sublime TextでCSSファイルを開く
  4. ChromeでLiveStyleの設定

手順通りに行えば、5分もかからない簡単な設定です。

Sublime TextにLiveStyleパッケージをインストール

まずは、Sublime TextにLiveStyleパッケージをインストールします。

Sublime Textの初期設定などに関しては以下を参照してください。

Wordpress開発向けSublime Text3環境の構築方法まとめ
先日、Wordpress編集向けにSublime Textの開発環境を新たに作ってみました。 というのも最近は、Wordpress関係...

LiveStyleパッケージをインストールするには、メインメニューから「Preferences(基本設定)→Package Control(パッケージコントロール)」を選択してください。

Sublime TextのPackage Controlの表示

パッケージコントロールが表示されるので、「Install Package」を選択してください。

Sublime Textでパッケージのインストール

入力欄に「LiveStyle」と入力したら、LiveStyleパッケージがインクリメンタル検索されて表示されるのでクリックしてインストールします。

Sublime TextでLiveStyleパッケージのインストール

Sublime Text側の設定はこれで完了です。

ChromeにLiveStyle拡張をインストール

次に、ChromeブラウザにEmmet LiveStyle拡張をインストールします。

Emmet LiveStyle拡張のインストール

拡張が追加されれば、Chromeでのインストール作業は終了です。

Emmet LiveStyleがChromeに追加されました

Sublime TextでCSSファイルを開く

ChromeでEmmet LiveStyleの設定を行う前に、Sublime Text側でライブプレビューさせたいCSSファイルなどを開いておきます。

例えば、僕は、Instant WordPress内でテーマなどの編集をしています。なので、そのテーマフォルダをプロジェクトに登録し、style.cssなどを開いておきます。

プロジェクトを登録しCSSファイルを開く

もちろん、「HTML+CSS」のような組み合わせで、モックアップを作成している時などでも、CSSファイルを開いておけばOKです。

ChromeでLiveStyleの設定

あとは、動作確認したいページをChromeブラウザで表示させます。

ただ僕は、Wordpressテーマ開発用に、Instant WordPressでローカル環境を構築しているので、ローカルページURLをChromeに表示させて動作させています。

WordPressローカル環境の構築方法は、以下を参照してください。

Instant Wordpressで超簡単にワードプレスローカル環境を構築する方法
今回は、Windowsに、これ以上無いくらいに簡単にWordpressローカル環境を構築する方法の紹介です。 僕は2台のWindows...

Instant WordPressを利用した場合、ローカルURLは、「http://127.0.0.1:4001/wordpress/」になるので、Chromeのアドレスバーに入力してページを表示させます。

アドレスバーにURLなどを入力

ページが表示されたらF12キーを押します。(デベロッパーツールの表示)

すると、デベロッパーツールにLiveStyleタブが表示されているのでクリックします。

デベロッパーツールにLiveStyleタブが追加されている

LiveStyleタブには「Enable LiveStyle for current page」というチェックボックスがあるのでチェックをつけます。

LiveStyleタブの機能を有効にする

すると以下のように、Sublime Textのタブで開いているCSSファイルが表示されます。

テーマフォルダ内のCSSファイルが読み込まれる

うまく読み込めなかった場合は、リロードなどをしてみてください。

このデベロッパーツールは、必ず開いていないと、ライブプレビューができないので開いたままにしておいてください。

Instant WordPressのテーマフォルダ内にあるCSSファイルは、Sublime Text側のタブで必ず開いている必要があります。通常のHTMLプロジェクトでも同様です。

他のCSSも反映させる場合

その他のCSSも適用させたい場合は、まずはSublime Text側でCSSファイルを開いてください。

親テーマの拡張スタイルのCSSを開いた状態

この状態で、先程のブラウザをリロードするとドロップダウンメニューに新しく開いたCSSを選択できるようになっています。

ドロップダウンメニューに新しく読み込んだCSSが表示される

ドロップダウンからファイルパスを選択すると、以下のように表示されます。

Sublime Textで開いたCSSをライブプレビューできる状態

Sublime Text側で、上記のようにChromeで設定されているCSSファイルを編集すると、エディター側の変更が即Chromeブラウザに反映されます。

デベロッパーツールは必ず開いておく必要があります。デベロッパーツールを閉じてしまうとライブプレビューできなくなります。

動作確認

Sublime Textで、Wordpress子テーマのstyle.cssを開いたとします。

そこで例えば、bodyの背景色を変更したりすると、入力と同時に変更したスタイルシートが反映されます。

LiveStyleで背景色を変更

もちろん、コピペなどでも即座に反映されます。

LiveStyleはコピペでも変更可能

ライブプレビューは、設定したCSSファイル内のテキストが変更と同時に反映されます。

ファイルを保存したタイミングで起きるわけではないので、プレビューのために保存する必要はありません。

まとめ

今回の設定を行うことで、以下の2つの煩わしい工程を省くことができます。

  1. Ctrl+Sキーを押してCSSファイルを保存
  2. F5キーを押してブラウザをリロード

普段動作確認時に、何気なく行っていることかもしれませんが、これらの工程がないだけでも、結構楽をできるのではないかと思います。

というわけで、「スタイル確認でブラウザのリロードボタンを押して待っている時間がかったるい」とか、「腱鞘炎なんで、なるべくキータッチを少なくしたい」なんて方には、かなり有効な設定ではないかと思います。