この翻訳は不完全です。英語から この記事を翻訳 してください。

このモジュールの最後の記事では、ページに適用された 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 の問題をデバッグするためにそれらを一緒に使用する方法を見ていきます。

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

When going through this example, we'd first like you to open our CSS debugging example in a new browser tab. If you want to work through and fix the code problems to create a finished version of the example, we'd advise you to make a copy of the HTML and CSS files, and implement the fixes locally.

It is meant to be a simple, clear one column web page containing a simple article:

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.

At the moment however it is a bit of a mess:

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.

Let's start investigating the page with the page inspector's features. In Firefox you can open the page inspector using Cmd/Ctrl + Shift + I (or by choosing Tools > Web Developer > Inspector from the menu), which will give you a set of tools open in a window on the bottom of the browser like so:

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

If you click on an element inside the DOM Inspector on the left, the CSS editor on the right will update to show all the CSS rules applied to that element. This is really useful, especially as any invalid properties appear with a line through them and a little warning symbol next to them. This will come in handy below!

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

Note: Each property also has a checkbox next to it, which can be checked/unchecked to allow you to enable/disable your CSS property by property. This is also very useful for figuring out what might be causing an error.

Active learning: find the errors!

So, with the tool basics outlined, let's try to find our errors. In each case, you should try clicking on the element where the fault is, to see what the applied CSS looks like.

  1. The <header> and <footer> elements are supposed have a background color, but no color appears.
  2. The <h1> in the header and the <p> in the footer are both too high up on the page — this is especially apparent on the <h1>, which is nearly off the screen! You could try clicking on the <h1> in the developer tools inspector and then unchecking the checkboxes next to the CSS declarations shown in the rules panel to find out which one is causing the problem.
  3. The <img> is supposed to be floated down and to the right so it sits to the right of some of the text, but it isn't — it's directly above all of the text.
  4. The text in the <main> content area is far too small — the paragraphs and list items should have a larger font-size applied to it, but it doesn't seem to have been applied to either. Hint: This one is a bit harder, as it is a problem with the selector rather than a property.  You may have to study the source code to find this — you can find it in the Style Editor in Firefox's developer tools.

If you are stuck, you can look at the fixed source code on Github.

CSS validation

We already looked at the W3C HTML Validator, but they have a CSS Validator available too. This works in the same way, allowing you to validate CSS at a particular URL, by uploading a local file, or by direct CSS input.

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

Active learning: Validating our CSS

Let's try feeding our CSS into the validator to see what it spits out.

  1. Go to the CSS Validation Service Validate by direct input view.
  2. Copy our error-filled CSS into the text area on the validation service.
  3. Press the Check button.

You will now be presented with a list of errors. Only two are returned:

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

These are useful messages, especially as they include line numbers and what selector is in action in each case. Let's see how we can interpret these.

  • Property background-colour doesn't exist : teal — simple; this is telling us that a property doesn't exist, which makes it clear what needs to be done.
  • Value Error : float attempt to find a semi-colon before the property name. add it — this is telling us that a semi-colon is missing. Looking at the line number of where this is occuring makes this easy to find.

You could argue that this is less useful than the browser developer tools — it doesn't allow you to look at the rendered code while referencing what is wrong, and it is no good for finding instances where the selector is incorrect, or the syntax is correct and you've simply chosen an incorrect value for your design. But we would argue that for a large stylesheet, it is worth running it through this service first to get rid of any basic syntax mistakes, before then relying on the browser developer tools to pinpoint other problems.

Note: CSS Lint is a similar tool for validating CSS and uncovering errors, which can also present some useful hints and give interesting warnings.

Summary

Well done for completing the last article of the first CSS module! Now that you've come this far, you can have a go at completing our CSS assessment, and then start exploring some other CSS and HTML modules.

このモジュール

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

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