2014/07/1625 Shares

HTML・CSS・WordPressテーマをチェックできる無料サービス一覧

涙

ブログをカスタマイズしていく時あちこちのコードをいじりますが、ある程度適当なコードでもブラウザが自動補正して表示してくれます。

でも、自分の環境では思ったとおり反映されているけど、ブラウザやバージョンの違いで意図しないエラーが吐き出されていることもあります。

そんな時便利なのが、HTMLやCSSをチェックしてくれるサービス。カスタマイズしたあとは一度チェックしてみましょう。「え、こんなにひどいの…?」とショックを受けるかもしれません。

HTMLをチェックしてくれるツール

HTML4.01とXHTMLの文法チェック

まず「HTMLとXHTMLの違いは何ぞや」という話を簡単にご説明します。

HTMLは、標準的であり一般的な言語。最終バージョンは4.01です。これにXML要素を加えたものがXHTMLです。はい、簡単すぎてわけわかりませんね。

詳しくはこちらをご覧ください。

「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめ

具体的な記述方法の違いはこちら。

HTMLとXHTMLの違いはどこにある?

たとえば、HTMLでは改行が<br>ですが、XHTMLでは<br />とする(しかも小文字のみ)など細かな違いがいくつかあります。

自分のブログはどちらで記述されているのかわからない時は、ブログのソースを見てみましょう。一番上に記述があるので、そこで判別できます。Stingerを例に挙げるとこんな記述が。

XHTML1.0ですね。さらに細かい仕様があるのですが、ここでは割愛します。

で、HTML4.01やXHTMLの記述が正しいかどうかチェックしたい場合は、こちらのツールを使います。

HTML文法チェックツール

Another HTML-lint gateway

URL指定、コピペ、アップロードの3パターンが用意されています。自分のブログをすぐに確認したい時はURLを入力してチェックしてみましょう。

html-lint

残念ながら当ブログはHTML5で作ってあるので、このツールは使えません。だれかのブログを勝手にチェックしてみます。さて、誰のブログでしょう…。

html-lint-check

-98点」となってしまいました。文法的にマズイ点がたくさんあったようです。冒頭でふれたようにブラウザは自動補正してくれるので、見た目で気づかないことが多いんですよね。

思ったとおり表示されていれば問題ないですが、エラーはできるだけ消したほうが致命的な問題を回避できます。表示速度にも若干影響する部分です。

HTML5の文法チェック

先述の「Another HTML-lint gateway」はHTML5に対応していません。

HTML5は4.01後の最新バージョンで、採用するブログが徐々に増えています。いくつかのタグが新たに加わり、廃止されたものもあります。

構造を明確にできるようになった、というのが特徴で、たとえばGoogle先生に『ここはヘッダーです!』『ここが記事本文です!』『ここは本文に直接関係ない部分です!』というのを伝えられます。

このHTML5はまだ正式勧告されていないのでツールもベータ版ですが、こちらでチェックできます。

HTML文法チェックツール

Another HTML-lint 5

先ほどと同じく、URL、コピペ、アップロードでチェックできます。

このブログをチェックしてみましょう。

html5-lint-check

あらら。頑張ります…

ちなみに文法チェックだけなので、「そこはarticleじゃなくてsectionだろーが!」なんていう構造上のツッコミはしてくれません。

CSSをチェックしてくれるツール

では、カスタマイズで最も多くいじるであろうCSSのチェックをしてみましょう。

CSS文法チェックツール

W3C CSS 検証サービス

HTMLと同じく、3パターンでチェックできます。詳しい説明は不要ですね。重大なエラーが見つかったらすぐ修正しましょう。

セミコロンがコロンだった、なんてイージーミスもよくあります。というより、「設定反映されねーぞ!?」という時はイージーミスのほうが多いかもしれません。

WordPressテーマをチェックするプラグイン

もしテーマを自作した場合は、WordPressが正しく動くかどうかをチェックしておきましょう。

「Theme-Check」というプラグインを使います。

WordPressテーマのチェックツール

Theme-Check

テーマチェック時の注意点

プラグインをインストールしたら、「外観」に「Theme Check」という項目が追加されます。ここから実行するだけですが、その前にデバッグモードにしておかなければなりません。

wp-config.php 内にこんな記述があります。

「false」を「true」に書き換えて上書き保存。

これでデバッグモードに切り替わりました。テーマチェックをした後は、「false」に戻すのをお忘れなく!

まとめ

以上、HTMLとCSS、おまけでWordPressテーマチェックツールのご紹介でした。

たった一か所の記述ミスで重大なエラーが出ることもあるので、あちこちカスタマイズした後は必ずチェックする習慣をつけておきましょう。

チェックツールで100点になったら検索サイトで上位表示されやすい、ということはありません。でも、表示スピードに影響するほどのエラーならSEOにも関係してくるので注意してください。

それでは、また。