このページの本文へ

知らないと絶対損する!WebデザイナーのためのChrome拡張機能7選

2017年08月25日 08時00分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

CSSの調整、フォントの調査、画像の作成など、Webデザイナーの作業効率をアップさせるChromeの拡張機能を紹介します。

Webデザイナーなら自分なりの仕事のやり方があると思います。コードを書きながらブラウザー上で直接デザインしている人、ブラウザーは実装テストの時にだけ使う人、どんな人でもWebデザイナー向けのChrome拡張機能を使えば普段の作業が見違えるほど簡単になります。私は一番煩わしいと思っている「ちょっとした作業のために大掛かりなソフトを起動すること」をはじめ、Webデザインでありがちな問題を解決するために、Chrome拡張機能を探しています。

これなしではやっていけないほど便利なChrome拡張機能を7つ紹介します。普段Firefoxで作業をしているなら(Web開発者ならすべてのブラウザーでクロステストするはずですが)、Webデザイナー向けのFirefoxの6つの拡張機能が参考になります。

1. Page Ruler

Page Rulerは、ブラウザー上で任意の要素の位置とサイズ、もしくは両方を表示できる便利なChrome拡張機能です。Chromeデベロッパーツールでコードを調べるよりも早く、CSSファイルをいじる必要がありません。十字カーソルを調べたい要素に対して範囲指定すると、ブラウザー上部のバーに、要素のlength値とwidth値、画面端からの距離を表示します(positionプロパティがfixedやabsoluteでも使えます)。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング