WEBサイト模写に超便利なchrome拡張機能7選

2020年10月14日2020年10月16日

おはようございます。はんざきです。

WEBデザインの勉強方法の一つにWEBサイト模写というのがあります。

僕も時間があるときにちょこちょこと模写をやったりするのですが、結構時間が掛かるので割とめんどくさい

デベロッパーツールで随時確認しながら模写をすると結構手間なので、なるべく負担を軽くするためにグーグルの拡張機能を使ってみて、その中で便利だったものを7つ紹介しようと思います

WEB制作を学習できるWEBサイトと学習手順

ブログアイキャッチおはようございます。はんざきです。今、自分はまだ駆け出しではありますが、WEBデ ...

http://yurarido.info/webdesign/post-56

拡張機能7選

CSS Pepperはフォントやボタンなどの要素のWEBサイト内の要素を調べることができる拡張機能です

使い方によってはどこがブロック要素なのかなど調べられるので、レイアウトの組み方も参考にも使えます

WEBサイト内の画像を一括でダウンロードできる拡張機能です
背景画像はダウンロードできないので、デベロッパーツールからダウンロードしましょう

WEBサイトのスクリーンショットを撮ることができます
ページ全体のスクリーンショットを撮影して、デザインソフトからのトレースでデザインの勉強にも重宝します

WEBページの任意の場所からスポイトで色を取得できます

要素間の長さを測れる、定規系の拡張機能

あるとすごく便利です

レスポンシブに対応したときに検証につかいます

様々なサイズでのレスポンシブ表示ができます

完成した模写サイトが実際のサイトと、どのくらいズレがあるのか調べられます

完璧ではなくても良いですが、なるべくズレがおこらないようにしましょう

今回は、WEBデザインの模写コーディングをする際に便利なGoogle拡張機能を紹介しました

模写コーディングをすると、実際のコーディングはどうなのか、ここはこういうタグを使っているのかなど参考になることは多いので少しずつでもやっていきましょう

Posted by Hanzaki