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

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

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

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

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

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

使い方

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

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

関連記事

Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました... 先日フレームワークのResponsive Grid Systemが大幅に変更されたと知って興味があって調べてみました。 Responsive Grid Systemとはグリッドシステムを使うためのフレームワークで、レスポンシブデザインでも使用できるような設計をされているものです。 確認し...
gulpで作るスタイルガイドをFrontNoteにした... みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「fron...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...