僕はCSSなどの動作確認をするときに、小さく書いてブラウザでチェックします。
こうすると、小さなミスにも気づきやすいですし、問題がどこにあったのかもすぐにわかります。
ただ、毎回「ちょっと書く → 保存 → リロード → 確認」の繰り返しで、保存とリロードが結構面倒くさいです。特にリロードで待っている時間がもったいないです。
そこで今回は、このちょっと面倒くさい「保存とリロード」を省いて「ちょっと書く → 確認」と手間と時間のかかる工程が2つも短縮できるSublime Textの設定方法の紹介です。
今回の方法を行うことで、以下のようなWordpressテーマの編集でも、エディター上でCSSを変更することによって、即座にChromeに反映させられるようになります。
目次
設定方法の主な手順
今回の設定には、Sublime Textと、Chromeが必要になります。
設定で行う主な手順は以下です。
- Sublime TextにLiveStyleパッケージをインストール
- ChromeにLiveStyle拡張をインストール
- Sublime TextでCSSファイルを開く
- ChromeでLiveStyleの設定
手順通りに行えば、5分もかからない簡単な設定です。
Sublime TextにLiveStyleパッケージをインストール
まずは、Sublime TextにLiveStyleパッケージをインストールします。
Sublime Textの初期設定などに関しては以下を参照してください。
LiveStyleパッケージをインストールするには、メインメニューから「Preferences（基本設定）→Package Control（パッケージコントロール）」を選択してください。
パッケージコントロールが表示されるので、「Install Package」を選択してください。
入力欄に「LiveStyle」と入力したら、LiveStyleパッケージがインクリメンタル検索されて表示されるのでクリックしてインストールします。
Sublime Text側の設定はこれで完了です。
ChromeにLiveStyle拡張をインストール
次に、ChromeブラウザにEmmet LiveStyle拡張をインストールします。
拡張が追加されれば、Chromeでのインストール作業は終了です。
Sublime TextでCSSファイルを開く
ChromeでEmmet LiveStyleの設定を行う前に、Sublime Text側でライブプレビューさせたいCSSファイルなどを開いておきます。
例えば、僕は、Instant WordPress内でテーマなどの編集をしています。なので、そのテーマフォルダをプロジェクトに登録し、style.cssなどを開いておきます。
もちろん、「HTML＋CSS」のような組み合わせで、モックアップを作成している時などでも、CSSファイルを開いておけばOKです。
ChromeでLiveStyleの設定
あとは、動作確認したいページをChromeブラウザで表示させます。
ただ僕は、Wordpressテーマ開発用に、Instant WordPressでローカル環境を構築しているので、ローカルページURLをChromeに表示させて動作させています。
WordPressローカル環境の構築方法は、以下を参照してください。
Instant WordPressを利用した場合、ローカルURLは、「http://127.0.0.1:4001/wordpress/」になるので、Chromeのアドレスバーに入力してページを表示させます。
ページが表示されたらF12キーを押します。（デベロッパーツールの表示）
すると、デベロッパーツールにLiveStyleタブが表示されているのでクリックします。
LiveStyleタブには「Enable LiveStyle for current page」というチェックボックスがあるのでチェックをつけます。
すると以下のように、Sublime Textのタブで開いているCSSファイルが表示されます。
うまく読み込めなかった場合は、リロードなどをしてみてください。
このデベロッパーツールは、必ず開いていないと、ライブプレビューができないので開いたままにしておいてください。
Instant WordPressのテーマフォルダ内にあるCSSファイルは、Sublime Text側のタブで必ず開いている必要があります。通常のHTMLプロジェクトでも同様です。
他のCSSも反映させる場合
その他のCSSも適用させたい場合は、まずはSublime Text側でCSSファイルを開いてください。
この状態で、先程のブラウザをリロードするとドロップダウンメニューに新しく開いたCSSを選択できるようになっています。
ドロップダウンからファイルパスを選択すると、以下のように表示されます。
Sublime Text側で、上記のようにChromeで設定されているCSSファイルを編集すると、エディター側の変更が即Chromeブラウザに反映されます。
デベロッパーツールは必ず開いておく必要があります。デベロッパーツールを閉じてしまうとライブプレビューできなくなります。
動作確認
Sublime Textで、Wordpress子テーマのstyle.cssを開いたとします。
そこで例えば、bodyの背景色を変更したりすると、入力と同時に変更したスタイルシートが反映されます。
もちろん、コピペなどでも即座に反映されます。
ライブプレビューは、設定したCSSファイル内のテキストが変更と同時に反映されます。
ファイルを保存したタイミングで起きるわけではないので、プレビューのために保存する必要はありません。
まとめ
今回の設定を行うことで、以下の2つの煩わしい工程を省くことができます。
- Ctrl+Sキーを押してCSSファイルを保存
- F5キーを押してブラウザをリロード
普段動作確認時に、何気なく行っていることかもしれませんが、これらの工程がないだけでも、結構楽をできるのではないかと思います。
というわけで、「スタイル確認でブラウザのリロードボタンを押して待っている時間がかったるい」とか、「腱鞘炎なんで、なるべくキータッチを少なくしたい」なんて方には、かなり有効な設定ではないかと思います。
