品質を高めるためのHTMLとCSSの文法チェックツール
- 2018.10.27
- 2019.01.24
- Webスキル
よこのじ(@yokonoji_work)です。
HTMLとCSSのコーディングは結果が見た目でわかるので、文法的な記述に注意することは少ないかもしれません。しかし、タグの閉じ忘れや;(セミコロン)忘れといううっかりミスは必ず起こるものですし、Webサイト制作の品質を安定的なものにするにはチェックは必要かと思います。そういうわけで、HTMLとCSSの文法をチェックできるツールをまとめておきます。
Markup Validation Service
Markup Validation Serviceは、HTMLやCSSなどのWeb関連技術の標準化を行うW3C:World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)が提供しているオンラインのチェックツールです。
このように問題箇所(行・列)とその内容を示してくれます。仕様に沿った記述となっているか、タグの閉じ忘れがないかなどのチェックが入りますので、これらを修正すれば十分な品質が得られます。
URL指定:〇
ファイル入力:〇
コード貼り付け:〇
dirtyMarkup
dirtyMarkupは、HTML、CSS、JavaScriptの文法チェックが可能なオンラインのチェックツールです。
これは、2行目のdivタグの閉じ(>)を消してみた状態です。これにより、文法エラーとして赤いマーカーが現れました。内容自体は示してくれないようですが、簡易的なチェックとしてはわかりやすくて良いと思います。
dirtyMarkupの良いところは、コードの整形を行ってくれるところです。コードを貼り付けてCleanと書かれたボタンを押すと、インデントを適切に入れてくれた視認性の良いコードに整形してくれます。
URL指定:×
ファイル入力:×
コード貼り付け:〇
Another HTML-lint
Another HTML-lintは、ハートコアという日本の企業が提供するオンラインのチェックツールです。日本語で使うことができるのがうれしいですね。
チェックの結果は点数付きで示してくれます。エラー内容とともに解説を提示してくれる親切なつくりです。severity(重症度)が高いものは慎重に内容を確認するのがよさそうです。
その他のチェックツール
上で挙げたチェックツールとは異なり、文法チェックをするものではありませんが、作業を補助するツールとして役立つかもしれません。
下記のような機能を備えた、HTMLコーディングの補助ツールです。定規でページ要素のサイズを測定してデザインの参考にするような使い方ができます。Google Chromeの拡張機能です。
- リンク先の生存チェック
- META情報の一覧化
- スタイル名の一覧化
- 画像ファイルの一覧化
- リンク領域のハイライト
- 要素のハイライト
- 定規ツール
- デザイントレース
HTMLコードに記述されている見出しの階層がどのようになっているのか表示してくれます。
閲覧ページのHTMLコードのエラーを表示してくれます。Google Chromeの拡張機能です。
- 前の記事
defer、asyncでscriptを非同期で読み込み、表示速度を高速化する 2018.10.27
- 次の記事
Can I use? HTML・CSS・JavaScriptのブラウザ対応状況を調べるツール 2018.10.29