どんどん便利になってるChromeの機能拡張!Web制作に便利な機能がまとめられた -CanvasFlip

DOMの構造を調査する、要素のサイズを測る、要素のみのキャプチャを撮る、画像ファイルを抽出する、カラーやテキストを編集するなど、これらWeb制作に便利な機能がまとめて、しかも高性能で快適に利用できるChromeの機能拡張を紹介します。

それぞれ単体の機能拡張を使用している人は、一つにまとめられて簡単だと思います。

CanvasFlipのキャプチャ

CanvasFlip

CanvasFlipの機能

CanvasFlipは先日リリースされたばかりの新しい機能拡張で、私も先週から使用していますが、かなり便利です。パネルのUIも操作しやすく、ページに表示されるハイライトやメジャーも見やすいと思います。

サイトのキャプチャ
  • ページの基本情報。
  • 指定した要素のプロパティを表示するインスペクタ。
  • インスペクタでスタイルを変更すると、すぐにページに反映されます。
  • メジャー: 指定した要素とのマージンなども簡単に計測。
  • 指定した要素は、デザインやテキストを変更できます。コード無しで調整ができるので、かなり便利です。
  • インラインのテキストも編集できます。
  • 指定した要素のみをキャプチャで撮れます。変更した箇所にも対応。
  • カラーの変更も簡単、生成したパネルからスタイルガイドも作成できます。
  • テキストの一覧を作成、フォント名・カラー・サイズ・行間など。
  • 画像の一覧を作成、サイズ・オルトも一覧。ダウンロードも可能。
CanvasFlipのキャプチャ

カラーパネルでは、カラーの変更前と変更後も表示されます。

CanvasFlipのキャプチャ

画像パネルでは、不可視の画像も表示・ダウンロードが可能です。

CanvasFlipのインストール

CanvasFlipのインストールは、Chromeウェブストアからです。

サイトのキャプチャ

CanvasFlip -Chrome ウェブストア

右上の「Chromeに追加」ボタンをクリックします。
インストールが完了すると、ツールバーからCanvasFlipを利用できます。

CanvasFlipの使い方

使い方は簡単です。
ページを表示し、ツールバーからCanvasFlipをクリックします。

CanvasFlipのキャプチャ

Inspect

インスペクターでは要素の情報を表示し、編集・変更が可能です。

CanvasFlipのキャプチャ

Colors

カラーではカラーの一覧、カラーの変更が可能です。

CanvasFlipのキャプチャ

Typography

タイポグラフィではテキストの情報が一覧表示されます。

CanvasFlipのキャプチャ

Assets

アセットでは画像の一覧、ダウンロードが可能です。

インスペクタを使って、ページを編集してみます

CanvasFlipのキャプチャ

まずは、変更したい要素をクリックして指定します。

CanvasFlipのキャプチャ

見出しの高さを変更してみました。

CanvasFlipのキャプチャ

そして、テキストのカラーを変更。

CanvasFlipのキャプチャ

不透明度やシャドウなど、CSSで変更できるスタイルはすべて変更できます。

CanvasFlipのキャプチャ

変更したデザインは、その要素だけキャプチャすることも可能です。

top of page

©2017 coliss