[JS]CSSファイルに変更を加えてもリフレッシュ無しで反映させるスクリプト -CSSrefresh

CSSファイルに変更を加えてもページのリフレッシュ無しで変更を反映させるスクリプト(とブックマークレット)を紹介します。

サイトのキャプチャ

CSSrefresh - automatically refresh CSS files

CSSrefreshは制作時に役立つスクリプトで、CSSファイルに変更を加えて保存すると、ページのリフレッシュ無しで変更を反映させます。

CSSrefreshの使い方

使い方は簡単で、2通りあります。

CSSrefreshをインクルードする

使用するページにCSSrefreshを外部スクリプトとして記述します。

<head>
   <link rel="stylesheet" type="text/css" href="css/site.css" />
   <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

リフレッシュするCSSファイルは、スクリプトの前に記述します。

CSSrefreshのブックマークレット

あらゆるウェブページで簡単に使えるように、ブックマークレットも用意されています。

ブックマークレット
CSSrefresh

リロードするだけの方が簡単なような気もしますが、制作の環境によっては便利かもしれません。

スクリプトとは関係ないですが、サイトは1ページで構成されており、ナビゲーションのデザイン・機能も面白いものとなっています。

サイトのキャプチャ

CSSrefresh: how -使い方

top of page

©2017 coliss