素早く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拡張機能のまとめ記事もどうぞ。

スポンサーリンク

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

Amazonでの買い物について

当ブログではAmazonの商品をよく紹介しています。

いつもコンビニ払いしている人は、Amazonギフト券をチャージするとポイントが余分にもらえるので、今まで知らなかったという人は読んでみてください。

・キャンペーン中なら初回購入で1000ポイント付与
・チャージする金額によって0.5~2.0%ポイント付与

Amazonギフト券チャージタイプの詳細はこちら

また、プライム会員ならさらに0.5%上乗せされます。

ーーー

プライム会員の特典は「お急ぎ便無料」「プライムビデオで多数の映画やアニメ見放題」が特にお得。それ以外にも音楽・読書の使い放題サービスあり。

料金は年額3,900円(月換算325円)で、世界的に日本だけなぜか破格の安さになっているので、配送・映像・音楽・読書など、一部でもよく利用する人なら非常におすすめです。

プライム会員の詳細はこちら

学生ならPrime Studentがさらにお得

スポンサーリンク

著者のフォローはこちら

名前:
Twitter
YouTube

ーーー

制作物:「ノイズレスサーチ

プロフィール
問い合わせフォーム
当サイトご利用時の注意事項

記事が良いと思ったら、Twitterでツイートしたり、ブログなどで紹介してくださると嬉しいです。よろしくお願いします。

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

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