どんどん便利になってるChromeの機能拡張！Web制作に便利な機能がまとめられた -CanvasFlip
Post on:2017年8月28日
sponsors
DOMの構造を調査する、要素のサイズを測る、要素のみのキャプチャを撮る、画像ファイルを抽出する、カラーやテキストを編集するなど、これらWeb制作に便利な機能がまとめて、しかも高性能で快適に利用できるChromeの機能拡張を紹介します。
それぞれ単体の機能拡張を使用している人は、一つにまとめられて簡単だと思います。
CanvasFlipの機能
CanvasFlipは先日リリースされたばかりの新しい機能拡張で、私も先週から使用していますが、かなり便利です。パネルのUIも操作しやすく、ページに表示されるハイライトやメジャーも見やすいと思います。
- ページの基本情報。
- 指定した要素のプロパティを表示するインスペクタ。
- インスペクタでスタイルを変更すると、すぐにページに反映されます。
- メジャー: 指定した要素とのマージンなども簡単に計測。
- 指定した要素は、デザインやテキストを変更できます。コード無しで調整ができるので、かなり便利です。
- インラインのテキストも編集できます。
- 指定した要素のみをキャプチャで撮れます。変更した箇所にも対応。
- カラーの変更も簡単、生成したパネルからスタイルガイドも作成できます。
- テキストの一覧を作成、フォント名・カラー・サイズ・行間など。
- 画像の一覧を作成、サイズ・オルトも一覧。ダウンロードも可能。
カラーパネルでは、カラーの変更前と変更後も表示されます。
画像パネルでは、不可視の画像も表示・ダウンロードが可能です。
CanvasFlipのインストール
CanvasFlipのインストールは、Chromeウェブストアからです。
右上の「Chromeに追加」ボタンをクリックします。
インストールが完了すると、ツールバーからCanvasFlipを利用できます。
CanvasFlipの使い方
使い方は簡単です。
ページを表示し、ツールバーからCanvasFlipをクリックします。
Inspect
インスペクターでは要素の情報を表示し、編集・変更が可能です。
Colors
カラーではカラーの一覧、カラーの変更が可能です。
Typography
タイポグラフィではテキストの情報が一覧表示されます。
Assets
アセットでは画像の一覧、ダウンロードが可能です。
インスペクタを使って、ページを編集してみます
まずは、変更したい要素をクリックして指定します。
見出しの高さを変更してみました。
そして、テキストのカラーを変更。
不透明度やシャドウなど、CSSで変更できるスタイルはすべて変更できます。
変更したデザインは、その要素だけキャプチャすることも可能です。
sponsors
