WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： かじかじ
カテゴリー： マークアップ >作業効率化

12月に入社しました、かじかじです。
役に立つ情報をお届けできるよう、がんばります。
よろしくお願いします！

コーディングをおこなうときに、知っていると便利なChrome拡張機能を5つご紹介します。

便利なChrome拡張機能

要素のサイズや余白を測る

ページ上をドラッグ＆ドロップするだけで、幅や高さを計ることができます。
要素の大きさを知りたいときや、余白の幅や高さを知りたいときに便利です。

Page Ruler Redux

ページ内の画像を一括保存!

保存したい画像にチェックをしてDownloadボタンを押すと、ページ上の画像を一括で保存することが可能です。

また、WidthやHeightのチェックボックスにチェックを入れ、右側のスライドを動かすことで、画像のサイズを変更して保存することも可能です。

Image Downloader

カラーコードを調べる

色を調べたい箇所にカーソルを合わせることで、カラーコードを確認することができます。

ColorPick Eyedropper

フォントの情報を調べる

使用されているフォントを調べたい箇所をクリックすることで、フォントの種類や太さ、大きさ等文字に関する情報を見ることができます。

What font

ページ全体のスクリーンショットを撮る

GoFullPageのアイコンをクリックするだけで、見えている部分だけでなく、ページ全体のスクリーンショットを撮ることができます。

全体のレイアウトを確認したいときに役立ちます。

GoFullPage-Full Page Screen Capture

まとめ

実際に私が使ってみて、便利だなと思ったものをご紹介しました。
コーディングをおこなうときは、ぜひ活用してみてください。