CSSを調べてコピーする簡単で最速なツール「CSS Scan 2.0」

2019/05/15 09:00

WebページのCSS要素を見るのに、デベロッパーツールを開く時代は終わりました。今、最速かつ最も簡単なツールが「CSS Scan 2.0」です。

◆ CSSの要素をみる最速かつ最も簡単なツール「CSS Scan 2.0」
https://getcssscan.com/

紹介

写真を見ると分かりますが、CSSの要素がスタイリッシュなポップアップで表示されます。

なお、こちらは有料ツールになっていますが、1度購入すればずっと使えます。

もっとわかりやすい使用例です。

現在はChromeとFirefoxに対応。Safariも次期リリース予定ですが、IEは対象外のようです。

インストール

まずはダウンロードの前に購入します。

決済完了画面にDownloadのボタンを押してツールをダウンロードします。

中身はこんな感じ。「Chrome - Mac」のファイルを開きます。

するとChromeのエクステンション画面がでてきますのでブラウザに追加します。

エクステンションのメニューをクリックすると、初回起動時にライセンスキーを入力する画面がでてきます。早速AnyPicksで試してみましょう。

使ってみる

メニューはこんな感じで、そんなに機能があるわけではありません。まずは肝心なCSSの要素を調べてみましょう。

このようにマウスオーバーすると、そのCSSがポップアップをいい感じに表示してくれます。

Bootstrapを使ってるAnyPicks magazineも問題なく表示されます。

なおオプションはこのようになっていますが、なかでも便利なのが「Show grid」です。

このようにWebページをGrid上に表示してくれるので、UIのズレやスキマなど想定と違うCSSが調整しやすくなり作業効率が大分上がります。

まとめ

面倒なCSSの調整などの作業効率が大分あがると思います。フロントエンドのエンジニアなど、ガシガシCSSをいじる方にとっては良いツールではないでしょうか。有料ツールですが、買い切り型なのも良いですね。

◆ CSSの要素をみる最速かつ最も簡単なツール「CSS Scan 2.0」
https://getcssscan.com/

ログイン
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。