Web製作をやっていると「HTML5やCSS3は書けるけど、どのようなデザインを描いたら良いか分からない…」という悩みを持ってしまいがちですよね。
「〇〇というサイトのデザインのようにキレイなデザインを描きたい」という目的は明確だけど描けないという方に、今回は競合サイトのCSSコードを利用できるGoogle拡張機能「CSSViewer」をご紹介します！
競合サイトのCSSコードを丸裸！？Google拡張機能「CSSViewer」とは…？
Google拡張機能「CSSViewer」とは、競合サイトや他のWebサイトのCSSコードを覗き見られる拡張機能です。
マウスオーバー一つで簡単に、参考にしたいパーツごとのデザインを可視化します。
またこの拡張機能を使うことで、パーツ間の細かいピクセル数まで表示できるので、実際のWebサイトを想定したWebデザインを効率良く行えます。
Google拡張機能「CSSViewer」の使い方
では最初に、ChromeウェブストアよりGoogle拡張機能「CSSViewer」を導入しましょう。
※Google拡張機能の導入の仕方が分からないという方は、コチラの「非公式Google拡張機能導入マニュアル」をご参照ください。
次にデザイン技術を盗みたいWebサイトを表示し、例のごとく拡張機能アイコンをクリックします。ちなみに今回はWebCustomを例に使い方をご紹介していきます。
後は装飾を参考にしたいパーツにマウスを乗せてみましょう。するとこのようにパーツのデータが細かく表示されました。
ちなみに補足としてCSSの見方をざっくりご紹介すると、「Font＆Text」欄は、描かれている文字の大きさやフォントの種類を…
「Color＆Background」欄では、文字の色と背景色を…
「Box」欄では、パーツ間の距離とパーツの大きさを…
「Positioning」欄では、配置を…
「Effects」欄ではCSSアニメーションなどの動的工夫がそれぞれ見れます。
終わりに…
今回は、Google拡張機能「CSSViewer」の使い方についてご紹介しました。
Web製作をお仕事にされている方、勉強されている方は、ぜひこの機会に導入してみてはいかがでしょうか？
