【2020最新版】模写に便利なchrome機能(イメージダウンローダー/カラーピックアイドロッパー/スクリーンショット)プログラミング独学講座5
プログラミングの学習に模写は欠かせません。
今回は、その模写をするために便利なGoogleクロームの機能を紹介します。
紹介する機能は以下の三つです。
便利機能1
サイトの画像をとる
その名のとおりの機能をもつ Chromeの拡張機能です。
これがあれば模写するサイトが使っている画像やアイコンを一括してダウンロードすることができ、自分の模写サイトに使えます。
ひとつひとつを保存するより、ずっと便利かつ効率的です。
「イメージ・ダウンローダー」インストール方法
「イメージ・ダウンローダー」に限らず、chromeには、魅力的な拡張機能がたくさんあります。
そのどれも、インストール方法はすべて一緒です。
まず、「クローム ウェブストア」にいきます。
「拡張機能を追加」をクリックします。
<
「イメージ・ダウンローダー」使い方
自分が模写するサイトを表示してから、「イメージ・ダウンローダー」のアイコンをクリックすると、このように、そのページのすべての画像が表示されます。
たぶん、全部の画像が必要だと思うので、[select all]にチェックを入れます。ひとつずつ選ぶこともできます。
続いて[download]をクリックします。
すると、すべての画像がダウンロードされます。
あとは、模写で活用してください。
便利機能2
サイトの色味を調べる
こちらもGoogleのウェブストアから入手します。
入手方法は、イメージ・ダウンローダーと同じです。
このカラーピック・アイドロッパーのすごいところは、調べたい色味のところに持っていくだけで、即座に色を指定してくれるところです。
「カラーピック・アイドロッパー」使い方
ダウンロードすると、やはり、右上にアイコンができます。
そこをクリックすると、四角のポインターに変わり、ポインターをもっていったところの色味が出ます。
カラーコードも出ますし、rgb表記でも、出ます。
すごい便利ですね。
便利機能3
要素の縦と横のpxを調べる(Mac限定)
最後は、ちょっとした応用編です。
しかも、Mac限定です。
みなさんも普段からスクリーンショットは多用していると思います。
Macでは、2通りのスクリーンショットがあります。
全画面と部分画面です。
全画面とは、文字どおり、全部の画面をスクショすることで、
全画面がスクショできます。
これも便利なのですが、
今回はこちらです。
部分画面スクリーンショットで要素のPXを調べる方法
Macでは、この方法で、部分スクショができます。
模写するときに役立つ3つのツール
画像をとるなら → Image Downloader(イメージ・ダウンローダー)
色味を調べるなら → ColorPick Eyedropper(カラーピック・アイドロッパー)
要素のpx数を調べるなら → 部分画面スクリーンショット(Mac限定)
(プログラミング独学講座 これまでの記事)