戯れ言葉

VSCodeでHTML5とCSS3の文法をチェック(W3C Validation)

カテゴリ:フリーソフト
タグ:

ブログ記事をHTMLとCSSを使って、Visual Studio Code で書いています。

昨今はWEB上のHTMLとCSSの技術もHTML5、CSS3へと移行してきました。で、自分の書いたHTMLやCSSが、このHTML5やCSS3の文法に合っているのかが気になる所です。

この様な文法を、Web制作における共通の指針として勧告を出している、Web技術の標準化を行うW3Cという非営利団体があります。このW3Cについては下記サイトが判りやすいです。

W3Cとは?Web標準化の重要性とW3Cの勧告プロセス 

この様な文法に適合しているかどうかを、ネット上でチェックできるページがあります。

W3C Validator 

上記ページに、URLなりソースを入れてやれば文法のチェック(バリデーション)を行ってくれます。

私がよく勉強の為拝見させていただいてる Akira氏の下記ページでは、上記W3C Validatorで吐き出される英語のエラーについての解説があり、参考になります

W3C validatorのエラーの説明 

W3C Validator は便利で、当ブログも数回お世話になって今では、こちらで直せる部分ではエラーがゼロになりました。

ただ、毎回々々ここに書き込むのも面倒で、CSSなどは一度どこからでも読めるサーバー(FC2のファイルアップロード)などを利用しないとチェックが面倒です。

ところが、VSCode上で自動的にバリデートしてくれる拡張機能があります。これがとても便利。リアルタイムでエラーを表示してくれます。

HPCODEえいちぴーこーどと云うサイトの下記ページに詳細な解説があります。

VSCode内でHTMLとCSSのコードをW3Cチェック(バリデート)させる方法 

HTML5のバリデートに関してはちょっとした作業が必要で、JREの導入に手こずりましたが、W3C Validation の拡張機能をインストールすることができました。

下画像の赤枠部分はFC2ブログのエディターのファイルアップロードの機能で画像を記事に貼付けた時に自動的に生成されるコードです。

実はこの中のいくつかの属性等は旧のHTMLやXMLの文法で書かれています。

HTML5用の拡張機能をインストールします。検索窓にw3cと入れてやると候補がいくつか表示されますが、W3C Validation と云うのが該当の拡張機能です。

私の場合はすでにインストールが終わっているので、少し表示が違うかもしれません。

有効をクリックし

再読込

すると、上画像の様にVSCodeの左下にエラー数が表示されます。また、該当のエラー行には波下線が表示されてます。

このエラーのアイコンをクリックしてみると

エラーの内容とエラー行、文字位置の数字が表示され、このエラー表示の文字列をクリックすると、エディタウィンドウでは該当のエラーが発生している行に移動します。

img要素の中では、border ,width,height の 属性がHTML5では廃止されたのと、閉じタグの「 / 」は不要のため、エラーになっています。

エラー表示の上側の行をクリックすると、外部スタイルシートのリンク指定が不正になってると表示されます。ここはフルパスのURLを指定しなければなりません。

ローカルの環境でVScodeで記事を書く場合には、headerの中にそのローカルな環境での設定が必要なのですが、このスタイルシートの設定はこのheaderの中に書かれています。なのでこの部分はアップしません。VSCodeのローカルな環境でローカルなスタイルシートを指定するには、相対パスが有効です。という理由でこの場合はこの書き方で合ってます。

header部分はブログのテンプレートの方に書かれていますので、このheader部分を記事にはアップしません。

(記述が間違ってました。お恥ずかしい)

エラー表示の上側の行をクリックすると、外部スタイルシートのリンク指定でパスにはスペースは使ってはいけないと表示されてます。なのでスペースの入らないファイル名に変更します。

私は拡張機能のLive HTML Preview を使用しているのですが、その場合はCSSファイルへのパスは相対指定でしか機能しません。

試しに、わざとHTMLの閉じタグを一つ増やしてみると、こんな風に閉じタグが間違ってる旨のエラーが出ました。

CSS3のバリデーションの拡張機能は

CSSTree Validator をインストールします。

例えばCSSの宣言の区切りの「 ; 」セミコロンが抜けていると

こんな風にルールセット内の全ての行がエラーと表示されてますが、の行にエラーの元になってる行が表示されています。

リアルタイムで表示されるのが誠に便利です。

私はテンプレートにかなりの手を入れていて、この拡張機能を知ってからバリデートしてみたら沢山のエラーが出てびっくり。

CSSなどは殆どがイージーミスで、「 ; 」の抜けとか、auot なんていうスペルミスです。

このVSCode用のW3C拡張機能は、時々誤動作して、その時は一度ファイルを保存して、エディターを再起動。

HTMLとCSSの基本情報の参考サイト

注記1 : 2020 01 31 HTMLのValidationが機能していないので調査中

注記2 : 2020 02 07  Windows10で、HTML W3CValidationの設定はこうする。 VSCodeのW3CValidationが機能しなくなってたのをこうしたという話 

Comments 2

There are no comments yet.

京一朗  

hakaさん、こんばんは。

記事タイトルの「VSCodeでHTML5とCSS3の文法をチェック」ですけど、その辺のスキルがない自分には?? っていう感じで理解不能・・・です。頭がついていきません 笑。HTMLに5が付く? c+++みたいなものですかね? hakaさんはシステムエンジニアとかされているのですか? 自分の勉強不足を感じますよ。記事が少しでも理解できるよう三回読んでみます。それでダメだったら「ワン」と吠えますよ 笑。

2019/02/09 (Sat) 19:12 | 返信を書く |   
hige

hige  

京一朗さんへ

hakaではなくて
higeです。
正確にはわざとに全角です。
もしかして、別のサイトへ書くのを間違われましたか?
higeはシステムエンジニアではありません。
たんなるパソコン好きなじじいです。

c+++がcから変化してるのはコンパイラーの仕様の変化だと思ってるのですが、HTMLの変化はもっと世界的な変更と思います。多分。
ってcの言語の多様さの事は全然知ってません。

まさかからかわれてますか?

2019/02/09 (Sat) 20:40 | 再編集 | 返信を書く |   

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます