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

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

関連記事

Web

TypeSquare の導入手順

Webフォントサービスである TypeSquare の導入手順について説明しています。

Chrome

誤って Chrome を閉じた後で、さっきまで開いていたページを開く

誤って Chrome を閉じた後で、さっき開いていたページを開く方法を紹介します。

Web

未ログイン状態で Facebook を開いた時に表示されるログインウィンドウを消す

目次1. Facebook の仕様変更?2. ブックマークレットの使い方3. 仕組み4. 注意点5. おわりに 1. Facebook の仕様変更? 未ログイン状態で Facebook のページを開く …

web development

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する方法を紹介します。

WordPress

「Build a Custom WordPress User Flow」を試してみました

目次1. はじめにソースコード2. 全体3. Part 1: Replace the Login Page使用している関数アクションフィルタ4. Part 2: New User Registrati …