ぽよっとまがじん

ぽよっとまがじん

特撮系、プログラミング、好きなもの、カラオケなど普段の気になったこと等をメモするブログです。

SublimeTextのLive ReloadでHTML、CSSをブラウザでリアルタイムプレビュー

f:id:dasi_memo:20140329154553p:plain

Sublime Textで書いたHTMLやCSSをリアルタイムプレビューする

『Live Reload』はSublimeTextで書いたHTML、CSSの記述をリアルタイムでブラウザに反映させるpackageです。
Webページ制作で、ブラウザの更新がまどろっこしい!ってイライラもこれで解消できます。

Live ReloadをSublime Textとブラウザ両方に入れてリアルタイムプレビューする

今回はアドオンも使用するので、html、cssの確認を行うブラウザはFirefoxにしました。

 

FirefoxにLive Reloadを入れる

Firefoxに『Live Reload(リンク先参照)』を追加します。Firefox extensionを選択。

なお、「Live Reload Firefox」で検索してトップに出たアドオンではうまくいきませんでした↓
f:id:dasi_memo:20140329145543j:plain

アドオンを入れたら有効にして、Live Reloadアイコンをツールバーに配置しておきます。

Sublime TextにLive Reloadを入れる

同様にSublimeTextにも『Live Reload』パッケージを入れます。

書いたHTMLファイルをFirefoxで開きます。

◯◯.htmlを右クリック→プログラムから開く→Firefox
前回の記事で紹介した『View in Browser』パッケージが入ってるなら、[Ctrl]+[Alt]+[V]

firefoxのLive ReloadをONにする

開いたページでLive ReloadボタンをクリックでONにします。
f:id:dasi_memo:20140329153531p:plain

このLive ReloadボタンをONにしたまま、Sublime Textで書いたHTML、CSSを保存します。
すると、保存と同時にソースコードの内容がブラウザに反映されます。
これでWebページ制作もスムーズに行なえますね。

未だに「Browser Reflesh」パッケージの動作がうまくいかないので、代替手段として使ってます。