HTMLやCSSの文法チェックならでオンラインサービスで簡単

HTMLやCSSの文法チェックならでオンラインサービスで簡単 HTML/CSS

こんにちは、mickです。

・コーディングしたHTMLにエラーがないか確かめたい
・コーディングしたCSSにエラーがないか確かめたい

こんな要望に応えます。

HTMLやCSSの文法チェックをする2つの理由

プログラミングではルールののっとったコーディングが求められます。

ルール通りでないとパソコンやスマホが意図するように動かないからです。

意図するように動かないと原因を探すわけですが、修正を後回しにしておくと問題が大きくなっていってしまいます。

Chromeなどのブラウザがエラーを隠す

HTMLやCSSの場合、ルール通りにコーディングしていなくてもChromeなどのブラウザがWebページを意図するとおりに表示しようとします。

そのため、Webページを見ただけではHTMLやCSSのルール通りにコーディングしているか正確には知ることができません。

積み重なると原因不明の大問題になる

HTMLやCSSのエラーを気づかないうちに積み重なると、Webページが意図しない表示をしたとき、原因の特定が難しくなります。

Webサイトの規模が大きくなると問題も大きくなってしまいます。

HTMLの文法チェック

HTMLの文法チェックをするWebサイトがあります。

HTML文法チェックサイト「Markup Validation Service」

HTML文法チェックサイト「Markup Validation Service」
HTML文法チェックサイト「Markup Validation Service」

このWebサイトは基本英語表記です。
エラーが出たときも英語表記。

ただ、ほとんどが簡単な英語なのでなんとかなると思います。

難しいときはGoogle先生に翻訳を頼みましょう。

⇒ Markup Validation Service

「Markup Validation Service」の使い方

「Markup Validation Service」の使い方は大きく3つあります。

  1. URLを入力して文法チェック
  2. HTMLファイルをアップロードして文法チェック
  3. HTMLを直接テキストボックスに貼り付けて文法チェック

WordPressを使う場合、こちらの出番は少ないと思います。
HTMLの部分はほとんどWordPressのテーマやプラグインが生成するからです。

それでもWordPressのテーマを自作する人やコードエディターを使う人には使える便利ツールです。

オプション(More Options)は基本的にデフォルトのままで大丈夫です。
ツールが自動的に判断してくれるからです。

URLを入力して文法チェック

URLを入力して文法チェック
URLを入力して文法チェック

「Markup Validation Service」では、WebサイトのURLを直接入力してHTMLの文法チェックができます。

URLを入力してHTMLの文法チェックをする手順

  1. 「Validate by URI」のタブをクリック。
  2. 「Address:」横のテキストボックスにWebサイトのURLを入力。
  3. 「Check」ボタンをクリック。

「Markup Validation Service」では、「URI」となっていますがひとまず「URL」と読み替えてもらっていいです。

HTMLファイルをアップロードして文法チェック

HTMLファイルをアップロードして文法チェック
HTMLファイルをアップロードして文法チェック

「Markup Validation Service」では、HTMLファイルをアップロードしてHTMLの文法チェックができます。

URLを入力してHTMLの文法チェックをする手順

  1. 「Validate by File Upload」のタブをクリック。
  2. 「File:」横の「選択」からアップロードするHTMLファイルを決める。
  3. 「Check」ボタンをクリック。

HTMLを直接テキストボックスに貼り付けて文法チェック

HTMLを直接テキストボックスに貼り付けて文法チェック
HTMLを直接テキストボックスに貼り付けて文法チェック

「Markup Validation Service」では、HTMLを直接テキストボックスに貼り付けてHTMLの文法チェックができます。

HTMLを直接テキストボックスに貼り付けてHTMLの文法チェックをする手順

  1. 「Validate by Direct Input」のタブをクリック。
  2. 「Enter the Markup to validate:」横のテキストボックスにHTMLを直接貼り付ける。
  3. 「Check」ボタンをクリック。

HTML文法チェックでエラーがでなかったとき

HTMLの文法にエラーはなかった
HTMLの文法にエラーはなかった

HTMLの文法チェックにエラーがなかったときは「Document checking completed. No errors or warnings to show.」と画面にでてきます。

「ドキュメントのチェックが終わった。エラーもワーニングもでてこなかった。」
そんな意味です。

HTML文法チェックでエラーがあったとき

HTMLの文法にエラーがあった
HTMLの文法にエラーがあった

HTMLの文法チェックにエラーがあったときは、エラーの場所とその内容が画面にでてきます。

この例では「<!DOCTYPE html>がドキュメントの最初にない」。そんな意味です。

CSSの文法チェック

CSSの文法チェックをするWebサイトがあります。

CSS文法チェックサイト「CSS Validation Service」

CSS文法チェックサイト「CSS Validation Service」
CSS文法チェックサイト「CSS Validation Service」

こちらは様々な言語に対応していて、日本語表記もあります。
エラーもある程度は日本語で表示してくれるため、使いやすいと思います。

WordPressを使う人は、編集場所がほとんどCSSだと思うので「CSS Validation Service」の方が活躍します。

⇒ CSS Validation Service

「CSS Validation Service」の使い方

「CSS Validation Service」の使い方は大きく3つあります。

  1. URLを入力して文法チェック
  2. CSSファイルをアップロードして文法チェック
  3. CSSを直接テキストボックスに貼り付けて文法チェック

WordPressを使う人はこちらの出番が多いと思います。

すでにあるWordPressのテーマやプラグインを使っても、CSSは自分で「style.css」を編集する人も多いはずだからですね。

オプションは基本的にデフォルトのままで大丈夫です。
ツールが自動的に判断してくれるからです。

URLを入力して文法チェック

URLを入力して文法チェック
URLを入力して文法チェック

「CSS Validation Service」では、WebサイトのURLを直接入力してCSSの文法チェックができます。

URLを入力してCSSの文法チェックをする手順

  1. 「URLを指定」のタブをクリック。
  2. 「アドレス:」横のテキストボックスにWebサイトのURLを入力。
  3. 「検証する」ボタンをクリック。

CSSファイルをアップロードして文法チェック

CSSファイルをアップロードして文法チェック
CSSファイルをアップロードして文法チェック

「CSS Validation Service」では、CSSファイルをアップロードしてCSSの文法チェックができます。

CSSファイルをアップロードしてCSSの文法チェックをする手順

  1. 「アップロード」のタブをクリック。
  2. 「CSSファイル:」横の「選択」からアップロードするCSSファイルを決める。
  3. 「検証する」ボタンをクリック。

CSSを直接テキストボックスに貼り付けて文法チェック

CSSを直接テキストボックスに貼り付けて文法チェック
CSSを直接テキストボックスに貼り付けて文法チェック

「CSS Validation Service」では、CSSを直接テキストボックスに貼り付けてCSSの文法チェックができます。

CSSを直接テキストボックスに貼り付けてCSSの文法チェックをする手順

  1. 「直接入力」のタブをクリック。
  2. 「検証したいCSSをテキストエリアに入力してください(CSSソースのみ):」下のテキストボックスにCSSを直接貼り付ける。
  3. 「検証する」ボタンをクリック。

CSSの文法チェックでエラーがでなかったとき

CSSの文法チェックでエラーがなかった
CSSの文法チェックでエラーがなかった

CSSの文法チェックにエラーがなかったときは、その旨が画面にでてきます。
さらにWebページに検査にパスしたことを証明するHTML/CSSを自分のWebサイトに貼り付ける許可を得られます。

CSSの文法チェックでエラーがでたとき

CSSの文法チェックでエラーがあった
CSSの文法チェックでエラーがあった

CSSの文法にエラーがあったときは、エラーが見つかったことが画面にでてきます。

ここはCSSのプロパティ名「dispray」は存在しないというエラーです。
修正候補として「display」と提案してくれています。

まとめ。パーツ毎に文法チェックがオススメ

「Markup Validation Service」や「CSS Validation Service」で文法チェックをする場合は、完成したURLで文法チェックをするより、パーツ毎に文法チェックするのがオススメです。

例えば、WordPressで作ったWebサイトのURLで文法チェックした場合、ほとんどエラーがでてくるはずです。

このエラーをすべてとるのは簡単ではありません。

WordPress、WordPressのテーマ、プラグイン、使っているJavaScript、自作のCSSと要因が複数あって、しかも自分では触れない場所もあるからです。

こういうときは、自分が編集可能なところのエラーだけとっておくのがいいです。

不思議と安心する感覚がでてくると思います。

以上、みなさまの助けなれば幸いです。

初稿 2020/09/11

タイトルとURLをコピーしました