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」で検索してトップに出たアドオンではうまくいきませんでした↓
アドオンを入れたら有効にして、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にします。
このLive ReloadボタンをONにしたまま、Sublime Textで書いたHTML、CSSを保存します。
すると、保存と同時にソースコードの内容がブラウザに反映されます。
これでWebページ制作もスムーズに行なえますね。
未だに「Browser Reflesh」パッケージの動作がうまくいかないので、代替手段として使ってます。