こんにちは。コーダーの須澤です。
Webに関わる方ならご存知の人が多いと思いますが、W3CというWebに関する技術を標準化する機関があります。
今回はそのW3Cが提供するHTMLチェック、CSSチェックのツールがあるので紹介したいと思います。
このチェックツールを使うことによって、文法の正しいHTMLやCSSを作成することができます。
それにより、軽量化やSEOと親和性を高めることができます。
まだ、使ったことがないという方は是非、参考にしてみてください！
Markup Validation Service
チェックツール1つ目はHTMLの検証ツール「Markup Validation Service」の紹介です。
このチェックツールは、昔からリリースされており使用している人も多いと思いますが、
何度かバージョンアップしているようでして、最近ではHTML5にも対応しています。
使い方は、URLを直接入力する方法、ファイルアップロードする方法、ソースを直接記入する方法の３パターンです。
■URL直接入力の場合
赤丸のタブを選択後に「Address」の部分に検証したいURLを入力します。
※「More Options」の部分は特に選択しなくても問題ありません。
■URL直接入力の場合
赤丸のタブを選択後に「参照」のボタンをクリックし、パソコンに保存してあるHTMLデータを選択します。
※「More Options」の部分は特に選択しなくても問題ありません。
■ソースを直接記入する場合
赤丸のタブを選択後に検証したいHTMLソースを赤枠部分にペーストします。
※「More Options」の部分は特に選択しなくても問題ありません。
それぞれの方法で、検証したい内容を入力したら、あとは「Check」ボタンをクリックするだけです。
すると、以下の様な画面が表示されます。
上記の様な結果が表示されるので、Errorという部分を中心に改善を図っていきます。
例えば上記結果の５.であれば、「<body>タグにlinkやvlinkなどは書かずに、CSSに記載すること」
という内容が書かれているので、その内容を修正して再度Checkをすれば、その項目はErrorとして表示されなくなります。
これを繰り返すことで、W3Cに準拠したHTMLを作成することができます。
新規で作成するHTMLであれば、それほど難易度が高くないのですが、作成済みのHTMLを調整し、W3Cに対応させる場合、難易度が高くなる場合があります。
CSS Validation Service
チェックツール2つ目はCSSの検証ツール「CSS Validation Service」の紹介です。
https://jigsaw.w3.org/css-validator/validator.html.ja
このチェックツールは、日本語化が進んでおり、上記で説明したツールと同様、URLを直接入力するか、ファイルをアップロードするか、CSSのソースをペーストすれば検証することが可能です。
「検証する」をクリックすると、以下の様な画面が表示されます。
こちらもHTML同様に、各エラーごとに対処方法が表示されますので、その部分を調整し、再度検証を行えばその項目は表示させなくなります。
これを繰り返し行い、W3Cに準拠させて行きます。
まとめ
このようにしてエラーを消しこんだそれぞれのソースは「構文や仕様の仕方が正しい」＝「W3Cに準拠した」ことになります。
また、実はそれを表示するブラウザも、W3Cの定義した内容を正しく表示するように作られているため、準拠しているHTMLはブラウザにも優しい事になります。
ここまで解説した、W3Cへの準拠ですが１つ落とし穴があります。
それは、W3Cに対応させることが必ずしもGoogleのロボットに優しいとは限らないということです。
じゃあ、どうすればいい？となるかもしれませんが、基本的には問題なく、Googleは現段階でサイトの高速化（ソースを簡略化すること）を推奨しており、細かいことは記載しませんがこれをW3Cは正しくないと判断してしまいます。
よって、両方に対応させるのは難易度が高く両方が平均的に対応できるようにするか、SEOを重視しているサイト、知名度が高くSEOを重視する必要が無いサイトなどで、対応方法を変えるのが良いと考えています。
以下の項目の関連サービスにはW3Cチェックの事が細かく記載されていますので、そちらも是非、ご確認いただければと思います。
