【保存版】HTML・CSSの構文チェックツール5選

ツール

【保存版】HTML・CSSの構文チェックツール5選

2019年08月26日 8:00 

【保存版】HTML・CSSの構文チェックツール5選

おはようございます!社員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

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!