From 17cd5fb06a1e70c389225fbecf0a0cf29680855c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 2 Jan 2022 20:00:34 +0900 Subject: CSS の主要概念の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/syntax/index.html | 83 -------------------------------------- files/ja/web/css/syntax/index.md | 83 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 83 deletions(-) delete mode 100644 files/ja/web/css/syntax/index.html create mode 100644 files/ja/web/css/syntax/index.md (limited to 'files/ja/web/css/syntax') diff --git a/files/ja/web/css/syntax/index.html b/files/ja/web/css/syntax/index.html deleted file mode 100644 index 30b41c6dda..0000000000 --- a/files/ja/web/css/syntax/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 構文 -slug: Web/CSS/Syntax -tags: - - CSS - - Guide - - Reference - - Web -translation_of: Web/CSS/Syntax ---- -
{{cssref}}
- -

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

- - - -

CSS の宣言

- -

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

- -

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

- -

css syntax - declaration.png

- -

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

- -

CSS の宣言ブロック

- -

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

- -

css syntax - block.png

- -

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

- -

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

- -

css syntax - declarations block.png

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

CSS の規則セット

- -

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

- -

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

- -

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

- -

css syntax - ruleset.png

- -

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

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

CSS の文

- -

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

- -

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

- -

css syntax - statements Venn diag.png

- -

文には二種類があります。

- - - -

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

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/syntax/index.md b/files/ja/web/css/syntax/index.md new file mode 100644 index 0000000000..30b41c6dda --- /dev/null +++ b/files/ja/web/css/syntax/index.md @@ -0,0 +1,83 @@ +--- +title: 構文 +slug: Web/CSS/Syntax +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

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

+ + + +

CSS の宣言

+ +

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

+ +

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

+ +

css syntax - declaration.png

+ +

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

+ +

CSS の宣言ブロック

+ +

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

+ +

css syntax - block.png

+ +

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

+ +

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

+ +

css syntax - declarations block.png

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

CSS の規則セット

+ +

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

+ +

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

+ +

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

+ +

css syntax - ruleset.png

+ +

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

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

CSS の文

+ +

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

+ +

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

+ +

css syntax - statements Venn diag.png

+ +

文には二種類があります。

+ + + +

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

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf