このモジュールの最後の記事では、ページに適用された CSS の調査や、CSS コードのエラーを見つけるのに役立つその他のツールを含む、CSS のデバッグの原則について説明します。

前提条件: 基本的なコンピュータリテラシー、インストールされている基本的なソフトウェアファイル操作の基本的な知識、HTML の基本 (HTML の概要を学習します)、および CSS の機能の考え方 (このモジュールのこれまでの記事を調べてください。)
目標: CSS をデバッグする方法の基本を学ぶ。

HTML をデバッグするのと同じように、CSS をデバッグすることは、他の多くの種類のコードをデバッグすることと比べて、それほど怖くありません。続行する前にデバッグは怖くないを (再度) 読むことをお勧めします。

CSS とデバッグ

HTML のように、CSS は寛容です (続行する前に寛容なコードを読んでください)。CSS の場合、宣言が無効である (構文エラーが含まれている、またはブラウザがその機能をサポートしていない) 場合、ブラウザはそれを完全に無視し、次に見つかったものに進みます。

セレクタが無効な場合、何も選択されず、ルール全体が何もしません - 再び、ブラウザは次のルールに進むだけです。

これは多くの点で優れています - ほとんどの場合、たとえスタイルが正しく設定されていなくても、コンテンツはユーザに表示されます。しかし、問題をデバッグしようとしていて、それを見つける助けとなるどんな種類のエラーメッセージさえも取得できないとき、これはあまり役に立ちません。ユーザがコンテンツを表示できない場合、これはさらに面倒です。おそらく重要なスタイルが適用されていないために、レイアウトがひどく間違ってしまうのでしょうか。

幸いなことに役立ついくつかのツールがあります。今からこれらを見てみましょう。

DOM と CSS を調べる

現在、すべての Web ブラウザには、Web ページの検査と理解に役立つ開発ツールが用意されています。それらが提供するさまざまなツールの中で、すべてのブラウザで利用可能なものが2つあります。それは DOM インスペクタと CSS エディタで、Firefox のページインスペクタツールで利用可能です。 「HTML のデバッグ」の DOM インスペクタと、それを使用して HTML を調査する方法についてはすでに説明しました。ここではこれと CSS エディタ、そして CSS の問題をデバッグするためにそれらを一緒に使用する方法を見ていきます。

メモ: 次の例では Firefox を使用しますが、全てのブラウザで同様のツールが使用できます。— 配置は違うかもしれませんが.  What are browser developer tools? を読んで、異なったブラウザでの使用方法について知りましょう。 

この例を実行するときは、まず CSS のデバッグの例を新しいブラウザタブで開くようにしてください。コードの問題を解決してサンプルの完成版を作成する場合は、HTML ファイルと CSS ファイルのコピーを作成して、その修正内容をローカルに実装することをお勧めします。

これは、単純な記事を含む単純で明確な1列の Web ページであることを意図しています。

our example webpage with the problems fixed. The Firefox logo has been floated to the right, and the main heading and body text are now visible and well placed.

しかし現時点では、少々混乱しています。

Our example webpage in a broken state. There is a heading of My article in the middle and a Firefox logo, but everything else is small and not easily visible.

ページインスペクタの機能を使ってページの調査を始めましょう。Firefox では、Cmd/Ctrl + Shift + I を使って (またはメニューから ツール > Web 開発者 > インスペクタ を選択して) ページインスペクタを開くことができます。これにより、ブラウザの下部にあるウィンドウで一連のツールを開くことができます。

The Firefox page inspector, showing the DOM inspector on the left, and the CSS editor on the right. invalid CSS is crossed out and has a warning symbol

左側の DOM インスペクタ内の要素をクリックすると、右側の CSS エディタが更新され、その要素に適用されているすべての CSS ルールが表示されます。特に無効なプロパティは、それらを通る線とその隣に小さな警告記号が表示されているため、非常に便利です。これは以下で役に立ちます。

A close up of the Firefox page inspector, showing the DOM inspector on the left, and the CSS editor on the right. invalid CSS is crossed out and has a warning symbol

メモ: 各プロパティには、その横にチェックボックスがあります。チェックボックスをオン/オフにすると、プロパティごとに CSS プロパティを有効または無効にすることができます。これは、エラーの原因となっている可能性があるものを特定するのにも非常に役立ちます。

アクティブラーニング: エラーを見つけよう!

それでは、ツールの基本を概説した上で、エラーを見つけましょう。いずれの場合も、適用された CSS がどのように見えるかを確認するために、障害がある要素をクリックしてみてください。

  1. <header> および <footer> 要素は背景色を持つと想定されていますが、色は表示されません。
  2. ヘッダーの <h1> とフッターの <p> はどちらもページの高さが高すぎます — これは <h1> で特に明らかです。もうすぐ画面から消えてしまいます! 開発者ツールのインスペクタで <h1> をクリックしてから、ルールパネルに表示されている CSS 宣言の横にあるチェックボックスをオフにして、問題の原因を突き止めることができます。
  3. <img> はあるテキストの右側に置かれるように、右下に浮かんでいるはずですが、しかしそうなっていません。それはテキストの真上にあります。
  4. <main> コンテンツエリアのテキストは小さすぎます — 段落とリスト項目にはそれより大きなフォントサイズを適用する必要がありますが、どちらにも適用されていないようです。
    ヒント: これはプロパティではなくセレクタの問題であるため、少し難しいです。これを見つけるためにソースコードを研究しなければならないかもしれません — それを Firefox の開発者向けツールのスタイルエディターで見つけることができます。

どうしていいか分からなくなったら、Github の修正済みソースコードを見てください。

CSS 検証

W3C の HTML バリデータをすでに見ましたが、CSS バリデータも利用可能です。これは同じ方法で機能し、ローカルファイルをアップロードするか、または CSS を直接入力することによって、特定の URL で CSS を検証できます。

a visual of the CSS Validation Service mentioned and linked to nearby

アクティブラーニング: CSS を検証しよう

バリデータに CSS を入れて何が出力されるかを見てみましょう。

  1. CSS 検証サービスに移動して直接入力ビューで検証します
  2. エラーが発生した CSS を検証サービスのテキスト領域にコピーします。
  3. Check ボタンを押します。

これでエラーのリストが表示されます。 返されるのは2つだけです。

The validator results as they appear on the CSS validation service.

特に行番号と、どの場合にどのセレクタが動作しているかが含まれるため、これらは便利なメッセージです。これをどうやって解釈できるか見てみましょう。

  • Property background-colour doesn't exist : teal シンプルです。これはプロパティが存在しないことを表しており、何をする必要があるかが明らかです。
  • Value Error : float attempt to find a semi-colon before the property name. add it — これはセミコロンが抜けていることを表しています。発生している場所の行番号を見ると、見つけやすくなります。

これはブラウザ開発者ツールよりも有用性が低いと主張するかもしれません — 何が悪いのかを参照しながら、レンダリングされたコードを見ることはできません。また、セレクタが正しくない、もしくは構文が正しいがデザインに誤った値を選択しただけのインスタンスを見つけるのには意味がありません。しかし、大きなスタイルシートの場合、他の問題を特定するためにブラウザ開発者ツールに頼る前に、まず基本的な構文の誤りを取り除くためにこのサービスを通してそれを実行する価値があると言えるでしょう。

メモ: CSS Lint は、CSS を検証してエラーを発見するための同様のツールです。これは、いくつかの役に立つヒントを提示し、興味深い警告を出すこともできます。

まとめ

最初の CSS モジュールの最後の記事を完成させることができました!ここまで来たら、CSS 評価を完了して、他のいくつかの CSS および HTML モジュールを調べ始めることができます。

このモジュール

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto, mdnwebdocs-bot, ymizushi
最終更新者: silverskyvicto,