こんにちは、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」
このWebサイトは基本英語表記です。
エラーが出たときも英語表記。
ただ、ほとんどが簡単な英語なのでなんとかなると思います。
難しいときはGoogle先生に翻訳を頼みましょう。
「Markup Validation Service」の使い方
「Markup Validation Service」の使い方は大きく3つあります。
- URLを入力して文法チェック
- HTMLファイルをアップロードして文法チェック
- HTMLを直接テキストボックスに貼り付けて文法チェック
WordPressを使う場合、こちらの出番は少ないと思います。
HTMLの部分はほとんどWordPressのテーマやプラグインが生成するからです。
それでもWordPressのテーマを自作する人やコードエディターを使う人には使える便利ツールです。
オプション（More Options）は基本的にデフォルトのままで大丈夫です。
ツールが自動的に判断してくれるからです。
URLを入力して文法チェック
「Markup Validation Service」では、WebサイトのURLを直接入力してHTMLの文法チェックができます。
URLを入力してHTMLの文法チェックをする手順
- 「Validate by URI」のタブをクリック。
- 「Address:」横のテキストボックスにWebサイトのURLを入力。
- 「Check」ボタンをクリック。
「Markup Validation Service」では、「URI」となっていますがひとまず「URL」と読み替えてもらっていいです。
HTMLファイルをアップロードして文法チェック
「Markup Validation Service」では、HTMLファイルをアップロードしてHTMLの文法チェックができます。
URLを入力してHTMLの文法チェックをする手順
- 「Validate by File Upload」のタブをクリック。
- 「File:」横の「選択」からアップロードするHTMLファイルを決める。
- 「Check」ボタンをクリック。
HTMLを直接テキストボックスに貼り付けて文法チェック
「Markup Validation Service」では、HTMLを直接テキストボックスに貼り付けてHTMLの文法チェックができます。
HTMLを直接テキストボックスに貼り付けてHTMLの文法チェックをする手順
- 「Validate by Direct Input」のタブをクリック。
- 「Enter the Markup to validate:」横のテキストボックスにHTMLを直接貼り付ける。
- 「Check」ボタンをクリック。
HTML文法チェックでエラーがでなかったとき
HTMLの文法チェックにエラーがなかったときは「Document checking completed. No errors or warnings to show.」と画面にでてきます。
「ドキュメントのチェックが終わった。エラーもワーニングもでてこなかった。」
そんな意味です。
HTML文法チェックでエラーがあったとき
HTMLの文法チェックにエラーがあったときは、エラーの場所とその内容が画面にでてきます。
この例では「<!DOCTYPE html>がドキュメントの最初にない」。そんな意味です。
CSSの文法チェック
CSSの文法チェックをするWebサイトがあります。
CSS文法チェックサイト「CSS Validation Service」
こちらは様々な言語に対応していて、日本語表記もあります。
エラーもある程度は日本語で表示してくれるため、使いやすいと思います。
WordPressを使う人は、編集場所がほとんどCSSだと思うので「CSS Validation Service」の方が活躍します。
「CSS Validation Service」の使い方
「CSS Validation Service」の使い方は大きく3つあります。
- URLを入力して文法チェック
- CSSファイルをアップロードして文法チェック
- CSSを直接テキストボックスに貼り付けて文法チェック
WordPressを使う人はこちらの出番が多いと思います。
すでにあるWordPressのテーマやプラグインを使っても、CSSは自分で「style.css」を編集する人も多いはずだからですね。
オプションは基本的にデフォルトのままで大丈夫です。
ツールが自動的に判断してくれるからです。
URLを入力して文法チェック
「CSS Validation Service」では、WebサイトのURLを直接入力してCSSの文法チェックができます。
URLを入力してCSSの文法チェックをする手順
- 「URLを指定」のタブをクリック。
- 「アドレス:」横のテキストボックスにWebサイトのURLを入力。
- 「検証する」ボタンをクリック。
CSSファイルをアップロードして文法チェック
「CSS Validation Service」では、CSSファイルをアップロードしてCSSの文法チェックができます。
CSSファイルをアップロードしてCSSの文法チェックをする手順
- 「アップロード」のタブをクリック。
- 「CSSファイル:」横の「選択」からアップロードするCSSファイルを決める。
- 「検証する」ボタンをクリック。
CSSを直接テキストボックスに貼り付けて文法チェック
「CSS Validation Service」では、CSSを直接テキストボックスに貼り付けてCSSの文法チェックができます。
CSSを直接テキストボックスに貼り付けてCSSの文法チェックをする手順
- 「直接入力」のタブをクリック。
- 「検証したいCSSをテキストエリアに入力してください（CSSソースのみ）:」下のテキストボックスにCSSを直接貼り付ける。
- 「検証する」ボタンをクリック。
CSSの文法チェックでエラーがでなかったとき
CSSの文法チェックにエラーがなかったときは、その旨が画面にでてきます。
さらにWebページに検査にパスしたことを証明するHTML/CSSを自分のWebサイトに貼り付ける許可を得られます。
CSSの文法チェックでエラーがでたとき
CSSの文法にエラーがあったときは、エラーが見つかったことが画面にでてきます。
ここはCSSのプロパティ名「dispray」は存在しないというエラーです。
修正候補として「display」と提案してくれています。
まとめ。パーツ毎に文法チェックがオススメ
「Markup Validation Service」や「CSS Validation Service」で文法チェックをする場合は、完成したURLで文法チェックをするより、パーツ毎に文法チェックするのがオススメです。
例えば、WordPressで作ったWebサイトのURLで文法チェックした場合、ほとんどエラーがでてくるはずです。
このエラーをすべてとるのは簡単ではありません。
WordPress、WordPressのテーマ、プラグイン、使っているJavaScript、自作のCSSと要因が複数あって、しかも自分では触れない場所もあるからです。
こういうときは、自分が編集可能なところのエラーだけとっておくのがいいです。
不思議と安心する感覚がでてくると思います。
以上、みなさまの助けなれば幸いです。
初稿 2020/09/11
