WEB制作の備忘録|朧なる足痕

HTML / CSS 文法チェック

The W3C Markup Validation Service

validator.w3.org

 

The W3C CSS Validation Service

  • CSSの記述が終了したら「文法チェック」を行います。
  • テキストエディタなどで記述したCSSをコピペしてチェックします。

jigsaw.w3.org

 

dirty Markup

  • HTML、CSSJavaScriptAPIの文法を1つのサイトでチェックできます。
  • ソースコードをコピペしてチェックできます。
  • 「clean」をクリックすると、コードの改行やインデントが自動挿入され、よりきれいに整形してくれます。

www.10bestdesign.com

 

HTMLエラーチェッカーGoogle Chrome

  • ブラウザGoogle Chromeのアドオン(拡張機能)です。
  • HTMLをプレビューで確認するときにGoole Chromeを指定してチェックします。

Google Chrome > 右上縦3点 > その他のツール > 拡張機能 > 左上ハンバーガーメニュー > 「Chrome ウェブストアを開きます」 > 「ストアを検索」でキーワード検索 > 「Chromeに追加」

f:id:hak00810:20200414224410p:plain

HTMLエラーチェッカー

HTML Validator (Firefox)

  • HTMLをプレビューで確認するときにFirefoxを指定してチェックします。

プレビュー時に画面を右クリック > ページのソースを表示

ソースの下にHTML Varidatorが出てきます。

 

その他 便利ツール

Can I Use

  • ブラウザごとの新要素の使用可能を確認できます。

caniuse.com

HTML5 OutlinerGoogle Chrome

 

<参考サイト>

odnax.hatenablog.com

webliker.info