initial commit

2 files changed, 200 insertions, 0 deletions

diff --git a/files/ja/web/css/css_selectors/index.html b/files/ja/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..f1b00fa844
--- /dev/null
+++ b/files/ja/web/css/css_selectors/index.html
@@ -0,0 +1,132 @@
+---
+title: CSS セレクター
+slug: Web/CSS/CSS_Selectors
+tags:
+  - CSS
+  - Guide
+  - Overview
+  - Reference
+  - Selectors
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>CSS セレクター</strong>は、一連の CSS の規則が適用される要素を定義します。</span></p>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: 親のアイテム、親の兄弟、親の兄弟の子を選択するセレクターや結合子はありません。</p>
+</div>
+
+<h2 id="Basic_selectors" name="Basic_selectors">基本セレクター</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Universal_selectors">全称セレクター</a></dt>
+ <dd>すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。<br>
+ <strong>構文:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
+ <strong>例:</strong> <code>*</code> は文書のすべての要素を選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Type_selectors">要素型セレクター</a></dt>
+ <dd>指定されたノード名を持つすべての要素を選択します。<br>
+ <strong>構文:</strong> <code><var>elementname</var></code><br>
+ <strong>例:</strong> <code>input</code> はあらゆる {{HTMLElement("input")}} 要素を選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a></dt>
+ <dd>指定された <code>class</code> 属性を持つすべての要素を選択します。<br>
+ <strong>構文:</strong> <code>.<var>classname</var></code><br>
+ <strong>例:</strong> <code>.index</code> は "index" クラスを持つあらゆる要素を選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a></dt>
+ <dd><code>id</code> 属性の値に基づいて要素を選択します。文書中に指定された ID を持つ要素は1つしかないはずです。<br>
+ <strong>構文:</strong> <code>#<var>idname</var></code><br>
+ <strong>例:</strong> <code>#toc</code> は "toc" という ID を持つ要素を選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></dt>
+ <dd>指定された属性を持つ要素をすべて選択します。<br>
+ <strong>構文:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br>
+ <strong>例:</strong> <code>[autoplay]</code> は <code>autoplay</code> 属性が（どんな値でも）設定されているすべての要素を選択します。</dd>
+</dl>
+
+<h2 id="グループ化セレクター">グループ化セレクター</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Selector_list">セレクターリスト</a></dt>
+ <dd><code>,</code> はグループ化の手段であり、一致するすべてのノードを選択します。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br>
+ <strong>例:</strong> <code>div, span</code> は {{HTMLElement("span")}} と {{HTMLElement("div")}} の両要素に一致します。</dd>
+</dl>
+
+<h2 id="Combinators" name="Combinators">結合子</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a></dt>
+ <dd><code> </code> (空白) 結合子は、第1の要素の子孫にあたるノードを選択します。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br>
+ <strong>例:</strong> <code>div span</code> は {{HTMLElement("div")}} 要素の中にある {{HTMLElement("span")}} 要素をすべて選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a></dt>
+ <dd><code>&gt;</code> 結合子は、第1の要素の直接の子に当たるノードを選択します。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> &gt; <var>B</var></code><br>
+ <strong>例:</strong> <code>ul &gt; li</code> は {{HTMLElement("ul")}} 要素の内側に直接ネストされた {{HTMLElement("li")}} 要素をすべて選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></dt>
+ <dd><code>~</code> 結合子は兄弟を選択します。つまり、第2の要素が第1の要素の後にあり（ただし直後でなくても構わない）、両者が同じ親を持つ場合です。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br>
+ <strong>例:</strong> <code>p ~ span</code> は {{HTMLElement("p")}} 要素の後にある {{HTMLElement("span")}} 要素をすべて選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Adjacent_sibling_combinator">隣接兄弟結合子</a></dt>
+ <dd><code>+</code> 結合子は隣接する兄弟を選択します。つまり、第2の要素が第1の要素の直後にあり、両者が同じ親を持つ場合です。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br>
+ <strong>例:</strong> <code>h2 + p</code> は {{HTMLElement("h2")}} 要素の後にすぐに続く {{HTMLElement("p")}} 要素をすべて選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Column_combinator">列結合子</a> {{Experimental_Inline}}</dt>
+ <dd><code>||</code> 結合子は列に所属するノードを選択します。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br>
+ <strong>例:</strong> <code>col || td</code> は {{HTMLElement("col")}} 要素のスコープに所属するすべての {{HTMLElement("td")}} 要素を選択します。</dd>
+</dl>
+
+<h2 id="Pseudo" name="Pseudo">擬似表記</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a></dt>
+ <dd><code>:</code> 表記により、文書ツリーの中に含まれない状態情報によって要素を選択することができます。<br>
+ <strong>例:</strong> <code>a:visited</code> はユーザーが訪問済みの {{HTMLElement("a")}} 要素をすべて選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a></dt>
+ <dt><code>::</code> 表記は、 HTML に含まれていないエンティティを表現します。</dt>
+ <dd><strong>例:</strong> <code>p::first-line</code> はすべての {{HTMLElement("p")}} 要素の先頭行を選択します。</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td><code>||</code> 列結合子、グリッド構造セレクター、論理結合子、位置、時系列、リソース状態、言語、 UI の疑似クラス、属性値の選択における ASCII 文字の大文字小文字の区別の有無を示す修飾子を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td><code>~</code> 一般兄弟結合子、およびツリー構造の疑似クラスを追加。<br>
+    疑似要素に二重コロン <code>::</code> の接頭辞を用いるようにした。追加の属性セレクター。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>子結合子 <code>&gt;</code> および隣接兄弟結合子 <code>+</code> を追加。<br>
+    <strong>全称セレクター</strong>と<strong>属性セレクター</strong>を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/ja/docs/Web/CSS/Pseudo-classes#Specifications">疑似クラス</a>および<a href="/ja/docs/Web/CSS/Pseudo-elements#Specifications">疑似要素</a>の詳細は、それぞれの仕様書一覧表をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Specificity">CSS 詳細度</a></li>
+</ul>
diff --git a/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
new file mode 100644
index 0000000000..bec8180372
--- /dev/null
+++ b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -0,0 +1,68 @@
+---
+title: 'セレクターでの :target 疑似クラスの利用'
+slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+tags:
+  - ':target'
+  - CSS
+  - ガイド
+  - セレクター
+  - リファレンス
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<div>{{CSSRef}}</div>
+
+<p>URL が文書の特定の部分を指している場合、ユーザーが気づきにくい場合があります。いくつかのシンプルな CSS を使用して URL の対象に注目させ、ユーザーの利便性を向上させる方法を確認しましょう。</p>
+
+<h2 id="Picking_a_Target" name="Picking_a_Target">ターゲットの選択</h2>
+
+<p>{{cssxref(":target")}} <a href="/ja/CSS/Pseudo-classes">疑似クラス</a>は、フラグメント識別子を含む URL のターゲット要素にスタイルを適用するために使用されます。例えば、 <code><span class="nowiki">http://developer.mozilla.org/ja/docs/Using_the_:target_selector#example</span></code> という URL はフラグメント識別子 <code>#example</code> を含んでいます。 HTML では、 <code>id</code> 及び <code>name</code> 属性が名前空間を共用しているので、識別子はどちらかの値として見つかります。従って、例の URL はこの文書の「例」の見出しを指すことになります。</p>
+
+<p>おそらく URL のターゲットになる <code>h2</code> 要素をすべてスタイル付けしたいでしょうが、他の種類の要素がターゲットのスタイルになることは望まないでしょう。単純にこうするだけです。</p>
+
+<pre class="brush: css">h2:target { font-weight: bold; }</pre>
+
+<p>文書の特定のフラグメントに特化してスタイルを作成することもできます。これは URI に見られる値と同じ識別子を使用することで実現できます。つまり、 <code>#example</code> フラグメントに枠を追加するには、以下の書きます。</p>
+
+<pre class="brush: css">#example:target { border: 1px solid black; }</pre>
+
+<h2 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">すべての要素を対象にする</h2>
+
+<p>インテントが「ブランケット」スタイルで作成されれば、すべての対象となる要素に適用されますので、ユニバーサルセレクターの代わりになります。</p>
+
+<pre class="brush: css">:target { color: red; }
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>以下の例には、同じ文書内で要素を指す五つのリンクがあります。例えば「First」のリンクを選択すると、 <code>&lt;h1 id="one"&gt;</code> がターゲットの要素になります。なお、ターゲット要素は可能であればブラウザーウィンドウの先頭に配置されるため、文書は新しいスクロール位置へ移動する可能性があります。</p>
+
+<div id="example">
+<pre class="brush: html">&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>フラグメント識別子が文書の一部を指している場合、文書のどの部分を読むことを想定しているのか、読み手が分からなくなることがあります。 URI の対象をスタイル付けすることで、読み手の混乱を縮小したり除いたりすることができます。</p>
+
+<h2 id="Related_Links" name="Related_Links">関連項目</h2>
+
+<ul>
+ <li>{{cssxref(":target")}}</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">原典情報</h3>
+
+<ul>
+ <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>メモ: この記事はもともと DevEdge サイトの一部だったものを再構成したものです。</li>
+</ul>
+</div>