Cntlog > スキルアップ・ノウハウ > コーディング > コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート

コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート

最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。
CSSrefresh

このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。
コーディングといえば、書いてはF5キー、書いてはF5キーの繰り返しでブラウザを更新して表示を確認していたかと思いますがもうその手間は必要ありません。

制作の現場でも最近はディアルディスプレイが主流となっていますので、片面はブラウザ、片面でエディターの画面のように切り分けて制作をする人にとってはうってつけのブックマークレートです。

私も今スマートフォンサイトを作りながら使っていますが、わざわざ確認の度にブラウザをリロードしなくていいというのは本当に楽です。

使い方

CSSrefreshにアクセスしてページ下部にあるアイコンをブックマークに登録します。
※chomeの場合はブックマークバーにドラッグ&ドロップで登録できます。
cap
後はコーディング中のページを開いて、登録したブックマークをクリックだけで準備完了です。
これだけでCSSを更新する度にページに反映されます
楽ちんですね。

ブックマークレートは結構登録しているのですが、 CSSrefreshは感動の出来栄えでした。

関連記事

スマートフォンサイトを作るときによく使うhead内のタグ... スマートフォンサイトを作るにあたってよく使うmetaタグなどheadで使う要素をまとめてみました。 スマホサイトを作り慣れていない人の参考になれば嬉しいです。 目次 viewport ...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法... 各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。 そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。 はじめに 各種ソーシャルボタンをまとめて簡単に設置できて...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
gulpで作るスタイルガイドをFrontNoteにした... みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「fron...
Nuxt.jsのトラブル解決方法 今年からVue.jsを使い始めてノリノリだったのですが、最近Nuxt.jsも触り始めました。 Vue.jsがわかっていたら大丈夫かなーと思っていたのですが、結構Nuxt.jsの書き方でトラブったり悩んだりしたことがあったので、自分のあった経験と解決方法をご紹介します。 インストー...