TORAT
今回は数ある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・パスワードなどの自動入力フォ－ム
- 閲覧履歴
- ダウンロード履歴
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 ウェブストアおわりに
いかがでしょうか。
他にも便利な機能がたくさんございますので色々探してみるのもありですね♪
それではまた別ブログで会いましょう！
