We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

この記事には、 CSS に関するいくつかのよくある質問(FAQ)とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。

なぜ CSS が妥当なのに正しくレンダリングされないのか?

ブラウザーは DOCTYPE 宣言を使用して、文書の表示ににウェブ標準とより互換性があるモードを使用するか、あるいは古いブラウザーのバグに互換性があるモードを使用するかを選択します。正しく新しい DOCTYPE 宣言を HTML の先頭で使用すると、ブラウザーの標準への準拠度が向上します。

現代のブラウザーは、2つの主要なレンダリングモードを備えています。

  • Quirks Mode: 後方互換モードとも呼ばれます。古いウェブページが制作者の意図したとおりにレンダリングされるようにして、古いブラウザーが用いていた非標準のレンダリング規則に従います。 DOCTYPE 宣言が不完全、不正確、あるいは存在しない、または 2001 年より前に一般的であった既知の DOCTYPE 宣言であるドキュメントは、 Quirks Mode でレンダリングされます。
  • Standards Mode: ブラウザーは W3C 標準へ厳密に従おうとします。新しい HTML ページは標準に準拠したブラウザー向けに設計されていると考えられるため、新しい DOCTYPE 宣言を持つページは Standards Mode でレンダリングされます。

Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第3のモードでありますAlmost Standards Mode があります。

以下は Standards Mode または Almost Standards Mode になる DOCTYPE 宣言で、もっとも一般的に使用されるものの一覧です:

<!DOCTYPE html> /* これは HTML5 の doctype です。HTML5 パーサーを使用する新しいブラウザーでは、 
                   この doctype が推奨されます */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

可能な限り、 HTML5 の doctype を使用するべきです。

なぜ CSS が妥当なのにまったくレンダリングされないのか?

以下のような可能性があります。

  • CSS ファイルへのパスが間違っている。
  • 適用されるためには、 CSS スタイルシートを MIME タイプ text/css で提供しなければなりません。ウェブサーバがこのタイプで提供していない場合、スタイルシートは適用されません。

idclass の違いは何か?

HTML の要素は、 id 属性と class 属性の片方または両方を持つことができます。 id 属性は要素に適用する名前を割り当てます。妥当なマークアップでは、ある名前を持つ要素はひとつだけです。 class 属性は要素にクラス名を割り当てます。一つのクラス名を、ページ内の多数の要素で使用できます。 CSS は特定の id または class 名に対してスタイルを設定できます。

  • ページ内のたくさんのブロックや要素にスタイルのルールを適用したい場合や、スタイルを適用したい要素が1つしかないものの、後で追加したい場合は、 class 指定によるスタイルを使用してください。
  • 適用されるスタイルのルールを1つの特定のブロックや要素に限定する必要がある場合は、 id 指定によるスタイルを使用してください。このスタイルは特定の id を持った特定の要素にのみ使用されます。

一般的にはできるだけ class を使用し、 id は特定の用途で絶対的に必要な場合(ラベルとフォーム要素を接続したり、スタイルをつける要素が意味的に独自の場合など)に限り使用することが推奨されます。

  • class を使用するとスタイルの用途が広げられるようになり、現在は特定のルールセットのスタイルを1つの要素にしか適用しなくても、後から追加したくなる可能性があります。
  • Classes allow you to style multiple elements, therefore they can lead to shorter stylesheets, rather than having to write out the same styling information in multiple rules that use id selectors. Shorter stylesheets are more performant.
  • Class selectors have lower specificity than id selectors, so are easier to override if needed.

: 詳しくは Selectors もご覧ください。

プロパティの既定値に戻すにはどうすればよいのか?

当初 CSS には "default" キーワードがなく、プロパティの既定値を戻す唯一の方法は、そのプロパティを明示的に宣言し直すことでした。

/* 見出しの既定の色は黒 */
h1 { color: red; }
h1 { color: black; }

これは CSS 2 で変わり、initial キーワードが CSS プロパティの正当な値になりました。これはプロパティを既定値にリセットします。この既定値は、当該プロパティの CSS 仕様で定義されています。

/* 見出しの既定の色は黒 */
h1 { color: red; }
h1 { color: initial; }

スタイルを他のスタイルから派生させるにはどうすればよいか?

CSS では、あるスタイルが他の表現で定義されることを許可していません (Working Group のスタンスに関する、Eric Meyer 氏のコメントをご覧ください)。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を1ヶ所で定義する方法として、 CSS 変数 が導入されました。

ひとつの要素に複数のクラスを割り当てる方法は?

HTML の要素は class 属性に空白区切りでクラスを並べることで、複数のクラスを割り当てることができます。

<style type="text/css">
.news { background: black; color: white; }
.today { font-weight: bold; }
</style>

<div class="news today">
... content of today's news ...
</div>

同じプロパティが双方の規則内で宣言されている場合は、その競合がまずは詳細度によって、そして CSS 宣言の順序に従って解決されます。class 属性内のクラスの順序は関係がありません。

なぜ私のスタイル規則は正しく動作しないのか?

構文が正しいスタイル規則が、ある状況下で適用されないことがあります。この種類の問題をデバッグするために DOM InspectorCSS Style Rules ビューを活用できますが、スタイルが無視される事例でもっとも頻発するものは以下のとおりです。

HTML 要素の階層

CSS スタイルを HTML 要素に適用する方法は、要素の階層にも依存します。CSS 規則の詳細度や優先度にかかわらず、子孫に適用された規則は親のスタイルをオーバーライドすることを覚えておくことが重要です。

.news { color: black; }
.corpName { font-weight: bold; color: red; }

<!-- ニュース項目は黒色ですが、社名は赤色かつ太字です -->
<div class="news">
   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
</div>

複雑な HTML 階層で規則が無視されているように見える場合は、異なるスタイルが設定された別の要素の内部にその要素がないかを確認してください。

明示的に再定義されたスタイル規則

CSS スタイルシートでは、順序こそが重要です。ある規則を定義した後に同じ規則を再定義した場合は、最後の定義が使用されます。

#stockTicker { font-weight: bold; }
.stockSymbol { color: red; }
/*  他の規則             */
/*  他の規則             */
/*  他の規則             */
.stockSymbol { font-weight: normal; }

<!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません -->
<div id="stockTicker">
   NYS: <span class="stockSymbol">GE</span> +1.0 ...
</div>

このような誤りを避けるには、あるセレクターに対する規則は 1 回だけ定義するようにして、セレクターに所属するすべての規則をグループ化してください。

ショートハンドプロパティの使用

ショートハンドプロパティを使用したスタイル規則の定義は、構文がとてもコンパクトになることからよいことです。一部の属性だけを持つショートハンドプロパティの使用は可能かつ正当ですが、宣言していない属性は自動的に既定値へリセットされることを覚えておくべきです。すなわち、単独の属性に対する以前の規則は暗黙的にオーバーライドされます。

#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
.stockSymbol { font: 14px Arial; color: red; }

<div id="stockTicker">
   NYS: <span class="stockSymbol">GE</span> +1.0 ...
</div>

前の例では別の要素に属する規則で問題が発生していますが、同一の要素でも問題が起こりえます。これは、規則の順序こそが重要であるためです。

#stockTicker {
   font-weight: bold;
   font: 12px Verdana;  /* font-weight is now set to normal */
}

* セレクターの使用

ワイルドカードセレクター * はすべての要素を参照するものであり、特に注意して使用しなければなりません。

body * { font-weight: normal; }
#stockTicker { font: 12px Verdana; }
.corpName { font-weight: bold; }
.stockUp { color: red; }

<div id="section">
   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
</div>

この例では、body * セレクターで body 要素内の全要素に対して規則を適用しており、それは .stockUp クラスも含むすべての階層レベルです。よって .corpName クラスに適用した font-weight: bold; は、body 内の全要素に適用した font-weight: normal; にオーバーライドされます。

特にセレクターの最初の要素として使用しない場合に、* セレクターは遅いセレクターであるため使用は最小限にするべきです。このような使い方はできるだけ避けるべきです。

CSS の詳細度

ある要素に複数の規則を適用すると、スタイルの詳細さに従って規則が選ばれます。インラインスタイル(HTML の style 属性)が最上位の詳細さで他のあらゆるセレクターを上書きし、次に ID セレクター、それからクラスセレクター、要素名セレクターの順となります。よって、以下の <div> の文字色は赤になります。

div { color: black; }
#orange { color: orange; }
.green { color: green; }

<div id="orange" class="green" style="color: red;">This is red</div>

セレクターが複数の範囲を持つ場合、規則はより複雑になります。セレクターの詳細度がどのように算出されるかについて、詳しくは CSS 2.1 Specification chapter 6.4.3 でご覧いただけます。

-moz-*、-ms-*、-webkit-*、-o-*、-khtml-* プロパティは何をするものか?

これらのプロパティは接頭辞付きプロパティと呼ばれ、CSS 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。

The use of such properties on production websites is not recommended — they have already created a huge web compatibility mess. For example, many developers only using the -webkit- prefixed version of a property when the non-prefixed version is supported across all browsers meant that a feature relying on that property would break in non-webkit-based browsers, completely needlessly. This problem got so bad that other browsers started to implement -webkit- prefixed aliases to improve web compatibility, as specified in the Compatibility Living Standard.

In fact most browsers now do not use CSS prefixes when implementing experimental features, insteading implementing those features only on Nightly browser versions or similar.

If you need to use prefixes in your work, you are advised to write your code in a way that uses the prefixed versions first, but then includes a non-prefixed standard version afterwards so it can automatically override the prefixed versions where supported. For example:

-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);

Note: For more information on dealing with prefixed properties, see Handling common HTML and CSS problems — Handling CSS prefixes from our Cross-browser testing module.

Note: See the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

z-index は位置指定へどのように関係するのか?

z-index プロパティは、要素を積み重ねる順序を指定します。

An element with a higher z-index/stack order is always rendered in front of an element with a lower z-index/stack order on the screen. Z-index will only work on elements that have a specified position (position:absolute, position:relative, or position:fixed).

Note: For more information, see our Positioning learning article, and in particular the Introducing z-index section.

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

このページの貢献者: mfuji09, yyss
最終更新者: mfuji09,