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

おはようございます！社員Aです👩

今回は、HTML・CSSの構文がチェックできる便利なオンラインツールを紹介します。

勉強したての初心者の方からプロの方まで、構文チェックをすることでミスを見つけられるだけでなく、正しい構文の勉強にもなります。

なるべく正しい表記できれいな構文を書くためにも、こういったチェックツールを使うことをおすすめします。

Another HTML-lint 5

Another HTML-lint 5 は、ハートコア株式会社（旧：株式会社ジゾン）が提供する、HTMLの構文チェックフリーツールです。

URL・ファイル・データ（直書き）の3つのタイプからチェックを行えるのが便利です。

チェックを行うと、全体的な評価と改善点を表示してくれます。

全体のチェック結果

個別のチェック結果

実際のエラーがどのようなものかを確認できます。また左側にある「解説」をクリックすると、理論が説明されており、勉強になります。

www.htmllint.net

 

153 Users

110 Pockets

Another HTML Lint - Gateway

http://www.htmllint.net/html-lint/htmllint.html

Markup Validation Service

こちらのサイトも先程と同様に、URL・ファイル・データ（直書き）の3つのタイプからチェックを行えます。

ただし、英語サイトになりますのでチェック結果もすべて英語で説明されています。

チェック結果

また、結果内容はフィルタをかけることができ、不要なものはスルーすることもできるのがメリットです。

validator.w3.org

 

30 Tweets

101 Users

3810 Pockets

The W3C Markup Validation Service

https://validator.w3.org

W3C's easy-to-use markup validation service, based on SGML and XML parsers.

CSS Validation Service

先程のサイトのCSSバージョンになります。

URL・ファイル・データ（直書き）の3つのタイプからチェックを行えます。

jigsaw.w3.org

 

1096 Users

1055 Pockets

The W3C CSS Validation Service

http://jigsaw.w3.org/css-validator/#validate_by_uri

Another HTML-lint gateway

チェックしない警告は減点対象外で、満点は 100点です。

チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができ、好みで調整ができます。

URL・ファイル・データ（直書き）の3つのタイプからチェックを行えます。

cetus.sakura.ne.jp

 

147 Users

34 Pockets

Another HTML-lint gateway

http://cetus.sakura.ne.jp/htmllint/htmllint.html

Another HTML-lint

Dirty Markup

こちらのサイトはHTML以外にもCSS・JS・APIなどをチェックすることが出来るマルチツールです。

いくつかのオプションもあり、使い勝手が良いです。

www.10bestdesign.com

 

49 Shares

216 Users

155 Pockets

DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier

https://www.10bestdesign.com/dirtymarkup/

A free tool to clean up your dirty code. DirtyMarkup is the best HTML, CSS, and Javascript (JS) beautifier with an API to tidy up your code in an application.