最近ブログのCSSをカスタマイズすることが非常に多いからかCSS関連のツールを使うことが多くなってきました。
その中でもマウスオーバーだけでCSSを確認できるChrome拡張機能を紹介します。
もくじ
CSSを簡単に確認できる拡張機能
使い方はとても簡単でChrome拡張機能の「CSSViewer」を起動してCSSが見たいなーと思った部分にマウスオーバーするだけです。
拡張機能「CSSViewer」をダウンロード
まずChromeウェブストアからCSSViewerをダウンロードします。
拡張機能：CSSViewer
ダウンロードが完了するとChromeの右上の方にアイコンが表示されてすぐに使うことができます。
マウスオーバーでCSSを見る
画面右上の拡張機能の中にあるCSSViewerのボタンをクリックします。
すると画面上にマウスを持っていくだけで赤枠とともにCSSの中身がポップアップで表示されます。
例えばh3見出しの部分にマウスオーバーするとh3の部分が赤枠で囲まれるのでどこからどこまでがその要素なのかわかりやすくて直感的。
とくにフォントサイズの確認をしたい時によく使います。
CSSViewerはちょっとだけ確認したい時に便利
機能的にはChromeに標準で搭載されているデベロッパーツールのほうがはるかに多機能ですけど何といってもCSSViewerは起動時間が短くクリックしなくても見れるので圧倒的に手間が少なくなります。
- フォントサイズが見たい
- カラーコードが見たい
- 画像の幅や高さが見たい
というごくごく簡単な確認ならデベロッパーツールを起動するほどでもないのでCSSViewerを使うととても便利です。
ショートカットキーを使って一瞬で確認する
ただし「一瞬で起動して一瞬で閉じる」というのは普通だと無理なのでCSSViewerにショートカットキーを割り当ててさらに使い勝手を向上させましょう。
特に難しい設定ではなくChromeのメニューをクリックして進んでショートカットキーを入力するだけなので今までCSSViewerを使っていた人でもまだ設定していないなら必見です。
Chrome拡張機能のまとめ記事もどうぞ。
