コーディング

web制作に便利なChrome拡張機能オススメ5選【無料】

web制作に便利なChrome拡張機能

web制作ではいろいろなツールを使いこなして作業することで時間短縮や正確な作業が行えるようになります。この記事ではおすすめのChrome拡張機能について紹介していきます!

Chrome拡張機能って何?どんなものがあるの?

という方に向けた記事です。

Chrome拡張機能とは

Chrome拡張機能とはGoogle Chromeブラウザに追加機能を与えてくれるものです。

Chrome拡張機能の使い方

使い方を見ていきましょう。

試しに「The QR Code Extension」という、webサイトのQRコードを作成してくれる拡張機能を追加してみます。

まずは下記ページを開きます。
QR Code Extension

右上の「Chromeに追加」ボタンをクリックします。

拡張機能

これだけで追加完了です(拡張機能によってはもう少し設定が必要なものもあります。)

使い方は右上に「The QR Code Extension」のアイコンマークが表示されるのでクリックするだけです。

拡張機能

今開いているページのQRコードが表示されるので

これをスマホのQRコードで読み取ればこのページをスマホですぐに開けるというわけです。

便利だし追加も簡単だね!

オススメChrome拡張機能5選

ドメインを変更して読み込む 【Domain Switcher】

今表示しているサイトのドメインを変更して読み込める
Domain Switcher

web制作をしているとテスト環境と本番環境でドメインが違うことがあります。

テスト環境と本番環境を切り替えて表示したい場合、

いちいちURLを変更するのは結構めんどくさいです。

「Domain Switcher」を使うと簡単にドメインを変更して表示することができます。

webサイトのスクリーンショットを撮る【Full Page Screen Capture】

Full Page Screen Capture

web制作ではページ全体のスクリーンショットが必要になることがよくあります。

そんなときにFull Page Screen Captureを使うと

ワンクリックでスクリーンショットを撮ることができます。

webサイトを翻訳する【Google 翻訳】

Google 翻訳

webサイト全体を翻訳できます。こちらは使っている人もかなり多いと思います。

プログラミング学習をしていると日本語サイトにいい情報がなく、

海外のサイトから情報を得たいという場面があるのでよく使用します。

カラーコードを調べる【ColorPick Eyedropper】

ColorPick Eyedropper

webサイトで使われている色のカラーコードを調べることができます。

CSSを書いている時などによく使います。

デザインカンプとwebサイトの比較【Perfect Pixel】

デザインカンプとwebサイトを重ねて比較できる
Perfect Pixel

デザインカンプをサイトのデザインのズレを確認したいときに便利です。

以前、別の記事で紹介したので詳しい使い方は読んでみてください。

PerfectPixelのインストールと使い方を図解で丁寧に解説する

スポンサーリンク

-コーディング
-

© 2020 まめしばweb Powered by AFFINGER5