CSS の一般的な質問

なぜ私の CSS は妥当であるのに正しくレンダリングされないのか?

ドキュメントの表示に Web 標準に対してより互換性があるモードを使用するか、あるいは古いブラウザのバグに互換性があるモードを使用するかを選択するために、ブラウザは DOCTYPE 宣言を利用します。あなたの HTML で始めに正しい、かつ新しい DOCTYPE 宣言を使用すると、ブラウザ標準への準拠度が向上します。

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

Quirks Mode: 後方互換モードとも呼ばれます。古い Web ページが制作者の意図したとおりにレンダリングされるようにして、古いブラウザが用いていた非標準のレンダリング規則に従います。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"
"https://www.w3.org/TR/html4/loose.dtd">

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

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

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

なぜ私の CSS は妥当であるのにまったくレンダリングされないのか?

CSS が適用されるためには、スタイルシートを MIME タイプ text/css で提供しなければなりません。Web サーバがこのタイプで提供していない場合、スタイルシートは適用されません。

`id` と `class` の違いは何か?

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

適用されるスタイルを特定のブロックや要素に限定したい場合は、id 固有のスタイルを使用します。このスタイルは、その id を持つ要素でのみ使用されるでしょう。

スタイル規則をページ内の多くのブロックや要素に適用したい場合は、クラス固有のスタイルを使用します。

規則が少ないスタイルシートは、たいていパフォーマンスが優れています。従って可能な限り多くのクラスを使用して、id の使用は特定の用途 (ラベルとフォーム要素を結びつけたり、意味的にユニークでなければならない要素のスタイル設定など) のために残しておくことを推奨します。

CSS selectors もご覧ください。

プロパティのデフォルト値に戻すにはどうすればよいのか?

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

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

あるスタイルを他から引き出すにはどうすればよいか?

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

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

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 Inspector の CSS 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 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 { 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 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。

このようなプロパティを本番の Web サイトで使用することは推奨しません。それでも必要である場合は、Web サイトの進展プランを作ることが暗示されます: これらの接頭辞付きプロパティは、標準仕様が進展したときに変更されたり抑制されたりするかもしれません。

Mozilla の接頭辞付き CSS プロパティについて、詳しくは Mozilla CSS 拡張仕様のページをご覧ください。

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

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

より大きい z-index/スタック順を持つ要素が常に、小さい z-index/スタック順を持つ要素より前に来ます。

z-index は、明示的に位置指定 (position:absolute、position:relative、または position:fixed) された要素でのみ機能します。