生活情報オンライン

ITエンジニアが役立つ情報を発信します。

超便利!HTML5/CSS3の検証なら、W3Cドキュメント検証サイト!

W3Cドキュメント検証サイト

私は驚きました。なんて便利なんだ、と。W3Cのドキュメント検証サイトが便利で感動したので紹介します。
validator.w3.org


このサービスでは、URLを入力するだけでそのWebサイトがW3Cの標準規格に沿ってコーディングされているか確認することが出来ます。このサービスではHTMLの規格をチェックするだけでなく、XHTML、SMIL、MathML、CSSに対しても標準規格に沿っているか検証してくれます。また、リンクが張られている場合にはリンクが切れているかも確認することが出来ます。

はてなブログを検証してみる

なんて便利なんでしょう。これを使えばW3Cの規格に準拠し適切なWebサイトが作成できているかが一瞬でわかってしまいます。さっそく「はてなブログ」を検証してみました。まずはトップページ、どうだ。
f:id:somegoro:20171217231507p:plain

なんと、51個もの指摘が出てしまいました。そのうち15個ほどは同様の指摘内容でh1要素の使い方に問題があるようですね。これだけ明確に指摘してくれれば直すのはそれほど時間がかからなそうです。

便利なオプションの使い方

さらにオプションを付けることで、指摘箇所をよりわかりやすく表示することが出来ます。次の画像の下のほうにあるように「Show source」「Show outline」にチェックを付けてみましょう。その他のオプションは任意です。付けても付けなくてもいいですが、今回はきっちり全部のオプションを付けてさらに「Character Encoding」「Document Type」も設定します。設定できたらCheckボタンをクリックします。
f:id:somegoro:20171217233107p:plain


すると、前回までは指摘内容だけの表示だったのが今回はソースコードを含めた指摘内容を表示してくれるようになります。これは「Show source」のオプションを付けたためです。これでさらに指摘箇所が分かりやすくなりましたね。
f:id:somegoro:20171217233747p:plain


さらに画面下の方へスクロールしていくとアウトラインが表示されています。これは「Show outline」のオプションを付けたためです。これは必要な人とそうでない人が別れそうですが、このアウトラインがあると全体を俯瞰して見ることが出来ますね。
f:id:somegoro:20171217233855p:plain


以上、W3Cドキュメント検証サイトのご紹介でした。