Web

Webページを検証する各種サービス

投稿日:

1. はじめに

Webページに問題がないかチェックすることができるサービスをいくつか紹介します。

2. Webページを検証するサービス

(1) HTMLを検証する

Ready to check – Nu Html Checker

Nu Html Checker

Check by address」という部分の下に URL を入力して [Check] ボタンを押すと、検査が始まります。

(2) CSSを検証する

W3C CSS 検証サービス

CSS Validation Service
CSS Validation Service

アドレス」に URL を入力して [検証する] ボタンを押すと、検査が始まります。

オプションは、分からなければそのままで良いですが、[Profile] の選択項目によってエラーになる内容に違いがあるので、少し注意しておくとよいです。

(3) アクセシビリティを検証する

WAVE Web Accessibility Evaluation Tool

WAVE Web Accessibility Evaluation Tool
WAVE Web Accessibility Evaluation Tool

Web page address のところに URL を入力して Enter キーを押すか、右側にある矢印をクリックします。

(4) Web Vitals (ページの読み込みパフォーマンス) を検証する

PageSpeed Insights

PageSpeed Insights
PageSpeed Insights

中央のフィールドに URL を入力して、[分析] ボタンを押します。

3. おわりに

各サービスの結果を理解するには知識と経験が必要ですが、まずは使ってみないと始まらないとも言えます。

「検証する」→「結果の中に分からない用語があれば調べる」を繰り返しましょう。

または、以下のサービスからご質問も受け付けております。

HTML/CSS/JS/PHPの質問をお受けします Webに関して疑問をお持ちのあなたへ

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

インターネット上での検索方法

Google 画像検索を表すURL http://images.google.com/search?tbm=isch&q=検索キーワード 執筆中

Let's Encrypt

Let’s Encrypt: ホスト名毎に証明書を分けて発行する

ホスト名毎に証明書を分けて発行すると便利です。

WebAssembly を試してみた

2018年10月における WebAssembly の状況を記録するために、現時点での WebAssembly を試してみることにしました。 目次1. WebAssembly とは?WebAssembl …

CSS

Simple.css の使いみちについて

Simple.css の使いみちについて書いています。

Web Components

Web Components でスタイルシートを再利用する

Constructable Stylesheet Objects の使い方を説明します。