CSSの見える化「CSS Scan 2.0」

はじめに

新卒で入社した溝口です。

Webサイトを巡回しているときに、「このボタンのデザインいいなー」とか「この要素どうやって実装しているんだろう」と思ったことがあるのではないでしょうか?

開発に慣れている方ならブラウザの開発者ツールを使うかと思いますが、痒いところに手が届かない感は否めません。

そんなときに役立つ「CSS Scan 2.0」というツールが便利だったので、紹介します!

CSS Scan 2.0とは

CSS Scan 2.0はWebブラウザの拡張機能で、CSSの確認・編集・コピーといった作業を行うためのツールです。

Chrome、Firefox、Safari、Edgeといった主要なブラウザに対応しています。

CSS Scan – The fastest and easiest way to check, copy and edit CSS (getcssscan.com)

使い方

使い方はCSS Scanを有効にした状態で、気になる要素をクリックするだけ!

クリックした要素のHTMLとCSSが表示されるので、CSSプロパティを見て勉強するのもよし、スニペットとしてどこかにまとめておくのもよし、自由に使うことができます。

気になる方はこちらから試せます。

弱点

唯一の弱点ともいえる点は、有料買い切り方のサービスだということです。(それも結構いい値段します…)

定期的にセールを行っているので、気になる方はセールを待つのもいいかもしれません。

おわりに 

CSS Scan 2.0は初学者やデザインのレパートリーを増やしたい人にとって有用なツールだと思います。

今回紹介しなかった以外にも便利な機能があるので、気になった方は使ってみてください!

FIXER Inc. 溝口 遥大
  • FIXER Inc. 溝口 遥大