Web制作の学習にオススメのGoogle Chrome拡張機能10選

こんにちは!しゅん(@shun_webdesign)です。
皆さんは普段、何のブラウザを使用してますか?

ボクはWeb制作やプログラミングを勉強始め出してから便利すぎてずっとGoogleChromeを使ってます。
そんな便利すぎる理由に大きく上げられるのが拡張機能(エクステンション)です。
今回はオススメしたい拡張機能を紹介します!

GoogleChrome拡張機能とは?

Chromeをより便利に使うための機能です。
多くの機能が無償で手軽にインストールでき、
種類も数え切れないほど豊富です。

インストール方法

1.GoogleChromeの拡張機能(エクステンション)ページ(Chrome ウェブストア)に移動。

2.Chrome ウェブストアに移動したら、左上の検索フォームからキーワード検索。

3.検索結果から「Chromeに追加」を押して追加もできますし、
拡張機能の詳細ページで概要や説明を確認してから追加も可能です。

4.ブラウザのウィンドウ右端に追加されてるので確認しましょう。これで完了です。

オススメ一覧

HTMLエラーチェッカー

HTMLの閉じタグ忘れを確認する拡張機能。

ボタンを押すだけでブラウザ上で閲覧しているページのHTMLのエラーを表示してくれます。
エラーの行数を正確に表示してくれるのですぐに見つけれて便利。

LinkMemo

タブを開きすぎてごちゃごちゃしてしまったり、
「このサイト、覚えておきたいけどブックマークに入れるまでもないな」ってことありませんか。

その問題を解決してくれるのがこの「LinkMemo」
覚えておきたいリンクをすぐに保存してくれます。もちろん削除もできます。

Responsive viewer

その名の通り、レスポンシブの確認ができる拡張機能。
閲覧してるサイトでボタンを押すと各デバイスのサイズ毎のビューが表示されます。

ネット上のサイトのみならず、ローカル環境でもレスポンシブの確認ができるので
現在進行形でコーディング中のサイトの確認も行えます。

wipeyy

動画をワイプで表示してくれる拡張機能。
ショートカットキーにも対応してるのでわざわざクリックせずとも操作できます。

ドットインストールで動画見ながらエディター開くことも、
YouTubeで動画見ながらでもコードが打てるので便利ですね。

Full Page Screen Capture

サイトページのヘッダーからフッターまで丸ごとスクショしてくれる拡張機能。
サイトの模写をしたい時や作品をポートフォリオ に載せたい時によく使ってました。

png,PDF形式で保存も可能ですし、「⚙(歯車)」のボタンを押せば、過去にスクショした画像も確認できます。

Perfect Pixel

サイトの模写やデザインカンプからコーディングの作業を行う際に
デザインからできる限り1pxでもずらさず、高い完成度を維持したいって時に便利です。

コーディング中のページに移動し拡張機能のボタンを押せば、
デザインカンプの画像をドロップでアップロード。
コーディングした画面とデザインカンプが重なった状態で表示されるので
ズレを確認しながらコーディングしましょう。

visual inspecter

サイト内の位置、不透明度、色、グラデーション、タイポグラフィーなどの
Webページの設計プロパティを確認できます。

確認した画像はもちろんダウンロード可能。
padding,marginの値も画面に表示してくれるので検証ツールで見づらい際に使ってます。

Design Grid Overlay

列、ガター、および幅のグリッド仕様を入力し、グリッドガイドと要素の測定値を表示して、
ページのコンテンツを揃えることができます。

レイアウトがきれいに揃えれるのでコーディング際に使用してます。

Clip to Evernote

Evernoteの拡張機能。
閲覧してるサイトページをEvernote上に保存してPCからでもスマホからでも確認できるようになります。

サイトをブックマークすることもできますし、スクリーンショット、ページ内の記事も保存可能。
グーグルの検索でEvernoteのノート検索も表示されるようになります。

Google翻訳

多くの方が使ったことがあるであろうGoogle翻訳の拡張機能。
翻訳したい文章を範囲指定でクリックし、右クリックでGoogle翻訳が表示されるので選択すると
翻訳ページのタブが開きます。

最後に

Chromeウェブストアでは拡張機能の他にもChromeテーマの変更もできます。
こちらに紹介されてる物はほんの一部に過ぎないので他にもオススメの拡張機能があれば教えてください。

最後まで見ていただきありがとうございます。次回も是非ご覧くださいませ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA