Worldwideこのブログをご覧の皆さんもchromeをメインブラウザとして使っている方が多いのではないでしょうか。chrome拡張機能”今回はそのインストール方法とWEBを制作する上で重宝する便利な機能をいくつかご紹介したいと思います。chromeの拡張機能とは?chrome拡張機能は追加することによってブラウザを自分好みにカスタマイズすることが出来ます。その機能は個人利用からビジネス利用まで幅広いシーンで役立つものが提供されています。プライベートで遊べるゲームであったり、仕事で使えるようなページの翻訳・メモ機能であったり、その多くがほとんど無償で提供されています。便利な機能が無料で利用できるなら使わない手はありません!ただし、注意点として拡張機能をインストールしすぎるとブラウザが重くなる可能性があるので、用途に合ったものを厳選して利用する必要があります。ウェブストア」で入手することが出来ます。試しに翻訳機能を追加してみましょう。左上の検索バーで、探したい拡張機能のキーワードを検索。インストールが完了すると、右上に追加した拡張機能のアイコンが表示されます。拡張機能の設定・オプション変更、削除などはアイコンを右クリックすると拡張機能に関するメニューが表示されますので、こちらから行えます。拡張機能によっては、事前に設定が必要なものがありますので、こちらのメニューから設定を行って利用しましょう。Cacheは名前の通り、キャッシュを削除する時に便利な拡張機能です。webサイトのデザインを変更した際、毎回キャッシュの削除を行うのが面倒..そんな時にアイコンをワンクリックするだけでキャッシュの削除を行ってくれます。キャッシュの削除方法については以前ブログでも紹介したのですが、ここで紹介したものと同様に簡単にキャッシュクリアが行えますので、合わせて活用してみて下さい!初期設定では1時間以内に作成されたWebページのキャッシュを削除する仕様になっています。Cacheのアイコンを右クリックし「オプション」をクリックすると設定画面が開きますので、ここで設定を行いましょう。1は「削除するデータ」についての設定です。キャッシュだけでなく、アプリケーションのキャッシュ、Cookie、閲覧履歴、フォームのデータ等を同時に削除できるように設定することも可能です。2は「期間」についての設定です。1時間前のキャッシュから、すべての期間のキャッシュまで細かく設定することが出来ます。Peeperなら上記の事を簡単に調べることが出来ます。PeeperのアイコンをクリックするとこのようにOGP画像(SNSでシェアされた時に表示されるサムネイル画像)やWebページのタイトル、そしてbodyに指定されているfont-familyなどがパネルで表示されます。All」で画像をまとめてダウロードすることが可能です。しずくのマークのアイコンはサイトで使われているカラーコードの表示です。ワンクリックでコピペできるのでこちらも非常に便利です!調べたい要素をクリックするとパネルに余白、クラス名、カラーコード、font-family、font-size等、詳細な情報を見ることも出来ます。Rulerwebページに表示されている画像やコンテンツの幅をピクセル単位で測ることが出来ます。ElementsWidth」をクリックするとマウスの位置にある要素が自動選択され、高さや幅を表示してくれます。コーディングの際に、要素の大きさをチェックするのに非常に便利です。Makerアイコンをクリックすると新規タブが立ち上がり、「コードエディター」にしてくれます。html、css、Javascriptを表示結果を確認しながら書くことが出来ます。動きやデザインをテストとして確認したい時などに非常に便利です。chrome拡張機能。仕事に使える機能も多数ありますので、お気に入りを探して業務効率化を目指して下さい!これまでchromeのブラウザを使ったことがないという方にも、これを機会にぜひ試して頂きたいです。思い立って畑違いの業界からWEBの世界へ転職。独学でコーディングを学び、現在はWEBデザインを担当。デザインよりもコーディングが好き!カレーと餃子とじゃがりこ(サラダ)のローテーションで生きています。