WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： マークアップ >作業効率化

WEB制作には欠かせないCSS。
今回はCSSに関する拡張機能「CSSViewer」をご紹介します。

「CSSViewer」について

「CSSViewer」はWEB上でCSSをお手軽に確認することが出来る拡張機能です。
下記URLから追加することで使用可能になります。

Google Chrome：CSSViewer

ページ右上の「Chromeに追加」ボタンを押します。

Firefox：CSSViewer

ページ中央の「Firefoxへ追加」ボタンを押します。

使い方

拡張機能を追加後、右上に下記アイコンが追加されます。

追加されたアイコンをクリックするとポップアップが表示されます。
そのまま画面上にマウスを持っていくことで各部分のCSSを見ることが出来ます。

メリット

CSSの確認は標準で搭載されているデベロッパーツールでも可能ですが、
「CSSViewer」は動作が非常に軽くマウスオーバーで直感的に分かるため、

• フォントの種類は何か
• 余白がどれだけ取ってあるか
• フォントサイズがいくつか
• 使用されているカラーコードは何か

など、ちょっとした確認の際はこちらがオススメです。

まとめ

PCの動作が重い時や気軽にCSSを調べたい際には、
非常に重宝するかと思いますのでぜひ活用してみて下さい。