design makes life richly.

Published: 4年 ago

CSSファイルを変更したら、自動でブラウザに反映してくれる『CSS Refresh』がステキ


最近コーディング環境の自動化を進めようと、『Grunt』使って色々やっていましてて・・・

『Grunt』でプリプロセッサの自動化

ただ・・・LiveReloadが上手く行かないわけです (;´Д`A “`
JSも詳しくは書けない&読めない僕なので、どうも躓いちゃうととことん訳がワカラナイ。そこでLiveReloadの変わりとなるものを見つけました!

『CSS refresh』

ま、CSSだけなんですけどねー(白目)
ただ、普段の業務内容自体はJS周りほぼ触らないので、これで事足りる印象。

使い方はスクリプトとして読み込むか、ブックマークレットを登録して使うかの2種類です。スクリプトわざわざ読み込むのは無駄な気がしますので、ブックマークレットの方をご紹介したいなと思います!

まずはコチラにアクセス⬇

cssrefresh

ずーっとスクロールして行くと、⬇のようなやつが出てきますので、CSS refreshのアイコンをブックマークバーにドラッグして下さい。

スクリーンショット 2013-03-02 23.52.48

なんとこれだけ!超カンタンですね!!後はCSSを編集しているページでCSS refreshをクリックすれば、変更のタイミングでCSSの即座に反映してくれます!手軽に実装出来るツールなので、気になった方は是非使ってみて下さい!コードに手を加えなくて良いってのも個人的にポイント高いです。

ただ欲を言えば、gruntでhtml、js周りも全て自動化してLiveReload組み込みたいと思っているので、そちらもちょいちょい進めて行きたいですね。

Have a Comment?

WP-SpamFree by Pole Position Marketing

Some HTML is OK