webサイトの模写コーディングに便利なGoogleChromeの拡張機能について

TOP

こんにちは、かずまです。

今回はweb制作の練習としてサイトの模写コーディングをする人に向けて書いています。

模写コーティングをする際に必ず困るのは、ここの幅どれぐらいだろうとなったり、ここのフォントどうなってんの?といった目で見るだけではわからないサイトの細かい部分です。

模写コーディングをするなら細かいところまで模写したいですよね。

そこでGoogle Chromeには拡張機能といった便利すぎる機能があります。

この拡張機能はたくさんあるのですが、今回はその中でも特に模写コーディングに使える拡張機能を紹介します。

Google Chromeの便利な拡張機能

Image Downloader

この拡張機能は画像をダウンロードすることができます。

模写コーディングをするときに必ずしも同じ画像を使う必要もないですが、同じ画像を使いたいという方は是非使ってください。

私は模写コーディングを始める前に全部一括でダウンロードしちゃいます。

かなり便利なので是非使ってみてください。

公式サイトからダウンロード

What Font

こちらはwebサイトで使われているフォントを調べることができます。

webサイトで使われているフォントはもちろん見ただけではわかりません。

ディベロッパーツールを開けばわかりますが、なるべくディベロッパーツールを開きたくないという方も多いのではないでしょうか。

フォントはwebサイト全体の印象も左右する大事な要素ですので、ぜひ模写コーディングをする場合はWhat Fontを使ってみてください。

公式サイトからダウンロード

Page Ruler Redux

これはweb定規のような機能があり、サイト上の余白の部分などを測ったりすることができます。

これはほんとに便利です。

少しのズレでも気になってしまったりしますが、これを使えば綺麗に模写コーディングをすることができます。

公式サイトからダウンロード

Full Page Screen Capture

これはwebサイト全体をスクリーンショットのような形で画像に収めることができます。

通常のスクリーンショットだと画面に収まる範囲内しか画像にすることができませんが、このFull Page Screen Captureを使うとwebサイトの全体の構造がひと目で把握することができます。

また自分が作ったwebサイトも画像にすることができるので、完成したもののバランスをみてみることもできます。

公式サイトからダウンロード

Emmet Re:view

これはさまざまなレスポンシブデザインを確認することができる機能です。

web制作を始めてほとんどの方がこのレスポンシブデザインでつまづくと思っています。

レスポンシブデザインとはサイトをパソコンだけでなく、スマホやタブレットにも合うデザインを作るという事です。

Emmet Re:viewを使うとiphoneからAndroidのスマホまであらゆる端末のレスポンシブデザインが一気に確認することができます。

レスポンシブデザインを作る時には作業が一気に楽になると思います。

公式サイトからダウンロード

Color Zilla

これは選択した場所の色がわかる拡張機能です。

初めてプログラミングを始めると色の種類の多さに驚くという人も少なくありません。

#〇〇〇〇〇〇で表したりrgb〇〇〇で表したりとたくさんの種類の色が表現できます。

なので色を見ただけで判断することができません。

この拡張機能を使うとどんな色でもすぐにわかるので多くの場面で活躍します。

公式サイトからダウンロード

まとめ

今回はwebサイトの模写の時に使えるGoogle Chromeの拡張機能を紹介しました。

web制作を学び始めて最初に基本的なことを学んだら大体の人がwebサイトの模写を始めると思います。

webサイトの模写は初めは難しくて苦労すると思いますが、Google Chromeの拡張機能を使って少しでもサイト模写が捗ると嬉しいです。

コメント

タイトルとURLをコピーしました