とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

HTML/CSSの文法チェック、バリデーションツールはこれ使っとけばいいよ2選

HTML/CSSの文法チェック、バリデーションツールはこれ使っとけばいいよ2選

HTMLとCSSの文法チェック、

バリデーションツールのご紹介。

 

最近だとエディタにアドオンやパッケージ、

プラグインなどでバリデーション機能が

ついていたりするので、コーディング・開発実装時に

チェックすることもできますが、やはり

「最終型としてのソース」の

チェックも忘れてはいけません。

 

開発時のソースコードは、

出力されたHTMLやCSSとはまた別もの。

 

ここでいう「最終型としてのソース」とは、

ユーザが見るwebページのソース。

最終的に出力された公開側のHTMLソースやCSSのことです。

SCSSを使用している場合、コンパイルしたCSSをチェック

したりなど。

 

バリデーションツールでのエラーチェックは

バグや不具合の検知にもつながります。

受託のフルスクラッチのweb製作をやっていると、

実装でドハマりして、うまく表示されないなどという

経験は誰にでもあるのではないでしょうか。

 

僕が使っているバリデーションツール紹介します。

2つです。どちらも非常に軽量。

無駄がないツールです。

 

▼HTMLのバリデーション・エラーチェック

Validator.nu (X)HTML5 Validator

 

▼CSSのバリデーション・エラーチェック

CSS Lint

 

よくあるのは

  • タグのネスト構造がおかしい
  • divタグ閉じ忘れ
  • 入れ子にしていいタグそうじゃないタグ

こんなミスですよね。

動的に出力されるような中規模〜大規模な案件だと

おなじページに同一のIDが複数ループで存在していたりなどのエラーもでたり。

 

このふたつのツールつかっておけば間違いないですね。

ほかにもいろいろツールがありますが、

下記のサイトで詳しく解説されているので参考にどうぞ。

 

webliker.info