Bracketsで『htmlコーディングミスの場所がわからない……』とか『htmlタグの入力が間違っているみたいでページがうまく表示されない……』ということはありませんか？
そんな時には、W3CValidation拡張機能プラグインが便利です。W3CValidationは、htmlの文法チェックをしてコーディングミスの解決方法を教えてくれる拡張機能プラグインです。
ということで、今日はW3CValidation拡張機能プラグインの特徴・インストール方法の説明をしますね。
使い方を知りたい場合はこちらをどうぞ
W3CValidation拡張機能の特徴
W3CValidation拡張機能プラグインの特徴は、「W3C ―World Wide Web Consortiumの略で、htmlやcssなどに関していろいろな決めごとをしている団体― が決めた文法に従ってhtmlを記述しているか」を簡単にチェックしてくれることです。
文法チェックにエラーがなければ、Brackets画面右下に「チェックOKの緑色アイコン」が表示されます。
文法チェックでエラーがある場合は、Brackets画面右下に「チェックNGの黄色アイコン」が表示されます。
さらに「チェックNGの黄色アイコン」をクリックするとエラー詳細が表示されます。
エラー詳細の文言が英語なので、わかりずらいかもしれません。が、よくみると簡単な単語がならんでいるだけなのです。慣れると「なぜエラーになっているのか」がすぐわかるようになりますのでご心配なく。慣れる時間もそれほどかかりません。ちなみ英語ができない管理人ですら、なんとか解読できております(｀・ω・´)ゞ
ということで、次はインストール方法の説明……
っとその前に、「使い方を知りたいんだけど!」という人もいるかと思うので、そんなアナタはこちらをどうぞ
W3CValidation拡張機能のインストール方法
それではW3CValidation拡張機能プラグインのインストール方法の説明をしますね。
まずは画面右側にあるツールバーをクリックして拡張機能マネージャーを表示します。
[入手可能]タグが選択されていることを確認し、検索ボックスに「W3CValidation」 と入力してください。
W3CValidation が表示されたら（一番上とは限らないので注意してください）、[インストール]ボタンをクリックしてください。
[拡張機能をインストール]メッセージ画面が表示されます。「インストールは成功しました。」とメッセージが表示されたら、[閉じる]ボタンをクリックしてください。
さらに[閉じる]ボタンをクリックしてください。
Brackets画面の右下のステータスバーにアイコンが表示されていればインストール成功です。表示されるアイコンは2種類あり、「文法チェックOKの緑色アイコン」または「文法チェックNGの黄色アイコン」のいずれかです。
文法チェックOKの緑色アイコンの場合
文法チェックNGの黄色アイコンの場合
W3CValidation拡張機能プラグインの使い方はこちらからどうぞ
まとめ
今日はBracketsで『htmlコーディングミスの場所がわからない……』とか『htmlタグの入力が間違っているみたいでページがうまく表示されない……』という時に、htmlの文法チェックをして解決方法を教えてくれるW3CValidation拡張機能プラグインの特徴・インストール方法の説明をしました。
特にhtmlのコーディングをはじめた頃は、どこが間違っているのか自分で探すのは大変です。ちなみに管理人は今でもハマって苦労しています(｀・ω・´)
そうそうW3CValidation拡張機能プラグインの使い方を知りたい人は、こちらからお願いします→。
それでは
コメント
２日前に、以下の問合せを送信しましたが、反映されないようなので再度送信します。
もし、正常に送信されていたのなら当問合せを無視してください。
————————————————-
お世話になります。
「Brackets」の存在を知り、「超初心者ホームページ作成ナビ」サイトの解説を読みながら、当ソフト及び「おすすめのプラグインまとめ【初心者編】」に載っている全てのプラグインのインストールしてみました。しかし、「W3CValidation」が動作しなく助言をお願いします。
現象は次のとおりです。
HTMLソースを保存しても「Brackets」画面のステータスバーに２種類のどちらかのアイコンが表示されなく、本来表示されると思われるアイコンの位置には、灰色の円マークが表示されています。そのマークにカーソルを持って行くと、「HTMLに使用できるLintチェッカーがありません」と表示されます。
なお、メニューバーの「編集」には「Refrech W3C validation」の項目が表示され、関連項目か分かりませんがメニューバーの「表示」には「保存時にファイルをLintチェック」項目にチェックが付いています。
また、念のため、一旦「W3CValidation」をアンインストールし、かつ他の全てのプラグインを無効にした上で、再度「W3CValidation」をインストールし「W3CValidation」のみを有効にした状態で試しましたが改善されません。
–環境等———-
・Windows10
・２日前に「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日間お待たせしてしまうことになってしまったので、申し訳ありませんでした。
また何かあれば遠慮なくコメントくださいね。
「Simple W3C Validator for Brackets」で解決しました。
分かり易い作業手順の説明、ありがとうございました。