Go to Top

Web制作の確認に便利な「Chrome 拡張機能」2選


重宝する Google Chrome 拡張機能

Web制作に欠かせないのが「Chrome」のデベロッパーツール。
Webページ内のどこでもよいので右クリックして「検証」を選択すれば、WebサイトのHTMLやCSSが表示され、コードの検証が手軽にできます。「Chrome」のデフォルト機能なので、Webデザイナーの皆さんは使っていると思います。

今回は、このデベロッパーツールの補助として「Chrome」をより便利にしてくれる拡張機能を2つ紹介します。

 

CSS Peeper

今開いているサイトで使われているフォント、配色、画像などが調べられます。
グラデーションカラーのチェックもできるので、このサイトの配色を自分のサイトに使ってみたいなと思った時、とても便利です。
さらに要素のボックスモデルも確認できます。

002

 

WhatFont

カーソルを合わせるだけで何のフォントかを表示してくれます。
クリックするとサイズや太さ、色などの詳細とフォントのサンプルが表示されます。

003

 

以上の2つは、デベロッパーツールでも確認できますが、この拡張機能を使えば、デベロッパーツールの細かな文字をなぞらなくても、手軽に確認できます。
「Chrome」に入れておいてはいかがでしょうか。