本当に使えるコーディングチェックサイト厳選3選

ferret編集部

2015年12月16日

ニュース

20,755

ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！
　　
>> 著者詳細はこちら

コーディングの正確性について、不安を持つWeb制作担当者は少なくないのではないでしょうか。
コーディング後に、ミスが発覚すると修正作業のために時間を大幅にロスしてしまう可能性があります。

できるだけミスを防ぐためにも、適切なコーディングができているかどうかをチェックできるツールはストックしておいた方がいいでしょう。

今回は、コーディングを担当しているものの自信が無いという方にオススメのコーディングチェックツールをご紹介します。

コーディングで気を付けなくてはいけないこと

制作するにあたって、コーディングレベルがありますが、 HTML ・ CSS を利用する際に気を付けなくてはいけないことは単純に「正確に動作し、ブラウザによってサイト崩れが発生しない」ことなのではないでしょうか。

例えば、「リンクページをクリックしたが、正確にページが表示されない」や「PCでサイトを見たときには正常に動くのにスマホで見たらレイアウトが崩れた」などのヒューマンエラーはよくあることであっても、制作段階で未然に防ぐ事が重要です。

コーディングチェックサイト3選

1.Another HTML -lint gateway

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

オンライン上で(X) HTML の文法をチェックしてくれるツールです。
チェックした文法が点数化されるので、上達度を測ることもできます。

但し、チェックに関して極めて厳しい警告も出されますが、文法上で修正の必要・不必要を見極める情報も持っていたほうがいいでしょう。

2.Markup Validation Service

http://validator.w3.org/

「Markup Validation Service」は、コーダーの方であれば一度は聞いたことがあるのではないでしょうか。
主体が W3C であることから。信頼して使用されている方も多いかと思います。

HTML5 も検証でき、常に更新を続けているので多様のパターンがチェックでき、 HTML 文書が(X) HTML 標準に準じているかをチェックできるオンラインツールです。
検証方法も3パターンあり、 URL のダイレクト入力やファイルのアップロード、コードの直接入力があるので、そのときのチェック量やファイル状況によって使い分け可能です。

エラー時はコード該当箇所と解説が表示されるので、コーディングのスキルアップツールとしても使用できます。

3.Dirty Markup

http://dirtymarkup.com/

Dirty Markupは、 HTML 文法だけでなく CSS 、 JavaScript の3タイプのソースを選択箇所にコードをペーストするだけでチェックしてくれるオンラインチェックツールです。

インターフェイスもわかりやすく、コーディング初心者の方に使いやすいシンプルなツールです。ホームページを公開し、通常通り反映しているがソースコードを調べてみたい、という時に便利でしょう。

まとめ

ディレクター、Webデザイナーなど、ホームページ運用に関わる職種の方たちであれば、コーディングの基礎や良し悪しを判断できる程度の知識は身につけておいた方がいいでしょう。
上記で紹介したようなチェックツールを活用しつつ、人の目でも複数チェックを入れ、できるだけミスが起こりにくいような環境を構築することが重要です。

また、適切なコーディングができていないと正確な情報表示ができてないばかりに SEO 的にもマイナス評価につながる可能性もあるので、チェック体制は万全にしておきましょう。