というわけで、今回は便利な拡張機能やアプリを紹介していきたいと思います。（MacでもWindowsでも対応できるように載せています）
模写コーディングだけではなく、今後パソコンを使う上でも役に立つものがあるので是非使ってみてくださいね〜！
本記事の内容
要素の長さを測る
PageRuler
クリックしながらカーソルをあわせると、長さがわかります。
「Width ○○px」や「Height ○○px」というように細かく数値を表示してくれます！
左右の余白やボタンの大きさなどはこれで測れば一発ですね(^^)
文字の大きさや種類
WantFont
知りたい文字の上にカーソルをあわせ、クリックします。
すると画像のように黒い画面の上に
- font-family
- font-weight
- font-size
- line-height
などが表示されます。
画像取得
Image Downloader
表示されているWebページに使われている画像を自分のPCにダウンロードすることができます。
わざわざ自分で似ている画像を探して模写コーディングに組み込む必要はありません。
当初はこの機能があることを知らなかったので似たような画像を探して当てはめていたので時間がかかっていました（なんて非効率。。！）
あなたには効率よく勉強を進めて欲しいので、この便利な便利な機能の使い方を説明します。
- Select allにチェックを入れる
- SAVE TO SUBFOLDERの欄に保存したいフォルダ名を記入する（※）
- DOWNLOADをクリック
- 「Take a quick look at your Chrome settings and search for the download location. If the Ask where to save each file before downloading option is checked, proceeding might open a lot of popup windows. Are you sure you want to do this?」というメッセージが出るが、気にせずYESボタンをクリック
- 終了。PCのDownloadファイルに保存されているので開いてみましょう。
※SAVE TO SUBFOLDERに何も書かないと一枚一枚バラバラに保存されてしまうのでフォルダ内が汚くなってしまうので注意！
色を調べる
ColorPick Eyedropper（拡張機能）
知りたい色の部分にカーソルを持っていくと、色がわかります。
拡張機能なので誰でも使えます。
（個人的には下の「Digital Color Meter」の方がスムーズに使えるので好きです）
Digital Color Meter（Macデフォルト）
Macユーザーはデフォルトで入ってる「Digital Color Meter」が使えます。
入っている場所は
アプリケーション ＞ ユーティリティ ＞ Digital Color Meter.app
→（Dockに追加しておくと便利）
ちなみに私の詳しい設定状況がこちらです。
- sRGBで表示
- 表示 ＞ 拡大 ＞ ８x
- 表示 ＞ 値を表示 ＞ 16進
画面全体をスクショする
Full Page Screen Capture
Webページを丸ごとスクリーンショットできる代物。
普通のスクショだと、ブラウザ上にある画面しかスクショできないのですが
このFull Page Screen Captureがあれば長いページだって１枚の写真に収まります◎
「せっかく模写したのに全体をスクショできない、、！」という歯痒い思いをしなくて済みますよ！
スクショする際の、画像を食べていく感じも可愛いです(^^)
コピペが一気にできる
Clipy（Mac）
これはアプリになりますが模写コーディングのみならず、
日頃からお世話になっているコピペのアプリです。
こんな風に過去にコピーしたものを保存しておけるので、後から一気にペーストすることが可能です。
使い方はダウンロードした後「Clipy 使い方」でググるとたくさん出てきます。
簡単なのですぐに使えるようになると思います。
これはまじでめちゃくちゃ便利なので入れてください！笑
こちらはMac専用なのですが、同じようなアプリがWinDowsにもあるみたいなので下に書いておきますね。
Clibor（Windows）
機能はClipyと同じです！
こちらに詳しい内容が載っているので参考にしてみてください。
