path: root/files/ja/web/css/syntax/index.html

---
title: 構文
slug: Web/CSS/Syntax
tags:
  - CSS
  - Guide
  - Reference
  - Web
translation_of: Web/CSS/Syntax
---
<div>{{cssref}}</div>

<p>カスケーディングスタイルシート (<a href="/ja/docs/Web/CSS">CSS</a>) 言語の基本的な狙いは、ブラウザーのエンジンがページの要素を、色、位置、装飾などの特定の特性をもって描けるようにすることです。 <em>CSS の構文</em>はこの狙いを反映し、以下のような基本的な構成要素があります。</p>

<ul>
 <li>識別子である<strong>プロパティ</strong>。人間が読むことができ、どのような特性か考えることのできる<em>名前</em>を定義します。</li>
 <li>特性がどのようにエンジンに操作されなければならないか表す<strong>値</strong>。どのプロパティも、形式文法及び意味論的な意味で定義され、ブラウザーに実装された、妥当な値を対として持ちます。</li>
</ul>

<h2 id="CSS_declarations" name="CSS_declarations">CSS の宣言</h2>

<p>CSS のプロパティを特定の値に設定することは、 CSS 言語の核となる仕組みです。プロパティと値の組は<strong>宣言</strong>と呼ばれ、どの CSS エンジンも、1つ1つのページの要素を適切に配置し、形作るために、どの宣言を要素に適用するかを計算します。</p>

<p>CSS では、プロパティと値の両方とも、既定で大文字と小文字を区別しません。組はコロン '<code>:</code>' (<code>U+003A COLON</code>) で分割され、プロパティと値の前、間、後のホワイトスペースは (内部のものを除き) 無視されます。</p>

<p><img alt="css syntax - declaration.png" class="default internal" src="/@api/deki/files/6164/=css_syntax_-_declaration.png" style="border: 1px solid black; padding: 1em;"></p>

<p>CSS には<a href="/ja/docs/Web/CSS/Reference">100を超える種類のプロパティ</a>と、無限に近い種類の値があります。すべてのプロパティと値の組み合わせが許されるわけではなく、どのプロパティも、何が妥当な値であるか定義されています。与えられたプロパティの値が妥当ではなかったとき、その宣言は<em>妥当ではない</em>と見なされ、 CSS エンジンから完全に無視されます。</p>

<h2 id="CSS_declaration_blocks" name="CSS_declaration_blocks">CSS の宣言ブロック</h2>

<p>宣言は、左中括弧 '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>) と右中括弧 '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>) で区切られた構造の中で、<strong>ブロック</strong>にグループ化されます。ブロックは入れ子になることがあるため、左中括弧と右中括弧が対応していなければなりません。</p>

<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></p>

<p>このようなブロックは必然的に<strong>宣言ブロック</strong>と呼ばれ、その中の宣言はセミコロン '<code>;</code>' (<code>U+003B SEMICOLON</code>) で区切ります。宣言ブロックは宣言を持たず、空になることもあります。宣言の周囲のホワイトスペースは無視されます。ブロックの最後の宣言は、セミコロンで終わらせる必要はありませんが、セミコロンで終わらせればブロックを他の宣言で拡張するときにセミコロンを付け忘れることを防げるため、<em>良い書き方</em>とみなされます。</p>

<p>CSS 宣言ブロックは以下の図のように表すことができます。</p>

<p><img alt="css syntax - declarations block.png" class="default internal" src="https://mdn.mozillademos.org/files/17009/declaration-block.png" style="border: 1px solid black; height: 467px; padding: 1em; width: 1160px;"></p>

<div class="note"><strong>注</strong>: 左中括弧と右中括弧を除いた、セミコロンで分割された宣言のリストである CSS 宣言ブロックの内容は、 HTML の {{htmlattrxref("style")}} 属性の中に置くことができます。</div>

<h2 id="CSS_rulesets" name="CSS_rulesets">CSS の規則セット</h2>

<p>もしスタイルシートが、1つの宣言をウェブページのどの要素にも適用するとしたら、それはひどく使えないものになるでしょう。本当の目的は、それぞれの宣言を文書のそれぞれの部品に適用することです。</p>

<p>CSS ではこれを、宣言ブロックと条件を関連付けることで実現します。それぞれの (妥当な) 宣言ブロックの前に、ページの要素を選択する条件である<a href="/ja/docs/Web/CSS/CSS_Selectors"><strong>セレクター</strong></a>を置きます。<a href="/ja/docs/Web/CSS/Selector_list">セレクターのグループ</a>と宣言ブロックの組を<strong>規則セット</strong>、またはしばしば単に<strong>規則</strong>と呼びます。</p>

<p>CSS の規則セット (または規則) は下記の図のように表現することができます。</p>

<p><img alt="css syntax - ruleset.png" class="default internal" src="https://mdn.mozillademos.org/files/17010/ruleset.png" style="border: 1px solid black; height: 334px; padding: 1em; width: 861px;"></p>

<p>ページの要素は複数のセレクターに一致する可能性があるため、複数の規則によってあるプロパティが異なる値で複数回現れる可能性があるため、 CSS 標準ではあるプロパティが他のプロパティより優先され、適用されなければならないことを定義しています。これを<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">カスケード</a>アルゴリズムと呼びます。</p>

<div class="note">単一のセレクターで構成される規則セットを複数まとめて表記する方法の一つとして、規則セットをセレクターの集合で記述することが挙げられますが、各規則セットの妥当性を上手くまとめるものではない点に注意しましょう。<br>
<br>
基本セレクターのうちの一つが妥当ではなかった場合 (架空の要素や架空のセレクターを使った際など)、<em>セレクター</em>全体が妥当ではないこととなり、規則全体も (妥当ではないものとして) 無視されます。</div>

<h2 id="CSS_statements" name="CSS_statements">CSS の文</h2>

<p>規則セットはスタイルシートの主な構成要素であり、よく大きな一連の規則セットのみから成ります。しかし、ウェブ制作者がスタイルシートで伝えたい情報としては、他にも文字セット、インポートする他の外部スタイルシート、フォントフェイス、リストカウンターの記述などがあります。このためには別の、特定の種類の文を使用します。</p>

<p><strong>文</strong>は、空白ではないすべての文字で始まり、 (文字列の外にあり、エスケープされておらず、別の {} または () または [] の対の中に含まれていない) 最初の右中括弧またはセミコロンで終わる構成要素です。</p>

<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>

<p>文には二種類があります。</p>

<ul>
 <li><strong>規則セット</strong> (または<em>規則</em>)。ここまで見てきたように、 CSS の宣言の集合を、<a href="/en-US/docs/Web/CSS/CSS_Selectors">セレクター</a>によって表現された状態に関連付けています。</li>
 <li><strong>アット規則</strong>。アットマーク '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>) で始まり、識別子が後続し、ブロックの外のセミコロンまたは次のブロックの終わりに至るまで続きます。それぞれの種類の <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>は、識別子によって定義され、当然ながら独自の内部構文や意味を持つことがあります。アット規則はメタデータ情報 ({{ cssxref("@charset") }} や {{ cssxref("@import") }} など) を伝えたり、条件情報 ({{ cssxref("@media") }} や {{ cssxref("@document") }}) など) を伝えたり、記述的情報 ({{ cssxref("@font-face") }} など) を伝えたりするために使用します。</li>
</ul>

<p>規則またはアット規則ではない文は、すべて妥当ではなく、無視されます。</p>

<p id="nested_statements">他にも文のグループとして、<strong>入れ子文</strong>があります。これらはアット規則特有のサブセットである<em>条件付きグループ規則</em>の中で使用することができます。これらの文は、特定の条件が一致した場合にのみ適用されます。例えば、 <code>@media</code>アット規則の内容は、示された条件に一致するブラウザーが実行されている端末でのみ適用されるなどです。 CSS1 と CSS2.1 では、条件付きグループ規則内では<em>規則セット</em>のみが利用できました。それではあまりに厳しかったので、 <em><a href="/ja/docs/Web/CSS/CSS3#Conditionals">CSS Conditionals Level 3</a></em> では、この制約は撤廃されました。現在、それは今でも試験的でどのブラウザーでも対応しているわけではないものの、条件付きグループ規則はより広い範囲の内容を持つことができ、規則セットだけではなく、すべてではないものの、一部のアット規則を含むこともできます。</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{ CSS_key_concepts()}}</li>
</ul>