この章では、ブラウザでの確認とデバッグを学びます。
HTMLとCSSを書いていると、思った通りに表示されないことがあります。
その時に、勘で直すのではなく、ブラウザの開発者ツールを使って原因を探せるようになることが大切です。
開発者ツールとは
開発者ツールは、ブラウザに組み込まれている確認用のツールです。
ChromeやEdgeでは、ページ上で右クリックして「検証」を選ぶと開けます。
開発者ツールでは、次のようなことを確認できます。
- HTML構造
- 適用されているCSS
- 上書きされているCSS
- 要素のサイズと余白
- 画像やCSSファイルの読み込み
- スマホ幅での表示
- コンソールエラー
最初は難しく見えるかもしれませんが、HTML/CSSの確認では主にElementsパネルを使います。
ElementsでHTMLを見る
Elementsパネルでは、ブラウザが解釈したHTML構造を確認できます。
自分が書いたHTMLと、ブラウザ上の構造が違って見える場合は、タグの閉じ忘れや入れ子の崩れがあるかもしれません。
確認したいポイントは次の通りです。
- 要素が意図した場所にあるか
- クラス名が付いているか
- 親子関係が崩れていないか
- 不要な要素が入っていないか
- テキストや画像が正しいか
画面上の要素を選択すると、該当するHTMLがハイライトされます。
どのHTMLがどの表示に対応しているかを確認できます。
StylesでCSSを見る
Stylesでは、選択した要素に適用されているCSSを確認できます。
CSSが効かない時は、ここを見ると原因がわかりやすくなります。
確認したいポイントは次の通りです。
- 目的のCSSが表示されているか
- クラス名が一致しているか
- 別のCSSに上書きされていないか
- プロパティ名や値にミスがないか
- 打ち消し線が付いていないか
打ち消し線が付いているCSSは、別の指定に上書きされています。
その場合は、詳細度や書いた順番を確認します。
Box Modelで余白を見る
開発者ツールでは、選択した要素のBox Modelを確認できます。
content、padding、border、marginが視覚的に表示されます。
余白が思ったより広い、要素がはみ出している、中央寄せにならないといった時に役立ちます。
確認したいポイントは次の通りです。
- widthとheight
- padding
- border
- margin
- 親要素の幅
- 子要素の幅
余白の原因がpaddingなのかmarginなのかを確認できると、修正しやすくなります。
CSSを一時的に変更する
開発者ツール上では、CSSを一時的に変更できます。
たとえば、paddingの値を変えたり、display: flex;を追加したりできます。
これはブラウザ上だけの変更なので、ファイルには保存されません。
試してよさそうな値が見つかったら、エディタのCSSファイルに反映します。
レスポンシブ表示を確認する
開発者ツールでは、画面幅を変えてスマホ表示を確認できます。
確認したいポイントは次の通りです。
- 横スクロールが出ていないか
- 文字が小さすぎないか
- ボタンが押しやすいか
- 画像がはみ出していないか
- ヘッダーが本文を隠していないか
- カード一覧が自然に折り返すか
PCでブラウザ幅を縮めるだけでも、ある程度確認できます。
ただし、最終的には実機でも確認すると安心です。
Networkで読み込みを見る
CSSファイルや画像が読み込まれているかは、Networkパネルで確認できます。
CSSがまったく効かない場合、CSSファイルが404になっていることがあります。
画像が表示されない場合も、画像のパスが間違っているかもしれません。
確認したいポイントは次の通りです。
- CSSファイルが読み込まれているか
- 画像ファイルが404になっていないか
- ファイル名の大文字小文字が合っているか
- パスの階層が合っているか
ローカルでは表示されても、本番環境では大文字小文字の違いで表示されないことがあります。
ファイル名は正確に書きます。
よくあるトラブルの探し方
CSSが効かない
まず確認すること:
- CSSファイルが読み込まれているか
- セレクタが合っているか
- クラス名にタイプミスがないか
- 後から書いたCSSに上書きされていないか
画像が出ない
まず確認すること:
srcのパスが合っているか- ファイル名が合っているか
- 画像ファイルが存在するか
- 拡張子が合っているか
横スクロールが出る
まず確認すること:
- 固定幅の要素がないか
- 画像が親要素からはみ出していないか
- 長いURLや英単語が折り返されているか
- GridやFlexの列数が画面幅に合っているか
余白が思った通りにならない
まず確認すること:
paddingなのかmarginなのか- 親要素の余白なのか子要素の余白なのか
- marginの相殺が起きていないか
- リセットCSSの影響がないか
デバッグの進め方
問題が起きた時は、次の順番で確認します。
- どの要素がおかしいか特定する
- 開発者ツールでHTMLを確認する
- クラス名とCSSの適用状況を確認する
- Box Modelで幅と余白を確認する
- 必要なら開発者ツール上で値を試す
- 原因がわかったらCSSファイルを修正する
一度に全体を直そうとすると、原因が見えにくくなります。
1つずつ確認します。
この章のまとめ
- 開発者ツールを使うと、HTML構造とCSSの適用状況を確認できる
- CSSが効かない時は、読み込み、セレクタ、上書きを確認する
- Box Modelを見ると、幅や余白の原因を探しやすい
- Networkでは、CSSや画像の読み込みエラーを確認できる
- デバッグは、問題の要素を特定してから順番に確認する