photo credit: JanneM via photopin cc
今回はHTMLのコーディングに便利なツールをご紹介いたします。
検証
The W3C Markup Validation Service
The W3C Markup Validation Service
HTML、HTML5の記述を検証をしてくれます。URI、ファイル、ソースの3つで検証できます。
The W3C CSS Validation Service
The W3C CSS Validation Service
CSSの記述を検証をしてくれます。URI、ファイル、ソースの3つで検証できます。
Another HTML-lint 5
Another HTML-lint 5
日本語でHTML5の記述の検証結果を表示してくれます。URL、ファイル、ソースの3つで検証できます。
Another HTML-lint gateway
日本語でHTMLの記述の検証結果を表示してくれます。URL、ファイル、ソースの3つで検証できます。
整形
HTML整形ツール（プチ・デバッグ機能付き）
HTMLソースを整形してくれます。整形時にインデントの種類をタブや空白などで選択できます。
オンラインCSS自動整形
CSSソースを整形してくれます。整形方式をプロパティ基準、 セレクタ基準で選択できます。またインデントの種類も選べるなど、かなり細かく設定できます。
画像編集
TinyPNG
TinyPNG – Compress PNG images while preserving transparency
PNG画像を圧縮してくれます。ドラッグ&ドロップするだけで画像を圧縮してくれます。画像によっては50%以上下げてくれます。
まとめ
HTMLのコーディングで自分のソースの妥当性を知りたいときや、エラーを調査するには検証サイトはすごく便利です。またソースの美観を保ちたいときは整形ツールは必須でしょう。
画像はサイトの表示で重くなりがちな要因です。画像サイズのスリム化ができるとサーバーの負担も減らすことができます。
こういったツールを使って、コーディングの時間を短くしたり、ソースの質を上げていければいいですよね。
コメント