ツール
【保存版】HTML・CSSの構文チェックツール5選
2019年08月26日 8:00
おはようございます！社員Aです👩
今回は、HTML・CSSの構文がチェックできる便利なオンラインツールを紹介します。
勉強したての初心者の方からプロの方まで、構文チェックをすることでミスを見つけられるだけでなく、正しい構文の勉強にもなります。
なるべく正しい表記できれいな構文を書くためにも、こういったチェックツールを使うことをおすすめします。
もくじ
Another HTML-lint 5
Another HTML-lint 5 は、ハートコア株式会社（旧：株式会社ジゾン）が提供する、HTMLの構文チェックフリーツールです。
URL・ファイル・データ（直書き）の3つのタイプからチェックを行えるのが便利です。
チェックを行うと、全体的な評価と改善点を表示してくれます。
全体のチェック結果
個別のチェック結果
実際のエラーがどのようなものかを確認できます。また左側にある「解説」をクリックすると、理論が説明されており、勉強になります。
Markup Validation Service
こちらのサイトも先程と同様に、URL・ファイル・データ（直書き）の3つのタイプからチェックを行えます。
ただし、英語サイトになりますのでチェック結果もすべて英語で説明されています。
チェック結果
また、結果内容はフィルタをかけることができ、不要なものはスルーすることもできるのがメリットです。
CSS Validation Service
先程のサイトのCSSバージョンになります。
URL・ファイル・データ（直書き）の3つのタイプからチェックを行えます。
Another HTML-lint gateway
チェックしない警告は減点対象外で、満点は 100点です。
チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができ、好みで調整ができます。
URL・ファイル・データ（直書き）の3つのタイプからチェックを行えます。
Dirty Markup
こちらのサイトはHTML以外にもCSS・JS・APIなどをチェックすることが出来るマルチツールです。
いくつかのオプションもあり、使い勝手が良いです。
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
