diff options
| -rw-r--r-- | files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md | 79 |
1 files changed, 36 insertions, 43 deletions
diff --git a/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md index bec8180372..e0dcdad523 100644 --- a/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md +++ b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md @@ -1,68 +1,61 @@ --- -title: 'セレクターでの :target 疑似クラスの利用' -slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +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' + - セレクター +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> +{{CSSRef}} -<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> +URL が文書の特定の部分を指している場合、ユーザーが気づきにくい場合があります。いくつかのシンプルな CSS を使用して URL の対象に注目させ、ユーザーの利便性を向上させる方法を確認しましょう。 -<p>おそらく URL のターゲットになる <code>h2</code> 要素をすべてスタイル付けしたいでしょうが、他の種類の要素がターゲットのスタイルになることは望まないでしょう。単純にこうするだけです。</p> +## ターゲットの選択 -<pre class="brush: css">h2:target { font-weight: bold; }</pre> +{{cssxref(":target")}} [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)は、フラグメント識別子を含む URL のターゲット要素にスタイルを適用するために使用されます。例えば、 `http://developer.mozilla.org/ja/docs/Using_the_:target_selector#example` という URL はフラグメント識別子 `#example` を含んでいます。 HTML では、 `id` および `name` 属性が名前空間を共用しているので、識別子はどちらかの値として見つかります。従って、例の URL はこの文書の「例」の見出しを指すことになります。 -<p>文書の特定のフラグメントに特化してスタイルを作成することもできます。これは URI に見られる値と同じ識別子を使用することで実現できます。つまり、 <code>#example</code> フラグメントに枠を追加するには、以下の書きます。</p> +おそらく URL のターゲットになる `h2` 要素をすべてスタイル付けしたいでしょうが、他の種類の要素がターゲットのスタイルになることは望まないでしょう。単にこれで十分です。 -<pre class="brush: css">#example:target { border: 1px solid black; }</pre> +```css +h2:target { font-weight: bold; } +``` -<h2 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">すべての要素を対象にする</h2> +文書の特定のフラグメントに特化してスタイルを作成することもできます。これは URI に見られる値と同じ識別子を使用することで実現できます。つまり、 `#example` フラグメントに枠を追加するには、以下のように書きます。 -<p>インテントが「ブランケット」スタイルで作成されれば、すべての対象となる要素に適用されますので、ユニバーサルセレクターの代わりになります。</p> +```css +#example:target { border: 1px solid black; } +``` -<pre class="brush: css">:target { color: red; } -</pre> +## すべての要素を対象にする -<h2 id="Example" name="Example">例</h2> +インテントを「ブランケット」スタイルで作成すれば、すべての対象となる要素に適用されますので、ユニバーサルセレクターの代わりになります。 -<p>以下の例には、同じ文書内で要素を指す五つのリンクがあります。例えば「First」のリンクを選択すると、 <code><h1 id="one"></code> がターゲットの要素になります。なお、ターゲット要素は可能であればブラウザーウィンドウの先頭に配置されるため、文書は新しいスクロール位置へ移動する可能性があります。</p> +```css +:target { color: red; } +``` -<div id="example"> -<pre class="brush: html"><h4 id="one">...</h4> <p id="two">...</p> -<div id="three">...</div> <a id="four">...</a> <em id="five">...</em> +## 例 -<a href="#one">First</a> -<a href="#two">Second</a> -<a href="#three">Third</a> -<a href="#four">Fourth</a> -<a href="#five">Fifth</a></pre> -</div> +以下の例には、同じ文書内で要素を指す五つのリンクがあります。例えば "First"のリンクを選択すると、 `<h1 id="one">` がターゲットの要素になります。なお、ターゲット要素は可能であればブラウザーウィンドウの先頭に配置されるため、文書は新しいスクロール位置へ移動する可能性があります。 -<h2 id="Conclusion" name="Conclusion">まとめ</h2> +```html +<h4 id="one">...</h4> <p id="two">...</p> +<div id="three">...</div> <a id="four">...</a> <em id="five">...</em> -<p>フラグメント識別子が文書の一部を指している場合、文書のどの部分を読むことを想定しているのか、読み手が分からなくなることがあります。 URI の対象をスタイル付けすることで、読み手の混乱を縮小したり除いたりすることができます。</p> +<a href="#one">First</a> +<a href="#two">Second</a> +<a href="#three">Third</a> +<a href="#four">Fourth</a> +<a href="#five">Fifth</a> +``` -<h2 id="Related_Links" name="Related_Links">関連項目</h2> +## まとめ -<ul> - <li>{{cssxref(":target")}}</li> -</ul> +フラグメント識別子が文書の一部を指している場合、文書のどの部分を読むことを想定しているのか、読み手が分からなくなることがあります。 URI の対象をスタイル付けすることで、読み手の混乱を縮小したり除いたりすることができます。 -<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> +- {{cssxref(":target")}} |