BLOG2018.05.28WEB制作で使える便利なchromeアドオン今月のプラカンブログは、私が普段の制作作業で使ってるchromeのアドオンを紹介しようと思います。Cachehttps://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdnこのアドオンは、ブラウザのキャッシュをクリアしてくるアドオンです。Cacheのアイコンをワンクリックするだけ。それだけでブラウザのキャッシュなどいろんなデータをクリアしてくれるのです。クリアしてくれるデータの種類は『アプリケーションキャッシュ、キャッシュ、Cookie、ダウンロード、ファイルシステム、フォームデータ、履歴、インデックス付きDB、ローカルストレージ、プラグインデータ、パスワード、WebSQL』とさまざま。何のデータをどれだけクリアしたいかは、アドオンのオプションページの必要な箇所にチェックを入れるだけの簡単な設定なのも助かります。viewerはchromeではブラウザ上で確認することができない画像のAltの内容をウェブページ上に表示させるアドオンです。viewerのアイコンをクリックします。すると下の画像の様にページ内にある画像のAltやメタ情報(title、画像サイズ、画像パス、console出力、Altなし一覧などが表示されます)表示させたい情報についてはアドオンのオプションページから、何を表示させるか設定することができます。Eyedropperはブラウザに表示されてたウェブページ内の知りたいと思った色彩の値を取得することができるカラーピッカーです。Eyedropperアイコンをクリックすると、アイコンから小さなオーバーレイウインドウが出てきます。Rulerはウェブページ上で選択したエリアの大きさや位置の辺りを取得することができるアドオンになります。Rulerアイコンをクリックするとマウスポインターが十字型になりますので、大きさなど寸法を測りたい箇所に合わせてマウスをドラッグするだけ。ページ上部に現れた青色のバーにwithd、height、選択したエリアの上下左右からの位置の値を表示してくれます。Extensionはブラウザに表示されているウェブページのURLをQRコードにしてくれるアドオンです。Extensionで生成されたQRコードを読み取れば簡単にウェブページへアクセスすることができるようになります。Largeの4種類の中から選択することができます。Screenshotは名前の通りブラウザに表示されているウェブページのスクリーンショットを撮ってくれるアドオンになります。ブラウザのウインドウサイズの大きさや、選択したエリア、ウェブページ全体、またデスクトップを撮ることができます。タイマーをつかった撮影にも対応していて、撮影したスクリーンショットに矩形や文字で注釈をつけることもできます。保存形式はJPGとPNGの2種類。保存の仕方はダウンロード、クリップボードにコピー、プリンターで印刷の3種類が選べます。オプションでタイマーの長さやショートカットを設定することもできます。名前の通りブラウザのウインドウサイズをリサイズしてくれるアドオンです。Resizerのアイコンをクリックすると、デフォルトで設定されてるウインドウサイズの一覧が表示されるので、リサイズしたいウインドウのサイズを選ぶだけです。リサイズしたい数値は自分でも登録することができるので、私は上で紹介したブラウザのスクリーンショットを撮る際に自分の中のいい感じのサイズを決めて登録しています。スクリーンショットを撮る時には必ずこのアドオンでリサイズしてから撮ると、いつでも同じ大きさのスクリーンショットの画像を撮ることができるのでとても便利です。このリストの一番したの緑のエリアでは、リサイズしたいブラウザの大きさの数値を入力することもできます。pointでの設定にすることもできたりととても多機能なアドオンなのでいろいろ触ってみることをオススメします!と、こんな感じでよく使ってるアドオンを紹介しました!けれどもまだ他にも便利なアドオンがいくつかあるので、来月は後編「よく使ってる訳じゃないけど入れてると便利なアドオン」として、引き続き便利アドオンの紹介をしたいと思います。楽しみに待っていてください。アドオンこの記事は1年以上前の記事で内容が古くなっている場合があります。【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。