WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

Googleおすすめ拡張機能 7選

2020年05月16日

投稿者: ヨッシー

今回は数あるGoogle拡張機能の中から筆者がよく使用しているGoogle拡張機能を紹介いたします。WEBサイト制作時にとても重宝しています♪

使用するときはchrome ウェブストアから使用したい機能をchromeに追加するをクリックするだけです。

それでは紹介させてください。

ColorPick Eyedropper

Webサイト内でフォント、ヘッダー、フッター、ロゴ、アイコン、背景などの色(カラーコード)を調べたい時ありませんか。

そんなときに便利なのが『ColorPick Eyedropper』です。

使い方はツールバーにあるColorPick Eyedropperのアイコンをクリックし、カラーコードを調べたい位置にカーソルを重ねるだけで確認できます。

ColorPick Eyedropper – Chrome ウェブストア

Page Ruler Redux

『Page Ruler ReduxWeb』は要素やレイアウトの「幅」「高さ」「位置」を計測することができる拡張機能です。※単位はピクセル

レイアウトの確認や画像サイズを確認したい時におすすめです。

使い方は2種類あります。

一つ目はマウスをドラッグして範囲選択を調べる方法。

二つ目は「エレメントモード」です。こちらは知りたい要素にカーソルを重ねるだけで自動的にサイズを確認することができます。非常に便利。

Page Ruler Redux – Chrome ウェブストア

Clear Cache

『Clear Cache』はChromeブラウザのキャッシュをなんと1クリック削除してくれる拡張機能です。

Webサイトが更新されない、Webサイトの動作が遅いという時にとても役に立つ拡張機能です。

下記項目も設定を変えると削除可能です。

  • アプリのキャッシュ
  • Cookie
  • ID・パスワードなどの自動入力フォ-ム
  • 閲覧履歴
  • ダウンロード履歴
Clear Cache – Chrome ウェブストア

HTMLエラーチェッカー

『HTMLエラーチェッカー』はWebページのHTMLのエラー(行目、エラー内容)を簡単に確認することができる拡張機能です。

調べたいWEBサイトのページ上でアイコンをクリックするとHTMLのエラーのリストが表示されます。シンプルでわかりやすいです。

さらにおすすめなのが「自動エラーチェック機能」です。こちらはWebページを開くだけで自動でエラーをチェックしてくれます♪

ちなみに筆者は昔、タグの閉じ忘れが多かったです(笑)

HTMLエラーチェッカー – Chrome ウェブストア

Quick source viewer

『Quick source viewer』は HTML、JavaScript、CSS のソースコードを確認できる拡張機能です。

ソースコードは種類別にカラーで分けられていて、且つ見た目もキレイで、見やすく読みやいのが最大のポイントです。

Quick source viewer – Chrome ウェブストア

CSSViewer

WebページのCSSを手早く確認できるのが『CSSViewerChrome』です。

使い方は右上にあるツールバーのアイコンをクリックし、ソースコードにカーソルを乗せるだけで、CSSが表示されます。

確認だけならChromeのデベロッパーツールを開くよりも遥かに簡単なのですが、 できるのは確認だけでソースコードをいじることはできません。。

CSSViewer – Chrome ウェブストア

Web Maker

『Web MakerChrome』は、なんとオフラインでコーディングができる拡張機能です。結果はリアルタイムで確認できます。

言語はHTML、CSS、JavaScriptの3つです。

Web Maker – Chrome ウェブストア

おわりに

いかがでしょうか。

他にも便利な機能がたくさんございますので色々探してみるのもありですね♪

それではまた別ブログで会いましょう!

この記事の投稿者

フロントエンドエンジニア

ヨッシー

プロフィール情報

google コアアルゴリズムアップデートについて

2019年10月9日 TORAT

ブログ一覧へ

書いた人

WRITERS