Web制作を始めると「CSSが効かない」「なぜかデザインが崩れる」といった壁に必ずぶつかります。
閉じタグの入れ忘れやセレクタの書き間違い、全角スペースの混入など、ほんの小さなエラーでも画面は思い通りに表示されません。
そんなときに役立つのがGoogle Chrome の検証ツール（デベロッパーツール）です。
このツールを使えば、HTMLやCSSの裏側を確認しながら「どこでエラーが起きているか」を一瞬で特定できます。
この記事では、初心者がつまずきやすいHTML・CSSのエラーと、その解消方法を検証ツールで確認する手順をやさしく解説します。
なお、Google Chrome の検証ツール（デベロッパーツール）の基本操作については
「【初心者向け】Google Chrome検証ツールの使い方｜HTML・CSS確認の基本」
で解説しているので、まずは操作について知りたい！という方はぜひチェックしてください。
HTMLでありがちなミス
初心者がつまずきやすいのは、ファイルの読み込みを忘れたり、ほんの小さなミスで何も反応がなかったり、表示が崩れてしまうこと。
検証ツールを使えば、その原因をすぐに突き止めることができます。
ファイルの読み込みを忘れる/読み込み方法を間違える
ファイルの読み込みを忘れていたり、HTMLにファイルを読み込む記述をする際に、スペルミスやファイル名に誤りがあり読み込まれないということがあります。
もしもそれが原因だった場合は、右上エリアにエラー表示が出ているので、丸いバツマークをクリックしてみましょう！
そうすると、右下エリアに「Console」タブが表示されます。また、Consoleタブの中に、エラーについての詳細が表示されている箇所があるので、エラーの内容を確認します。
エラーの詳細を確認する時に覚えれば良いポイントは3つ。
- ①どのファイルの何行目か
- どのファイルでエラーが出ているか、そのファイルの何行目でエラーが出ているのかが分かります。今回は、「index.html：5」と表示されており、index.htmlの5行目ということが分かります。
- ②ファイルの場所（パス）
- ファイルをどこに置いているのか、「パス」が表示されています。
HTMLにおける「パス」とは、Webページ上の画像や他のファイルへの「道筋」や「住所」を示す文字列のことです。 - ③どんなエラーなのか
- どんなエラー内容なのかが確認できます。
「net::ERR_FILE_NOT_FOUND」と表示されており、「ファイルが見つからない」ということが分かります。
エラーの内容が分かったら、VSCodeで自分のプロジェクトフォルダを開き、index.htmlの5行目を見てみましょう。今回は、CSSのファイル名「style.css」の「e」が抜けていて、「Styl.css」になっていたことが分かりました。
閉じタグを忘れたり、操作ミスで消してしまい表示が崩れる
HTMLの閉じタグを入れ忘れたり、閉じタグの一部が操作ミスによって消えていたりすると、意図せず表示が崩れます。
適用したいはずのCSSがページ全体に渡ってしまったり、検証ツールでは一つしかタグを置いていないのに、閉じタグがないことで、検証ツールがバグってタグが二つになってしまったり正しい情報が得られず混乱してしまいます。
そういう時は、VSCodeで自分が書いたHTMLをよく見直して、閉じタグがちゃんとした形で書かれているかしっかりと確認しましょう。
ネスト（入れ子）構造の順序ミス
タグの中に別のタグを含めて、階層的な構造を作ることで、入れ子構造ができます。
大きな塊の中に小さな塊を入れていくことで、「親要素」と、その中に囲まれる「子要素」という親子関係が出来上がり入れ子構造が成り立つのですが、順序が間違っているケースもよくあります。
タグがチグハグになっていないかを確認しましょう。
CSSでありがちなミス
セレクタに「.」をつけ忘れたり、セレクタのスペルミス
クラスを指定するはずが .textをtext（「.（ドット）」が無い）と書いてしまったり、そもそもセレクタ自体にスペルミスがあると、検証ツールで見た時にも反映されません。
CSSファイルを確認し、セレクタの先頭に「.（ドット）」がついているかを確認しましょう！
また、HTMLタグに書いてあるクラス名を確認し、コピペでCSSファイルに記述することでスペルミスは激減します。
プロパティのスペルミスや、単位の入れ忘れ
プロパティのスペル間違えもよくあるミスです。また、単位が必要なプロパティに単位を入れておらず、反映されないこともよくあります。
この場合のエラーは、検証ツールで⚠️マークが表示されるのと、プロパティに打ち消し線が引かれるので、分かりやすいですね！
VSCodeを開き、何が間違っているのかを確認して正しいプロパティを指定し、必要な単位を入れることで解消できます。
HTML・CSS共通のミス
全角スペースを入れてしまう
全角スペースや全角文字をHTMLタグの中に入れてしまったり、CSSセレクタに全角スペースが入っていたりと、「全角」は要注意です。
HTMLタグやCSSセレクタを入力する時は必ず「英数モード」に切り替えて、半角スペースで区切るという意識はもちろん大事ですが、VSCodeの「空白の表示」をオンにすると、全角スペースが点や記号で可視化するなどのちょっとした工夫をすると再発防止に繋がりますし、全角スペースを検索して探して半角スペースに変更するなどの対策でエラー修正の時短ができます。
Web制作をしていくと様々エラーが起こりますが、検証ツールの使い方をマスターすると無駄な時間が減少し効率よくWeb制作を進めていくことができます。
Tips｜エラー解消をさらにスムーズにする工夫
- VSCodeの「空白の表示」をオンにして全角スペースを可視化する
- 検索・置換機能で全角スペースを一括修正できる
- HTMLのクラス名はコピペするとスペルミス防止になる
検証ツールに慣れてきたら、VSCodeのカスタマイズがおすすめ！
ちょっとした工夫を取り入れるだけで、エラー修正のスピードが劇的に向上します。
まとめ｜検証ツールでエラーを見抜く力をつけよう
- ファイルの読み込み忘れは、右上のエラーマークやConsoleタブで確認できる
- セレクタやプロパティのスペルミスは、取り消し線や⚠️マークで気づける
- 閉じタグ忘れは直接エラーは出ないが、DOMツリーの崩れで発見できる
- 全角スペースなどは直接検出できないが、「効いていないCSS」として確認可能
検証ツールはエラーの原因を一瞬で特定する学習の味方です。
日々の実践の中で「どこが間違っているのか」を見抜く力を育てていきましょう。
基本的な画面の見方や操作方法は、以下の記事で解説しているので、あわせてチェックしてみてください。
