HTML & CSS を書いていると、思い通りに表示されなかったり、原因不明のエラーに遭遇したりすることがあります。ここでは、よくあるトラブルとその対処法、さらに調査をしたいときの情報源について紹介します。

1. よくあるエラーと解決策

スタイルが当たらない！？原因は？

CSS を書いたのに、スタイルが正しく適用されない！そんなときは、以下のポイントをチェックしてみましょう。

1. CSS ファイルが正しく読み込まれているか？

   • HTML の <link> タグで、CSS ファイルのパスが正しく指定されているか確認しましょう。
   • ブラウザの開発者ツールの「Network」タブで、CSS ファイルが正しく読み込まれているか (ステータスコードが 200 になっているか) 確認しましょう。
   • タイプミスで、CSSファイル名や、HTML側の<link>タグが間違っているかもしれません。

2. セレクタの指定が間違っていないか？

   • タイプミスがないか、よく確認しましょう。
   • クラス名や ID 名の大文字と小文字が区別されていることに注意しましょう。
   • 詳細度が強い（より具体的な）スタイルが他に指定されていないか確認しましょう。例えば、divでスタイルを指定するよりも、div.classnameで指定する方が優先度が高く、div.classnameよりもdiv#idnameの方が優先度が高いです。意図せず、優先度の高いスタイルで、プロパティが上書きされているかもしれません。

3. キャッシュが影響していないか？

   • ブラウザのキャッシュが原因で、古い CSS が読み込まれている可能性があります。ブラウザのキャッシュをクリアするか、スーパーリロード（Windows なら Ctrl + F5、Mac なら Command + Shift + R）を試してみましょう。

4. プロパティや値の書き方が間違っていないか？

   • タイプミスがないか、よく確認しましょう。
   • セミコロン (;) やコロン (:) などの記号が抜けていないか確認しましょう。
   • プロパティや値が正しい構文で記述されているか確認しましょう。

レイアウトが崩れる！どう直す？

レイアウトが崩れてしまったときは、以下のポイントを確認してみましょう。

1. HTML の構造が正しいか？

   • タグの閉じ忘れや、タグの入れ子関係の間違いがないか確認しましょう。
   • <div> の閉じ忘れは、レイアウト崩れの主な原因の一つです。
   • 開発者ツールの「Elements」タブで、HTML の構造を確認すると便利です。

2. ボックスモデルを意識しているか？

   • 要素の幅や高さ、余白 (margin、padding)、枠線 (border) が正しく設定されているか確認しましょう。
   • 特に、width や height を指定した場合は、padding や border のサイズも考慮する必要があります。
   • box-sizing: border-box; を指定すると、width や height に padding と border のサイズが含まれるようになり、レイアウトが計算しやすくなります。

3. float を使っている場合は、解除を忘れていないか？

   • float を使った要素の後続要素が回り込み、レイアウトが崩れることがあります。親要素に overflow: hidden; を指定するか、後続要素に clear: both; を指定して、float を解除しましょう。
   • 近年では、float よりも Flexbox や Grid を使ってレイアウトを組むことが推奨されています。

4. Flexbox や Grid のプロパティを正しく指定しているか？

   • display: flex; や display: grid; を指定した親要素に、適切なプロパティが設定されているか確認しましょう。
   • Flexbox や Grid は便利な反面、プロパティの種類が多く、挙動が複雑です。公式ドキュメントなどを参照して、プロパティの意味や使い方を正しく理解しましょう。

2. デバッグに役立つツール

ブラウザの開発者ツールを使いこなそう

ブラウザの開発者ツールは、ウェブ開発に欠かせない強力なツールです。開発者ツールを使うと、HTML の構造や CSS のスタイルを確認したり、JavaScript のエラーをデバッグしたり、ネットワークの通信状況を調査したりすることができます。

• Elements (要素)：HTML の構造と、適用されている CSS のスタイルを確認、編集できます。
• Console (コンソール)：JavaScript のエラーメッセージや、console.log() の出力結果を確認できます。
• Network (ネットワーク)：ファイルの読み込み状況や、HTTP リクエストの内容を確認できます。
• Sources (ソース)：JavaScript のコードをデバッグできます。ブレークポイントを設定したり、変数の値を確認したりできます。
• Performance (パフォーマンス)：ページの読み込み速度や、レンダリングのパフォーマンスを測定できます。
• Application (アプリケーション)：Cookie や Local Storage などのストレージの内容を確認できます。
• Security (セキュリティ)：セキュリティに関する情報を確認できます。
• Lighthouse：ウェブページのパフォーマンス、アクセシビリティ、SEO などを測定し、改善点を提示してくれます。

開発者ツールを使いこなせるようになると、デバッグの効率が格段に向上します。

エラーを見つけ、修正する

開発者ツールを使ってエラーを見つけ、修正する手順は以下の通りです。

1. 問題の特定: まずは、問題が発生している箇所を特定します。見た目がおかしいのか、それとも特定の機能が動かないのか、具体的な症状を確認しましょう。
2. 開発者ツールで確認: ブラウザの開発者ツールを開き、問題の箇所に対応する HTML 要素や CSS スタイル、JavaScript コードを調べます。
3. エラーメッセージの確認: Console タブにエラーメッセージが表示されていないか確認します。エラーメッセージがあれば、その内容を手がかりに問題の原因を特定します。
4. HTML/CSS の検証: Elements タブで HTML の構造や CSS の適用状況を確認します。タグの閉じ忘れ、セレクタの指定ミス、スタイルの競合などがないか調べましょう。
5. JavaScript のデバッグ: Sources タブで JavaScript のコードをデバッグします。ブレークポイントを設定して処理を一時停止させ、変数の値を確認しながら、問題の原因を探ります。
6. 修正とテスト: 問題の原因を特定したら、コードを修正します。修正後は、ブラウザで動作を確認し、問題が解決したかテストします。必要に応じて、3～6 の手順を繰り返します。

3. さらに調査をしたいときは

MDN Web Docs は最高の資料！

MDN Web Docs は、Mozilla が運営するウェブ開発者向けの公式ドキュメントサイトです。HTML、CSS、JavaScript に関する最新の情報が網羅されており、ウェブ開発者にとって最も信頼できる情報源の一つです。

MDN Web Docs

リファレンス、チュートリアル、サンプルコードなどが充実しており、初心者から上級者まで、あらゆるレベルのウェブ開発者にとって役立つ情報が満載です。

Can I use... で対応状況をチェック

Can I use... は、様々なウェブ技術のブラウザ対応状況を確認できるウェブサイトです。特定の HTML タグや CSS プロパティ、JavaScript API などが、どのブラウザのどのバージョンでサポートされているかを簡単に調べることができます。

Can I use...

新しい技術を使う際には、Can I use... で対応状況を確認し、対象とするブラウザで問題なく動作するかどうかをチェックすることが重要です。