Revision 1132997 of CSS リファレンス

<p><span class="seoSummary">この <em>CSS リファレンス</em>は、CSS 規則の基本構文を紹介します。すべての標準 <a href="/docs/Web/CSS">CSS</a> プロパティ、<a href="/docs/Web/CSS/Pseudo-classes">擬似クラス</a>、<a href="/docs/Web/CSS/Pseudo-elements">擬似要素</a>、<a href="/docs/Web/CSS/At-rule">@-規則</a>、<a href="/docs/Web/CSS/length">単位</a> および <a href="/docs/Web/Guide/CSS/Getting_Started/Selectors">セレクター</a> のリストです。このリストは、<a href="#Keyword_index">アルファベット順</a> のプロパティのリスト、<a href="#Selectors">種類別のセレクター</a>、その他で構成されているため、各詳細情報のページにすばやくアクセスできるでしょう。この一覧には、CSS 1 および CSS 2.1 のプロパティだけでなく、CSS 3 のリファレンスも含まれており、<a href="/ja/docs/Web/CSS/CSS3">CSS3</a> プロパティや策定中または標準化されたコンセプトのページにリンクされています。また、簡単な <a href="#DOM_CSS">DOM-CSS / CSSOM リファレンス</a> も含まれています。</span></p>

<p>補足: CSS 規則の定義はすべて (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">テキストベース</a> であるのに対して、DOM-CSS / CSSOM と規則管理システムは <a href="https://www.w3.org/TR/cssom/#introduction">オブジェクトベース</a> です。</p>

<p><code>-moz-</code> 接頭辞を持つ Gecko 固有のプロパティは、<a href="/ja/docs/Web/CSS/Reference/Mozilla_Extensions">Mozilla 独自の CSS 拡張</a> をご覧ください。また、WebKit 固有のプロパティは、<a href="/ja/docs/Web/CSS/Reference/Webkit_Extensions">WebKit 独自の CSS 拡張</a> をご覧ください。<a href="https://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> には、Peter Beverloo 氏によるすべての接頭辞の付いたプロパティのリストがあります。</p>

<h2 id="Basic_rule_syntax" name="Basic_rule_syntax">基本的な規則と構文</h2>

<p>規則定義内での構文エラーは、その規則全体を無効にするので十分に注意してください。</p>

<h3 id="Style_rules" name="Style_rules">スタイル規則</h3>

<pre class="syntaxbox">
<strong><var>selectorlist</var> { <var>property</var>: <var>value</var>;</strong> <var>[more property:value; pairs]</var> <strong>}</strong>

...ここで、<var>selectorlist</var> は: <code><var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var></code> です。
</pre>

<p>下記の <a href="#Selectors"><em>セレクター</em></a>、<a href="#pelm"><em>疑似要素</em></a>、<a href="#pcls"><em>疑似クラス</em></a> をご覧ください。</p>

<h4 id="Examples" name="Examples">例</h4>

<pre class="brush: css">
strong { color: red;}
div.menu-bar li:hover &gt; ul { display: block; }
</pre>

<p>その他の例: <a href="/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors">#1</a>, <a href="/docs/Web/Guide/CSS/Getting_started/Selectors#Action_Using_selectors_based_on_relationships_and_pseudo-classes">#2</a></p>

<h3 id="rules" name="rules">@-規則</h3>

<p>これには多くの異なる構造的な書式があるため、その構文は各 <a href="/docs/Web/CSS/At-rule">@-規則</a> のページをご覧ください。</p>

<h2 id="Keyword_index" name="Keyword_index">キーワード索引</h2>

<div>{{CSS_Ref}}</div>

<h2 id="Values" name="Values">値</h2>

<ul style="-moz-column-width:14em; -webkit-columns:14em">
 <li>{{cssxref("&lt;angle&gt;")}}</li>
 <li>{{cssxref("auto")}}</li>
 <li>{{cssxref("&lt;color&gt;")}}</li>
 <li>{{cssxref("counters","&lt;カウンタ&gt;")}}</li>
 <li>{{cssxref("&lt;frequency&gt;")}}</li>
 <li>{{cssxref("inherit")}}</li>
 <li>{{Cssxref("initial")}}</li>
 <li>{{cssxref("&lt;integer&gt;")}}</li>
 <li>{{cssxref("&lt;length&gt;")}}</li>
 <li>{{cssxref("none")}}</li>
 <li>{{cssxref("normal")}}</li>
 <li>{{cssxref("&lt;number&gt;")}}</li>
 <li>{{cssxref("&lt;percentage&gt;")}}</li>
 <li>{{cssxref("&lt;resolution&gt;")}}</li>
 <li>{{cssxref("&lt;shape&gt;")}}</li>
 <li>{{cssxref("&lt;string&gt;")}}</li>
 <li>{{cssxref("&lt;time&gt;")}}</li>
 <li>{{cssxref("&lt;uri&gt;")}}</li>
</ul>

<div class="column-container">
<div class="column-half">
<h2 id="Selectors" name="Selectors">セレクター</h2>

<ul>
 <li><a href="/docs/Web/Guide/CSS/Getting_started/Selectors">基本的なセレクター</a>

  <ul>
   <li><a href="/docs/Web/CSS/Type_selectors">要素型セレクター</a><code> elementname</code></li>
   <li><a href="/docs/Web/CSS/Class_selectors">クラスセレクター</a> <code>.classname</code></li>
   <li><a href="/docs/Web/CSS/ID_selectors">ID セレクター</a> <code>#idname</code></li>
   <li><a href="/docs/Web/CSS/Universal_selectors">全称セレクター</a><code> * ns|* *|*</code></li>
   <li><a href="/docs/Web/CSS/Attribute_selectors">属性セレクター</a><code> [attr=value]</code></li>
  </ul>
 </li>
 <li><a href="/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships">結合子</a>
  <ul>
   <li><a href="/docs/Web/CSS/Adjacent_sibling_selectors">隣接セレクター</a> <code>A + B</code></li>
   <li><a href="/docs/Web/CSS/General_sibling_selectors">一般兄弟セレクター (間接セレクター)</a> <code>A ~ B</code></li>
   <li><a href="/docs/Web/CSS/Child_selectors">子セレクター</a> <code>A &gt; B</code></li>
   <li><a href="/docs/Web/CSS/Descendant_selectors">子孫セレクター</a> <code>A B</code></li>
  </ul>
 </li>
 <li id="pelm"><a href="/docs/Web/CSS/Pseudo-elements">擬似要素</a>
  <ul>
   <li>{{ Cssxref("::after") }}</li>
   <li>{{ Cssxref("::before") }}</li>
   <li>{{ Cssxref("::first-letter") }}</li>
   <li>{{ Cssxref("::first-line") }}</li>
   <li>{{ Cssxref("::selection") }}</li>
   <li>{{ Cssxref("::backdrop") }}</li>
   <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
   <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
   <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
   <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
  </ul>
 </li>
 <li id="pcls"><a href="/docs/Web/CSS/Pseudo-classes">標準の疑似クラス</a>
  <div class="index">
  <ul>
   <li>{{ Cssxref(":active") }}</li>
   <li>{{ cssxref(':any')}}</li>
   <li>{{ Cssxref(":checked") }}</li>
   <li>{{ Cssxref(":default") }}</li>
   <li>{{ Cssxref(":dir", ":dir()")}}</li>
   <li>{{ Cssxref(":disabled") }}</li>
   <li>{{ Cssxref(":empty") }}</li>
   <li>{{ Cssxref(":enabled") }}</li>
   <li>{{ Cssxref(":first") }}</li>
   <li>{{ Cssxref(":first-child") }}</li>
   <li>{{ Cssxref(":first-of-type") }}</li>
   <li>{{ Cssxref(":fullscreen") }}</li>
   <li>{{ Cssxref(":focus") }}</li>
   <li>{{ Cssxref(":hover") }}</li>
   <li>{{ Cssxref(":indeterminate") }}</li>
   <li>{{ Cssxref(":in-range") }}</li>
   <li>{{ Cssxref(":invalid") }}</li>
   <li>{{ Cssxref(":lang", ":lang()") }}</li>
   <li>{{ Cssxref(":last-child") }}</li>
   <li>{{ Cssxref(":last-of-type") }}</li>
   <li>{{ Cssxref(":left") }}</li>
   <li>{{ Cssxref(":link") }}</li>
   <li>{{ Cssxref(":not", ":not()") }}</li>
   <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
   <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
   <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
   <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
   <li>{{ Cssxref(":only-child") }}</li>
   <li>{{ Cssxref(":only-of-type") }}</li>
   <li>{{ Cssxref(":optional") }}</li>
   <li>{{ Cssxref(":out-of-range") }}</li>
   <li>{{ Cssxref(":read-only") }}</li>
   <li>{{ Cssxref(":read-write") }}</li>
   <li>{{ Cssxref(":required") }}</li>
   <li>{{ Cssxref(":right") }}</li>
   <li>{{ Cssxref(":root") }}</li>
   <li>{{ Cssxref(":scope") }}</li>
   <li>{{ Cssxref(":target") }}</li>
   <li>{{ Cssxref(":valid") }}</li>
   <li>{{ Cssxref(":visited") }}</li>
  </ul>
  </div>
 </li>
</ul>

<p>Selectors Level 3 仕様の完全な <a href="https://www.w3.org/TR/selectors/#selectors">セレクターの一覧</a>。</p>

<h2 id="CSS3_Tutorials" name="CSS3_Tutorials">CSS3 チュートリアル</h2>

<p>以下は、CSS3 で登場したか CSS2.1 で登場して最近まであまりサポートされていなかった新しい技術の小さな手引書です:</p>

<ul>
 <li><a href="/docs/Web/Guide/CSS/Media_queries">CSS メディアクエリ</a></li>
 <li><a href="/docs/Web/Guide/CSS/Counters">CSS カウンタの利用</a></li>
 <li><a href="/docs/Web/Guide/CSS/Using_CSS_gradients">CSS グラデーション (gradients) の利用</a></li>
 <li><a href="/docs/Web/Guide/CSS/Using_CSS_transforms">CSS 変形 (transforms) の利用</a></li>
 <li><a href="/docs/Web/Guide/CSS/Using_CSS_animations">CSS アニメーション</a></li>
 <li><a href="/docs/Web/Guide/CSS/Using_CSS_transitions">CSS 遷移 (transitions)</a></li>
 <li><a href="/docs/Web/Guide/CSS/Using_multiple_backgrounds">CSS で複数の背景の利用方法</a></li>
 <li><a href="/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の利用</a></li>
 <li><a href="/docs/Web/Guide/CSS/Using_multi-column_layouts">CSS 段組みレイアウトの利用</a></li>
</ul>

<h2 id="Concepts" name="Concepts">概念</h2>

<ul>
 <li><a href="/docs/Web/CSS/Syntax">CSS 構文</a></li>
 <li><a href="/docs/Web/CSS/At-rule">@-規則</a></li>
 <li><a href="/docs/Web/CSS/Comments">コメント</a></li>
 <li><a href="/docs/Web/CSS/Specificity">優先度</a></li>
 <li><a href="/docs/Web/CSS/initial_value">初期値</a></li>
 <li><a href="/docs/Web/CSS/inheritance">継承</a></li>
 <li><a href="/docs/Web/CSS/specified_value">指定値</a></li>
 <li><a href="/docs/Web/CSS/computed_value">算出値</a></li>
 <li><a href="/docs/Web/CSS/used_value">使用値</a></li>
 <li><a href="/docs/Web/CSS/actual_value">実効値</a></li>
 <li><a href="/docs/Web/CSS/resolved_value">解決値</a></li>
 <li><a href="/docs/Web/CSS/Box_model">ボックスモデル</a></li>
 <li><a href="/docs/Web/CSS/Replaced_element">置換要素</a></li>
 <li><a href="/docs/Web/CSS/Value_definition_syntax">値定義構文</a></li>
 <li><a href="/docs/Web/CSS/Shorthand_properties">短縮プロパティ</a></li>
 <li><a href="/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></li>
 <li><a href="/docs/Web/Guide/CSS/Visual_formatting_model">視覚書式設定モデル</a></li>
 <li><a href="/docs/Web/CSS/Layout_mode">レイアウトモード</a></li>
</ul>

<h2 id="DOM-CSS_CSSOM" name="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>

<p>主なオブジェクトの種類:</p>

<ul>
 <li>document . <a href="/docs/Web/API/Document/styleSheets">styleSheets</a></li>
 <li>styleSheets[x] . <a href="/docs/Web/API/CSSRuleList">cssRules</a></li>
 <li>cssRules[x] . <a href="/docs/Web/API/CSSRule/cssText">cssText</a> (セレクターとスタイル)</li>
 <li>cssRules[x] . <a href="/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
 <li>elem . <a href="/docs/Web/API/HTMLElement/style">style</a></li>
 <li>elem . style . <a href="/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (スタイルのみ)</li>
 <li>elem . <a href="/docs/Web/API/Element/className">className</a></li>
 <li>elem . <a href="/docs/Web/API/Element/classList">classList</a></li>
</ul>

<p>重要なメソッド:</p>

<ul>
 <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
 <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
</ul>
</div>
</div>