素早くCSSを見れるChrome拡張機能「CSSViewer」

CSSViewerアイキャッチ画像

最近ブログのCSSをカスタマイズすることが非常に多いからかCSS関連のツールを使うことが多くなってきました。

その中でもマウスオーバーだけでCSSを確認できるChrome拡張機能を紹介します。

スポンサーリンク

CSSを簡単に確認できる拡張機能

使い方はとても簡単でChrome拡張機能の「CSSViewer」を起動してCSSが見たいなーと思った部分にマウスオーバーするだけです。

拡張機能「CSSViewer」をダウンロード

まずChromeウェブストアからCSSViewerをダウンロードします。

拡張機能:CSSViewer

ダウンロードが完了するとChromeの右上の方にアイコンが表示されてすぐに使うことができます。

マウスオーバーでCSSを見る

画面右上の拡張機能の中にあるCSSViewerのボタンをクリックします。

CSSViewerインストールしたところ

すると画面上にマウスを持っていくだけで赤枠とともにCSSの中身がポップアップで表示されます。

CSSViewerを使ったところ

例えばh3見出しの部分にマウスオーバーするとh3の部分が赤枠で囲まれるのでどこからどこまでがその要素なのかわかりやすくて直感的。

とくにフォントサイズの確認をしたい時によく使います。

CSSViewerはちょっとだけ確認したい時に便利

機能的にはChromeに標準で搭載されているデベロッパーツールのほうがはるかに多機能ですけど何といってもCSSViewerは起動時間が短くクリックしなくても見れるので圧倒的に手間が少なくなります。

  • フォントサイズが見たい
  • カラーコードが見たい
  • 画像の幅や高さが見たい

というごくごく簡単な確認ならデベロッパーツールを起動するほどでもないのでCSSViewerを使うととても便利です。

ショートカットキーを使って一瞬で確認する

ただし「一瞬で起動して一瞬で閉じる」というのは普通だと無理なのでCSSViewerにショートカットキーを割り当ててさらに使い勝手を向上させましょう。

特に難しい設定ではなくChromeのメニューをクリックして進んでショートカットキーを入力するだけなので今までCSSViewerを使っていた人でもまだ設定していないなら必見です。

Chrome拡張機能のまとめ記事もどうぞ。

スポンサーリンク

このページのシェア・保存はこちら

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。