path: root/files/ja/learn/css/howto/css_faq/index.html

---
title: CSS の一般的な質問
slug: Web/CSS/Common_CSS_Questions
tags:
  - CSS
  - FAQ
  - Web
  - questions
  - ガイド
  - 例
translation_of: Learn/CSS/Howto/CSS_FAQ
---
<p><span class="seoSummary">この記事には、 CSS に関するいくつかのよくある質問（FAQ）とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。</span></p>

<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly" name="Why_doesn't_my_CSS_which_is_valid_render_correctly">なぜ CSS が妥当なのに正しくレンダリングされないのか？</h2>

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

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

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

<p>Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第3のモードであります<em><a href="/ja/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko's_&quot;Almost_Standards&quot;_Mode">Almost Standards Mode</a></em> があります。</p>

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

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

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

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

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

<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">なぜ CSS が妥当なのにまったくレンダリングされないのか?</h2>

<p>以下のような可能性があります。</p>

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

<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class"><code>id</code> と <code>class</code> の違いは何か?</h2>

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

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

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

<ul>
 <li>class を使用するとスタイルの用途が広げられるようになり、現在は特定のルールセットのスタイルを1つの要素にしか適用しなくても、後から追加したくなる可能性があります</li>
 <li>class を使用すると、複数の要素のスタイルを設定できるため、id セレクタを使用する複数のルールで同じスタイル設定情報を書き出す必要がなくなり、より短いスタイルシートを作成できます。より短いスタイルシートはより高性能です</li>
 <li>class セレクタは id セレクタよりも特異性が低いため、必要に応じてオーバーライドする方が簡単です</li>
</ul>

<div class="note">
<p><strong>注</strong>: 詳しくは <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> もご覧ください。</p>
</div>

<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">プロパティの既定値に戻すにはどうすればよいのか?</h2>

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

<pre class="brush: css">/* 見出しの既定の色は黒 */
h1 { color: red; }
h1 { color: black; }</pre>

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

<pre class="brush: css">/* 見出しの既定の色は黒 */
h1 { color: red; }
h1 { color: initial; }</pre>

<h2 id="Derived_styles" name="Derived_styles">スタイルを他のスタイルから派生させるにはどうすればよいか?</h2>

<p>CSS では、あるスタイルが他の表現で定義されることを許可していません (<a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Working Group のスタンスに関する、Eric Meyer 氏のコメント</a>をご覧ください)。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を1ヶ所で定義する方法として、 <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数</a> が導入されました。</p>

<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">ひとつの要素に複数のクラスを割り当てる方法は?</h2>

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

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

&lt;div class="news today"&gt;
... content of today's news ...
&lt;/div&gt;
</pre>

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

<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">なぜ私のスタイル規則は正しく動作しないのか?</h2>

<p>構文が正しいスタイル規則が、ある状況下で適用されないことがあります。この種類の問題をデバッグするために <a href="/ja/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> の <em>CSS Style Rules</em> ビューを活用できますが、スタイルが無視される事例でもっとも頻発するものは以下のとおりです。</p>

<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML 要素の階層</h3>

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

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

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

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

<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">明示的に再定義されたスタイル規則</h3>

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

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

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

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

<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">ショートハンドプロパティの使用</h3>

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

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

&lt;div id="stockTicker"&gt;
   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
&lt;/div&gt;
</pre>

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

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

<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector"><code>*</code> セレクタの使用</h3>

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

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

&lt;div id="section"&gt;
   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
&lt;/div&gt;
</pre>

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

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

<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS の詳細度</h3>

<p>ある要素に複数の規則を適用すると、スタイルの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity" title="Specificity">詳細さ</a>に従って規則が選ばれます。インラインスタイル（HTML の <code>style</code> 属性）が最上位の詳細さで他のあらゆるセレクタを上書きし、次に ID セレクタ、それからクラスセレクタ、要素名セレクタの順となります。よって、以下の {{htmlelement("div")}} の文字色は赤になります。</p>

<pre>div { color: black; }
#orange { color: orange; }
.green { color: green; }

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

<p>セレクタが複数の範囲を持つ場合、規則はより複雑になります。セレクタの詳細度がどのように算出されるかについて、詳しくは <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a> でご覧いただけます。</p>

<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">-moz-*、-ms-*、-webkit-*、-o-*、-khtml-* プロパティは何をするものか?</h2>

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

<p>本番 Web サイトでこのようなプロパティを使用することはお勧めできません。これらのプロパティは既に Web との互換性に大きな問題を引き起こしています。たとえば、接頭辞のないバージョンがすべてのブラウザでサポートされている場合に、接頭辞のないバージョンがプロパティの <code>-webkit-</code> 接頭辞バージョンのみを使用するということは、Webkit ベースでないブラウザではそのプロパティに依存する機能が完全に不要になるということです。この問題はひどく悪くなったため、Compatibility Living Standard で指定されているように、Webの互換性を向上させるために他のブラウザが <code>-webkit-</code> プレフィックスエイリアスを実装し始めました。</p>

<p>実際のところ、ほとんどのブラウザは実験的機能を実装するときに CSS プレフィックスを使用せず、代わりに Nightly ブラウザバージョンなどでのみそれらの機能を実装しています。</p>

<p>作業でプレフィックスを使用する必要がある場合は、最初にプレフィックス付きのバージョンを使用するようにコードを書くことをお勧めします。ただし、サポートされている場合はプレフィックス付きのバージョンを自動的に上書きできます。 例えば：</p>

<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="property token">-ms-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="property token">-webkit-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="property token">transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<div class="note">
<p><strong>メモ</strong>: 接頭辞付きプロパティの処理の詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザテスト</a>モジュールの<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">一般的な HTML および CSS の問題の処理 - CSS プレフィックスの処理</a>を参照してください。</p>
</div>

<div class="note">
<p><strong>メモ</strong>: Mozilla をプレフィックスとする CSS プロパティの詳細については、<a href="/ja/docs/Web/CSS/Mozilla_Extensions">CSS の Mozilla 拡張</a>ページを参照してください。</p>
</div>

<h2 id="How_does_z-index_relate_to_positioning.3F" name="How_does_z-index_relate_to_positioning.3F">z-index は位置指定へどのように関係するのか?</h2>

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

<p>z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (<code>position:absolute</code>、<code>position:relative</code>、または  <code>position:fixed</code>) を持つ要素に対してのみ機能します。</p>

<div class="note">
<p><strong>メモ</strong>: 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">ポジショニング</a>学習の記事、特に <a href="/ja/docs/Learn/CSS/CSS_layout/Positioning#Introducing_z-index">z-index の紹介</a>セクションを参照してください。</p>
</div>