Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの特徴・インストール方法

スポンサーリンク

Bracketsで『htmlコーディングミスの場所がわからない……』とか『htmlタグの入力が間違っているみたいでページがうまく表示されない……』ということはありませんか?

そんな時には、W3CValidation拡張機能プラグインが便利です。W3CValidationは、htmlの文法チェックをしてコーディングミスの解決方法を教えてくれる拡張機能プラグインです。

ということで、今日はW3CValidation拡張機能プラグインの特徴・インストール方法の説明をしますね。

使い方を知りたい場合はこちらをどうぞ

Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの使い方
Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの使い方の説明です。インストールはしてみたものの……という方もどうぞ。
W3CValidation拡張機能プラグイン

W3CValidation拡張機能の特徴

W3CValidation拡張機能プラグインの特徴は、「W3C ―World Wide Web Consortiumの略で、htmlやcssなどに関していろいろな決めごとをしている団体― が決めた文法に従ってhtmlを記述しているか」を簡単にチェックしてくれることです。

文法チェックにエラーがなければ、Brackets画面右下に「チェックOKの緑色アイコン」が表示されます。

文法チェックでエラーがある場合は、Brackets画面右下に「チェックNGの黄色アイコン」が表示されます。

さらに「チェックNGの黄色アイコン」をクリックするとエラー詳細が表示されます。


エラー詳細の文言が英語なので、わかりずらいかもしれません。が、よくみると簡単な単語がならんでいるだけなのです。慣れると「なぜエラーになっているのか」がすぐわかるようになりますのでご心配なく。慣れる時間もそれほどかかりません。ちなみ英語ができない管理人ですら、なんとか解読できております(`・ω・´)ゞ

ということで、次はインストール方法の説明……
っとその前に、「使い方を知りたいんだけど!」という人もいるかと思うので、そんなアナタはこちらをどうぞ

Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの使い方
Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの使い方の説明です。インストールはしてみたものの……という方もどうぞ。

W3CValidation拡張機能のインストール方法

それではW3CValidation拡張機能プラグインのインストール方法の説明をしますね。

まずは画面右側にあるツールバーをクリックして拡張機能マネージャーを表示します。


[入手可能]タグが選択されていることを確認し、検索ボックスに「W3CValidation」 と入力してください。

W3CValidation が表示されたら(一番上とは限らないので注意してください)、[インストール]ボタンをクリックしてください。

[拡張機能をインストール]メッセージ画面が表示されます。「インストールは成功しました。」とメッセージが表示されたら、[閉じる]ボタンをクリックしてください。

さらに[閉じる]ボタンをクリックしてください。

Brackets画面の右下のステータスバーにアイコンが表示されていればインストール成功です。表示されるアイコンは2種類あり、「文法チェックOKの緑色アイコン」または「文法チェックNGの黄色アイコン」のいずれかです。

文法チェックOKの緑色アイコンの場合

文法チェックNGの黄色アイコンの場合

W3CValidation拡張機能プラグインの使い方はこちらからどうぞ

Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの使い方
Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの使い方の説明です。インストールはしてみたものの……という方もどうぞ。

まとめ

今日はBracketsで『htmlコーディングミスの場所がわからない……』とか『htmlタグの入力が間違っているみたいでページがうまく表示されない……』という時に、htmlの文法チェックをして解決方法を教えてくれるW3CValidation拡張機能プラグインの特徴・インストール方法の説明をしました。

特にhtmlのコーディングをはじめた頃は、どこが間違っているのか自分で探すのは大変です。ちなみに管理人は今でもハマって苦労しています(`・ω・´)

そうそうW3CValidation拡張機能プラグインの使い方を知りたい人は、こちらからお願いします→

それでは

コメント

  1. oke より:

    2日前に、以下の問合せを送信しましたが、反映されないようなので再度送信します。
    もし、正常に送信されていたのなら当問合せを無視してください。

    ————————————————-

    お世話になります。

    「Brackets」の存在を知り、「超初心者ホームページ作成ナビ」サイトの解説を読みながら、当ソフト及び「おすすめのプラグインまとめ【初心者編】」に載っている全てのプラグインのインストールしてみました。しかし、「W3CValidation」が動作しなく助言をお願いします。

    現象は次のとおりです。
    HTMLソースを保存しても「Brackets」画面のステータスバーに2種類のどちらかのアイコンが表示されなく、本来表示されると思われるアイコンの位置には、灰色の円マークが表示されています。そのマークにカーソルを持って行くと、「HTMLに使用できるLintチェッカーがありません」と表示されます。

    なお、メニューバーの「編集」には「Refrech W3C validation」の項目が表示され、関連項目か分かりませんがメニューバーの「表示」には「保存時にファイルをLintチェック」項目にチェックが付いています。

    また、念のため、一旦「W3CValidation」をアンインストールし、かつ他の全てのプラグインを無効にした上で、再度「W3CValidation」をインストールし「W3CValidation」のみを有効にした状態で試しましたが改善されません。

    –環境等———-
    ・Windows10
    ・2日前に「Brackets」をインストールしたので最新版です。
    ・拡張機能マネージャーに表示されるプラグインの名称は、「W3C Validation (by Umoxfo)」(V.1.1.0)とサイト解説で記載されている「W3C Validation 」(V.2.2.2)と多少異なりますが、他に該当する名称のものはありません。

    • 管理人 より:

      okeさん

      コメントありがとうございます。管理人です。

      私も、okeさんと同じ現象が発生していました。

      なので「W3C Validation (by Umoxfo)」を無効化し、「Simple W3C Validator for Brackets」を使うようにしてみました。今のところうまくいっているようです。

      「Simple W3C Validator for Brackets」は、Brackets公式サイト(http://brackets.io/)のページ一番下に表示されているW3C Validationからリンクできます。

      なので、よろしければ、以下の方法でやってみていただけますか?

      ■方法
      以下の方法でやってみてください。

      1.拡張機能マネージャーより「W3C Validation (by Umoxfo)」を無効化
      2.「Simple W3C Validator for Brackets(https://github.com/cfjedimaster/brackets-w3cvalidation)」をインストール

      なお、拡張機能マネージャーには、「Simple W3C Validator for Brackets」は表示されませんので、以下の方法でお願いします。

      【インストール方法】
      1. https://github.com/cfjedimaster/brackets-w3cvalidation へアクセス。

      2. [Clone or download]→[Download ZiP]で、brackets-w3cvalidation-master.zipをダウンロード。

      3. 拡張機能マネージャーの左下にある[.zipをここにドラッグするか、URLからインストール……]に、ダウンロードしたbrackets-w3cvalidation-master.zipをドラッグ & ドロップ。

      ■おわび
      okeさんからの問い合わせが、私の方には、届いていませんでした。

      なので、どちらがどうと言うことはありません。不可抗力ということで。

      が、結果として、okeさんには、4日間お待たせしてしまうことになってしまったので、申し訳ありませんでした。

      また何かあれば遠慮なくコメントくださいね。

  2. oke より:

    「Simple W3C Validator for Brackets」で解決しました。
    分かり易い作業手順の説明、ありがとうございました。

タイトルとURLをコピーしました