
WEBサイトの制作を行って、ブラウザで確認したり既存のサイトを分析・参考にする際に、多くの便利で役立つ拡張機能・アドオンが存在します。そこで今回は、WEBサイト制作者が使って便利なブラウザ「ChromeとFirefox」で利用できる拡張機能やアドオンについてご紹介したいと思います。これを使いこなせば、WEB制作スピードが驚異的に上がること間違いなしです。
Firefoxアドオン
ブラウザ上でのWEB制作をさらに便利にするFirefoxアドオンを下記にご紹介したいと思います。
Firebug
Firefox 上でWEB制作時に多くの方が利用している定番のアドオンです。サイトの HTML・CSS・JavaScript などのコードのチェックや編集ができるアドオンです。
URL:https://addons.mozilla.org/ja/firefox/addon/firebug/
WEB Developer
Firefox 上で CSS・画像・JavaScript をオフにしてどう表示されるかチェックしたり、手軽にWEBサイトの制作、検証の定番のアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/web-developer/
ColorZilla
Firefox 上でブラウザに表示されたページの色をスポイトで拾い、簡単にカラーコードを表示することができ、参考サイトのカラーチェックができグラデーションの作成などもできるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/colorzilla/
Firepicker
Firefox 上で Firebug にカラーピッカー機能を追加でき、Firebug で CSS のスタイル・カラー編集ができるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/firepicker/
User Agent Switcher
Firefox 上でPCブラウザ上で各デバイスのタブレット・スマートフォンサイトなどの表示検証が簡単にできる便利なアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/
LinkChecker
Firefox 上で正常なリンクが緑色・リンク切れはピンク色・アクセス制限がある場合などは黄色に変化することで、ページのリンク切れをチェックできるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/linkchecker/
Awesome Screenshot Plus
Firefox 上で範囲指定だけでなく、ページ全体のスクリーンショットもとれ、画像の編集もできるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/awesome-screenshot-capture-/
Pearl Crescent Page Saver Basic
Firefox 上で気に入ったサイトやバナーなどのキャプチャーを簡単に撮ることができるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/pagesaver/
Measure It
Firefox 上でWEBサイトのページの縦横のサイズや配置されているコンテンツの幅や高さなどを計測できるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/measureit/
Page Ruler
Firefox 上でWEBサイトのページの要素の縦横(ピクセル)を計測することができ、コンテンツのサイズをドラッグ&ドロップで測定できるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/page-ruler/
Font Finder
Firefox 上でWEBページ上で使用されているフォント情報を表示してくれ、調べることができるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/font-finder/
HTML5 Outline
Firefox 上で HTML5 形式で文書構造であるアウトラインを表示してくれるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/html5_outliner/
FireGestures
Firefox 上で右ボタンを押しながらマウスを様々な方向に動かす(マウスジェスチャー)だけで「前のページに戻る」や「次のページに進む」といった動作ができるようになるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/firegestures/
ichinen search for Firefox
Firefox 上で公開日・更新日が1年以内や1ヶ月や1時間以内などの検索の期間を指定できるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/ichinen-search/
Feedly Notifier
Firefox 上で Feedly の新着通知をタスクトレイに表示させることができるアドオンです。
URL:
https://addons.mozilla.org/ja/firefox/addon/feedly-notifier/
Chrome拡張機能
ブラウザ上でのWEB制作をさらに便利にするChrome拡張機能を下記にご紹介したいと思います。
WEB Developer
Chrome 上でCSS・画像・JavaScript をオフにしてどう表示されるかチェックしたり、手軽にWEBサイトの制作、検証の定番の拡張機能です。
URL:
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ja
ColorZilla
Chrome 上でブラウザに表示されたページの色をスポイトで拾い、簡単にカラーコードを表示することができ、参考サイトのカラーチェックができグラデーションの作成などもできる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja
ColorPick Eyedropper
Chrome 上でCSSのスタイル・カラー編集ができ、カラーピッカー機能を追加する拡張機能です。
URL:
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=ja
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 上でページのリンク切れをチェックできる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/drweb-anti-virus-link-che/aleggpabliehgbeagmfhnodcijcmbonb?hl=ja
Awesome Screenshot
Chrome 上で範囲指定だけでなく、ページ全体のスクリーンショットもとれ、画像の編集もできる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=ja
FireShot
Chrome 上で範囲指定だけでなく、ページ全体のスクリーンショットもとれ、画像の編集もでき、外部ソフトでも開くこともできる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja
Measure It
Chrome 上でWEBサイトのページの縦横のサイズや配置されているコンテンツの幅や高さなどを計測できる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/measureit/pokhcahijjfkdccinalifdifljglhclm?hl=ja
Page Ruler
Chrome 上でWEBサイトのページの要素の縦横(ピクセル)を計測することができ、コンテンツのサイズをドラッグ&ドロップで測定できる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=ja
WhatFont
Chrome 上でWEBページ上で使用されているフォント情報を表示してくれ、調べることができる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja
HTML5 Outline
Chrome 上で HTML5 形式で文書構造であるアウトラインを表示してくれる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja
crxMouse Chrome Gestures
Chrome 上で右ボタンを押しながらマウスを様々な方向に動かす(マウスジェスチャー)だけで「前のページに戻る」や「次のページに進む」といった動作ができるようになる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/crxmouse-chrome-gestures/jlgkpaicikihijadgifklkbpdajbkhjo?hl=ja
ato-ichinen
Chrome 上で公開日・更新日が1年以内や1ヶ月や1時間以内などの検索の期間を指定できる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph?hl=ja
Feedly Notifier
Chrome 上で Feedly の新着通知をタスクトレイに表示させることができる拡張機能です。
URL:
https://chrome.google.com/webstore/detail/feedly-notifier/egikgfbhipinieabdmcpigejkaomgjgb?hl=ja
参考サイト
参考にさせていただいたサイトを下記に示したいと思います。