Web制作に役立つChromeおすすめの拡張機能11選

世界のブラウザで圧倒的シェアを誇るGoogle Chromeですが、便利な機能拡張もいろいろ揃ってます。皆さんも自分好みの機能拡張を利用してると思いますが、Web制作の際にも作業効率をアップできる機能拡張も多くあります。そこで今回はWebデザイン制作時に役立つGoogle Chromeの機能拡張を厳選して紹介します。





おすすめ機能拡張




1

CSS Peeper

閲覧しているページのCSSを教えてくれる機能拡張。ブラウザのCSS Peeperボタンをクリックするとフォント・カラー・イメージ情報が表示されます。
2

Web Developer

Web制作では定番の機能拡張。解析・検証に役立つツールが揃ってます。
3

WhatFon

ソースを調べなくてもフォント情報を表示できる機能拡張。調べたいテキストにカーソルを合わせるとfont-familyfont-sizeline-heightといっフォントの情報が表示されます。
4

Clear Cache

ブラウザーのキャッシュをクリアしてくれる機能拡張。webサイトの更新確認などに地味に役立つ。
5

ColorZilla

シンプルなカラーピッカー。サイト上のカラーを調べたい箇所をクリックするだけでカラーコード(16進数)をコピーできます。
6

Page Ruler

その名の通りページ上のイメージや余白などを測りたい時に役立つ機能拡張。
7

xvg

SVGのアンカーポイントを表示させる機能拡張。
8

WhatRuns

Webサイトで使用しているCMS・プラグイン・JavaScriptなどを一覧表示してくれるサイト調査に役立つ機能拡張。
9

SimilarWeb

アクセス数や流入キーワードなどを解析できる機能拡張。SimilarWebのサイトに行かなくてもブラウザのボタンをクリックするだけで、サイトのアクセス解析ができます。
10

Full Page Screen Capture

ランディングページなど、長いページをキャプチャを撮りたい時に便利な機能拡張。
11

Session Buddy

調べものをしているとブラウザのタブがどんどん増えていくことがありますが、そのタブを保存できる機能拡張。セーブしておけばブラウザを閉じてしまっても、セーブしたタブを表示(復元)できます。

Web制作から調査まで、便利な機能拡張の紹介でした。Google Chromeの機能拡張は機能のオンオフ・削除が簡単にできるので、気になる機能拡張があれば試してみてください。


PICK UP
RELATED POSTS
  • 10年前の有名サイトを振り返ることができる「Ten Years Ago」
  • アイコンフォント「FontAwesome」の使い方
  • レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」
  • 【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」
  • CSSでインスタグラムのようなフィルターを再現できる「Instagram.css」
  • Youtubeのヘッダー・フッターを消す「PrettyEmbed.js」
POPULAR POSTS
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • フォントを調べる時に役に立つサービス・サイトまとめ
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年9月版】
  • 無料で使えるおしゃれな英語の筆記体フリーフォントまとめ
RECENT POSTS
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年9月版】
  • プライス・値段表示などに使えそうな英数字フォント13選
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで作成する吹き出しとデザインのアイデア