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

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

関連記事

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …

Web

Web Components: CSS Shadow Parts の使い方

CSS Shadow Parts の使い方を説明します。

Web

Chrome で SameSite=None に関する Cookieについての警告が表示される

Chrome で SameSite=None に関する Cookieについての警告が表示される理由について説明します。

Web

CORS の プリフライト・リクエストを発生させて観察する

CORS の プリフライト・リクエストを発生させて観察するページを作成しました。

CSS

overflow:hidden が指定された領域内に、幅の大きい table (表) を記述する

目次1. はじめに2. 対応策3. おわりに 1. はじめに 本ウェブサイトは、スマートフォンのサイズだと 1カラムのレイアウトになるのですが、その際、画面全体を表す HTML要素のスタイルに、「ov …