About

小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。

赤い電動車いすに乗って生活をしています。色々と不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。

好き:食べる/スロープ/エレベーター
嫌い:食事制限/段差/階段
※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。

気づけばグルメブログになってしまわぬよう、しっかり更新頑張ります!

Links

【Google Chrome】Web制作に役立つ拡張機能「CanvasFlip」を使ってみた

【Google Chrome】Web制作に役立つ拡張機能「CanvasFlip」を使ってみた

今回はいつもの記事とは少し趣向を変えて、Google Chromeの拡張機能について紹介したいと思います。

CanvasFlip」というWeb制作お役立ち系の拡張機能です。基本的にデフォルトのデベロッパーツールで事足りていると思ったのですが、ちょっと気になっていたのでインストールして使ってみました!

CanvasFlip

使い方自体は至って簡単です!ツールバーに追加されたアイコンをクリックすると、もうツールのUIが立ち上がります。

CanvasFlipキャプチャ1

使われているフォントや色の数、画像の枚数等の基本情報が表示されたパネルが表示されます。また、この時点でChrome自体も要素をクリックで解析できるモードに切り替わってます。

例えば、ツールが起動された状態で要素をクリックすると、以下のようにパネルが切り替わります。

CanvasFlipキャプチャ2

その要素の位置やサイズ、更にツール上を下にスクロールしていくと直感的なUIでCSSの調整を行うことができます。

選択した要素がデバイスフォントのテキストだった場合、その場で内容を打ち替えてみることも可能ですね!

そして、これ結構面白い機能だなーと思ったのがありまして。上記キャプチャ上の緑枠で囲まれたボタンですが、このボタンを押すと選択された要素のキャプチャをダウンロードできるのです!

他にもサイト内で使われているカラーを検出し変えて試してみる事ができたり、使われている画像を検出しダウンロードできたりと、プチ便利な機能が盛り沢山!

CanvasFlipキャプチャ3

デフォルトのデベロッパーツールの補助的な役割として、是非試してみてはいかがでしょうか?

CanvasFlip – chrome web store

コメントする

トップへ戻る