ページの大きさ・色・フォント・CSSを、ひと目で。

CSS Glance は、Webサイトを作る人のための小さなChrome拡張です。アイコンを押して要素にマウスを乗せると、知りたい情報がパネルにまとまって出ます。

基本機能は無料です。会員登録はいりません。パソコンの Chrome 用の拡張です。

入れた直後の3手順

1. ストアのページで「Chrome に追加」を押します。
2. 好きなWebサイトを開き、CSS Glance のアイコンを押します(パズルの形のアイコンの中から、ピンで固定しておくと便利です)。
3. 要素にマウスを乗せます。

無料でできること

• 大きさと余白マウスを乗せた要素の幅×高さ、外側・内側の余白、角の丸み。
• フォントフォント名、文字の大きさ、行の高さ、太さ。
• 色をワンクリックでコピー文字色と背景色をカラーコードで表示。クリックでコピーできます。
• コントラストの確認文字と、実際に後ろに見えている背景(半透明の重なりも計算)とのコントラスト比と、WCAGのAA・AAAの判定。
• 要素を固定クリックでその要素を選んだままにできます。調べている間、ページのリンクやボタンは動かないようにしています(スクリプトで動く一部の要素は反応することがあります)。
• 外部に送らない読み取った内容はどこにも送信しません。ページを読むのは、アイコンを押したときだけです。

AA・AAAの判定は計算の目安です。適合を証明するものではありません。

有料版で増える機能

• CSSをコピー要素のスタイルを、整った形でコピー。ブラウザの初期値と違うものだけを、margin・border・border-radius などはまとめた書き方で出します。
• ページの色とフォントの一覧ページで見つかった色、フォント、文字の大きさを、多い順に一覧。
• すき間の計測1つの要素を固定して別の要素にマウスを乗せると、横と縦のすき間が出ます。

料金

有料版は、一度の購入で、追加の料金なく使えます(月額なし)。

ご利用前に

• 表示するフォント名は、その要素に指定されている最初のフォントです。そのフォントが入っていない端末では、ブラウザが次の候補で表示していることがあります。
• ほかのサイトを埋め込んだ枠(iframe)の中は調べられません。
• ブラウザの設定画面やChromeウェブストアなど、拡張が動かないページがあります。