From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/glossary/css_selector/index.html | 96 +++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 files/ja/glossary/css_selector/index.html (limited to 'files/ja/glossary/css_selector') diff --git a/files/ja/glossary/css_selector/index.html b/files/ja/glossary/css_selector/index.html new file mode 100644 index 0000000000..3f492fd842 --- /dev/null +++ b/files/ja/glossary/css_selector/index.html @@ -0,0 +1,96 @@ +--- +title: Selector (セレクター (CSS) ) +slug: Glossary/CSS_Selector +tags: + - CSS + - CSS Selector + - CodingScripting + - Glossary + - HTML + - Selector +translation_of: Glossary/CSS_Selector +--- +

CSS セレクターは CSS の規則の一部で、文書中のどの要素がルールと一致するかを記述します。一致した要素には規則で指定されたスタイルが適用されます。

+ +
+

この CSS を見てください。

+ +
p {
+  color: green;
+}
+
+div.warning {
+  width: 100%;
+  border: 2px solid yellow;
+  color: white;
+  background-color: darkred;
+  padding: 0.8em 0.8em 0.6em;
+}
+
+#customized {
+  font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
+}
+
+ +

ここでのセレクターは "p" （すべての {{HTMLElement("p")}} 要素内の文字列に緑色を適用）、 "div.warning" （{{Glossary("CSS class", "class")}} が "warning" であるすべての {{HTMLElement("div")}} 要素が警告ボックスのように見えるようにする）、 "#customized" （"customized" の ID を持つ要素の基本フォントを16ピクセルの高さの Lucida Grande またはいくつかのフォールバックフォントに設定）です。

+ +

この CSS を次のような HTML に適用します。

+ +
<p>This is happy text.</p>
+
+<div class="warning">
+  Be careful! There are wizards present, and they are quick to anger!
+</div>
+
+<div id="customized">
+  <p>This is happy text.</p>
+
+  <div class="warning">
+    Be careful! There are wizards present, and they are quick to anger!
+  </div>
+</div>
+
+ +

結果的に、ページの内容は次のように整形されます。

+ +

{{EmbedLiveSample("glossary-selector-details", 640, 210)}}

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