ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【2020年】Web制作を効率化!HTMLコーディングに役立つ おすすめChrome拡張機能11選

【2020年】Web制作を効率化!HTMLコーディングに役立つ おすすめChrome拡張機能11選

「HTMLコーディング作業を効率化したい」
「便利なGoogle Chrome拡張機能を知りたい」

悩み

こんな悩みにお答えします。

目次
  1. HTMLコーディングに役立つChrome拡張機能
    1. Clear Cache
    2. HTMLエラーチェッカー
    3. HTML5 Outliner
    4. Full Page Screen Capture
    5. Window Resizer
    6. ImTranslator
    7. HTML Coding Checker
    8. Edit this Cookie
    9. META SEO Inspector
    10. Wappalyzer
    11. Web Vitals
  2. まとめ

HTMLコーディングに役立つChrome拡張機能

Clear Cache

1クリックでキャッシュをクリアしてくれる拡張機能です。
最近のブラウザは速度が高速化している反面、キャッシュが以前よりとてもしつこくなってきて、コーディングがなかなか反映されず作業が停滞してしまいます。
そんなストレスを解消してくれます。

chrome ウェブストア
Clear Cache
Clear Cache

WordPressでキャッシュを残さないようにするための記事です。

【WordPress】「更新されない」の解決方法 キャッシュ対策

WordPressで「更新したはずなのに更新されない」と悩んでいますか?この記事では更新されないことの原因、キャッシュ対策をした解決方法について解説しています。ぜひご覧ください。

HTMLエラーチェッカー

1クリックで表示しているページのHTMLソースのエラーチェックをしてくれる拡張機能です。
コーディングをしているとケアレスミスで表示が崩れたりすることがありますが、複雑になったHTMLソースをひとつずつ確認していくのは大変です。
そんな地道な確認作業を解消してくれます。

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

HTMLエラーチェッカーの使い方【Google Chrome拡張機能】

HTMLエラーチェッカーの使い方について知りたいですか?この記事では、HTMLエラーチェッカーの基本的な使い方、オプションの使い方について解説しています。HTMLエラーチェッカーの代替となる拡張機能についても紹介しています。ぜひご覧ください。

HTML5 Outliner

1クリックで表示しているページのHTML構造(アウトライン)をチェックしてくれる拡張機能です。
構造の確認はもちろんタグ内に不要なテキストが入ったりしてないかも確認できます。
HTMLソースの品質向上に役立ちます。

chrome ウェブストア
HTML5 Outliner
HTML5 Outliner

見出しタグの使い方のチェックに便利です。

【HTML】見出しタグの使い方(h1~h6) + HTML5 Outliner

HTMLの見出しタグについて知りたいですか?この記事では、見出しタグについて、見出しタグの使い方について解説しています。また、見出しのアウトラインを確認できるツール「HTML5 Outliner」を紹介しています。ぜひご覧ください。

Full Page Screen Capture

1クリックで表示しているページのヘッダーからフッターまでページ全体をスクリーンショットできます。
スクリーンショットはPNGとPDFへ出力することができます。

chrome ウェブストア
Full Page Screen Capture
Full Page Screen Capture

Window Resizer

1クリックでChromeのウィンドウサイズを調整してくれます。
一般的なモニタサイズは用意されており、カスタムサイズも指定できます。
レスポンシブコーディングに役立ちます。

chrome ウェブストア
Window Resizer
Window Resizer

ImTranslator

テキスト選択だけで、選択したテキストの翻訳ができます。
コーディングやプログラミングの海外参考サイトで情報を探すときに便利です。
あまり使用しませんが、数多くの言語に対応しています。

chrome ウェブストア
ImTranslator
ImTranslator

HTML Coding Checker

HTMLコーディングのチェックを補助してくれます。
リンク切れやMETA情報の一覧表示、画像の一覧表示等ができます。
ずっと(β版)なだけあって、一部、うまく機能しないものもありますが、それでも便利な拡張機能です。

chrome ウェブストア
HTML Coding Checker
HTML Coding Checker

Edit this Cookie

PHPやJavaScriptでcookieを使用したホームページのプログラミングをする際に役に立ちます。
保存されているcookieすべてとそのcookieが持っている情報が可視化できます。

chrome ウェブストア
Edit this Cookie
Edit this Cookie

META SEO Inspector

ページのメタ情報を簡単に確認するのに役に立ちます。
1クリックでメタ情報を一覧で確認でき、問題があるところを通知してくれます。

chrome ウェブストア

META SEO inspector

通常は閲覧中に表示されない、Webページ内にあるメタデータを調べるのに役立ちます。

メタタグ、リンクタグのチェックに便利です。

【SEO】メタタグ(metaタグ)とは?確認方法、書き方、一覧

SEO対策に重要なメタタグについて知りたいですか?この記事では、メタタグの確認方法、メタタグの書き方、メタタグ一覧を紹介しています。ぜひご覧ください。

【SEO】リンクタグ(linkタグ)とは?書き方、一覧

SEO対策に重要なリンクタグについて知りたいですか?この記事では、リンクタグの書き方、リンクタグ一覧を紹介しています。ぜひご覧ください。

Wappalyzer

参考にするWebサイトでどんな技術に確認するのに役に立ちます。
使用されている「CMS」「プログラミング言語」「サーバー」「データベース」等を簡単に確認できます。

chrome ウェブストア

Wappalyzer

Identify web technologies

Web Vitals

Core Web Vitals(コア ウェブバイタル)を簡単に確認するのに役に立ちます。
2021年以降にGoogleの検索ランキング要因に組み込む「ページの表示速度」「ユーザー操作への反応性」「視覚要素の安定性」を簡単に確認できます。

chrome ウェブストア

Web Vitals

Measure metrics for a healthy site

Core Web Vitalsについてはこちらで紹介しています。

【SEO】Core Web Vitalsとは(LCP/FID/CLS) 測定ツール

Core Web Vitalsについて知りたいですか?この記事では、Googleの新しい指標「Core Web Vitals」について紹介しています。ぜひご覧ください。

まとめ

おすすめChrome拡張機能を紹介しました。

HTMLコーディング作業は自分の努力や慣れだけで効率化するには限界があります。

紹介したような拡張機能を使うことでコーディング作業をより効率化、高速化することができるので、積極的に使用していくといいと思います。

Google Chrome起動時に複数のWebサイトを表示させる3つの方法

Google Chrome起動時に指定のWebサイトを表示させる方法を知りたいですか?この記事では、「タブ固定」「特定のページまたはページセットを開く」「前回開いていたページを開く」の3つの方法について紹介しています。ぜひご覧ください。