[保存版]WEB制作スピードが驚異的に上がる!お役立ちおすすめ拡張機能とアドオン

  CSS, HTML, javascript, WEB , ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
firefox chrome アドオン 拡張機能

WEBサイトの制作を行って、ブラウザで確認したり既存のサイトを分析・参考にする際に、多くの便利で役立つ拡張機能・アドオンが存在します。そこで今回は、WEBサイト制作者が使って便利なブラウザ「ChromeFirefox」で利用できる拡張機能アドオンについてご紹介したいと思います。これを使いこなせば、WEB制作スピードが驚異的に上がること間違いなしです。

Firefoxアドオン

ブラウザ上でのWEB制作をさらに便利にするFirefoxアドオンを下記にご紹介したいと思います。

Firebug

firefox firebug アドオン

Firefox 上でWEB制作時に多くの方が利用している定番のアドオンです。サイトの HTML・CSS・JavaScript などのコードのチェックや編集ができるアドオンです。
URL:https://addons.mozilla.org/ja/firefox/addon/firebug/

WEB Developer

firefox web developer アドオン

Firefox 上で CSS・画像・JavaScript をオフにしてどう表示されるかチェックしたり、手軽にWEBサイトの制作、検証の定番のアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/web-developer/

ColorZilla

firefox colorzilla アドオン

Firefox 上でブラウザに表示されたページの色をスポイトで拾い、簡単にカラーコードを表示することができ、参考サイトのカラーチェックができグラデーションの作成などもできるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/colorzilla/

Firepicker

firefox firepicker アドオン

Firefox 上で Firebug にカラーピッカー機能を追加でき、Firebug で CSS のスタイル・カラー編集ができるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/firepicker/

User Agent Switcher

firefox user agent switcher アドオン

Firefox 上でPCブラウザ上で各デバイスのタブレット・スマートフォンサイトなどの表示検証が簡単にできる便利なアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/

LinkChecker

firefox link checker アドオン

Firefox 上で正常なリンクが緑色・リンク切れはピンク色・アクセス制限がある場合などは黄色に変化することで、ページのリンク切れをチェックできるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/linkchecker/

Awesome Screenshot Plus

firefox awesome screenshot plus アドオン

Firefox 上で範囲指定だけでなく、ページ全体のスクリーンショットもとれ、画像の編集もできるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/awesome-screenshot-capture-/

Pearl Crescent Page Saver Basic

firefox pagesaver アドオン

Firefox 上で気に入ったサイトやバナーなどのキャプチャーを簡単に撮ることができるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/pagesaver/

Measure It

firefox measureit アドオン

Firefox 上でWEBサイトのページの縦横のサイズや配置されているコンテンツの幅や高さなどを計測できるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/measureit/

Page Ruler

firefox page ruler アドオン

Firefox 上でWEBサイトのページの要素の縦横(ピクセル)を計測することができ、コンテンツのサイズをドラッグ&ドロップで測定できるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/page-ruler/

Font Finder

firefox font finder アドオン

Firefox 上でWEBページ上で使用されているフォント情報を表示してくれ、調べることができるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/font-finder/

HTML5 Outline

firefox html5 outliner アドオン

Firefox 上で HTML5 形式で文書構造であるアウトラインを表示してくれるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/html5_outliner/

FireGestures

firefox firegestures アドオン

Firefox 上で右ボタンを押しながらマウスを様々な方向に動かす(マウスジェスチャー)だけで「前のページに戻る」や「次のページに進む」といった動作ができるようになるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/firegestures/

ichinen search for Firefox

firefox ichinen search アドオン

Firefox 上で公開日・更新日が1年以内や1ヶ月や1時間以内などの検索の期間を指定できるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/ichinen-search/

Feedly Notifier

firefox feedly notifier アドオン

Firefox 上で Feedly の新着通知をタスクトレイに表示させることができるアドオンです。
URL: https://addons.mozilla.org/ja/firefox/addon/feedly-notifier/

Chrome拡張機能

ブラウザ上でのWEB制作をさらに便利にするChrome拡張機能を下記にご紹介したいと思います。

WEB Developer

chrome web developer 拡張機能

Chrome 上でCSS・画像・JavaScript をオフにしてどう表示されるかチェックしたり、手軽にWEBサイトの制作、検証の定番の拡張機能です。
URL: https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ja

ColorZilla

chrome colorzilla 拡張機能

Chrome 上でブラウザに表示されたページの色をスポイトで拾い、簡単にカラーコードを表示することができ、参考サイトのカラーチェックができグラデーションの作成などもできる拡張機能です。
URL: https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja

ColorPick Eyedropper

chrome colorpick eyedropper 拡張機能

Chrome 上でCSSのスタイル・カラー編集ができ、カラーピッカー機能を追加する拡張機能です。
URL: https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=ja

User Agent Switcher

chrome user agent switcher 拡張機能

Chrome 上でPCブラウザ上で各デバイスのタブレット・スマートフォンサイトなどの表示検証が簡単にできる便利な拡張機能です。
URL: https://chrome.google.com/webstore/detail/user-agent-switcher/ffhkkpnppgnfaobgihpdblnhmmbodake?hl=ja

Dr.Web Anti-Virus Link Checker

chrome drweb anti virus link che 拡張機能

Chrome 上でページのリンク切れをチェックできる拡張機能です。
URL: https://chrome.google.com/webstore/detail/drweb-anti-virus-link-che/aleggpabliehgbeagmfhnodcijcmbonb?hl=ja

Awesome Screenshot

chrome awesome screenshot 拡張機能

Chrome 上で範囲指定だけでなく、ページ全体のスクリーンショットもとれ、画像の編集もできる拡張機能です。
URL: https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=ja

FireShot

chrome capture webpage screenshot 拡張機能

Chrome 上で範囲指定だけでなく、ページ全体のスクリーンショットもとれ、画像の編集もでき、外部ソフトでも開くこともできる拡張機能です。
URL: https://chrome.google.com/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

Measure It

chrome measureit 拡張機能

Chrome 上でWEBサイトのページの縦横のサイズや配置されているコンテンツの幅や高さなどを計測できる拡張機能です。
URL: https://chrome.google.com/webstore/detail/measureit/pokhcahijjfkdccinalifdifljglhclm?hl=ja

Page Ruler

chrome page ruler 拡張機能

Chrome 上でWEBサイトのページの要素の縦横(ピクセル)を計測することができ、コンテンツのサイズをドラッグ&ドロップで測定できる拡張機能です。
URL: https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=ja

WhatFont

chrome whatfont 拡張機能

Chrome 上でWEBページ上で使用されているフォント情報を表示してくれ、調べることができる拡張機能です。
URL: https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

HTML5 Outline

chrome html5 outliner 拡張機能

Chrome 上で HTML5 形式で文書構造であるアウトラインを表示してくれる拡張機能です。
URL: https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja

crxMouse Chrome Gestures

chrome crxmouse chrome gestures 拡張機能

Chrome 上で右ボタンを押しながらマウスを様々な方向に動かす(マウスジェスチャー)だけで「前のページに戻る」や「次のページに進む」といった動作ができるようになる拡張機能です。
URL: https://chrome.google.com/webstore/detail/crxmouse-chrome-gestures/jlgkpaicikihijadgifklkbpdajbkhjo?hl=ja

ato-ichinen

chrome ato ichinen 拡張機能

Chrome 上で公開日・更新日が1年以内や1ヶ月や1時間以内などの検索の期間を指定できる拡張機能です。
URL: https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph?hl=ja

Feedly Notifier

chrome feedly notifier 拡張機能

Chrome 上で Feedly の新着通知をタスクトレイに表示させることができる拡張機能です。
URL: https://chrome.google.com/webstore/detail/feedly-notifier/egikgfbhipinieabdmcpigejkaomgjgb?hl=ja

参考サイト

参考にさせていただいたサイトを下記に示したいと思います。

SNSでもご購読できます。

コメントを残す

*