From c24d73543103c268e7f5e0002846300553717246 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 20:48:59 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_target/index.md | 196 +++++++++++++++----------------- 1 file changed, 90 insertions(+), 106 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/_colon_target/index.md b/files/ja/web/css/_colon_target/index.md index 3cfa238a57..5d6bd6286a 100644 --- a/files/ja/web/css/_colon_target/index.md +++ b/files/ja/web/css/_colon_target/index.md @@ -1,63 +1,69 @@ --- title: ':target' -slug: 'Web/CSS/:target' +slug: Web/CSS/:target tags: - CSS - - Layout - - Pseudo-class - - Reference - - Web + - レイアウト + - 擬似クラス + - リファレンス - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:target' + - ウェブ +browser-compat: css.selectors.target +translation_of: Web/CSS/:target --- -
{{CSSRef}}
+{{CSSRef}} -

:target は CSS の擬似クラスは、 URL のフラグメントに一致する {{htmlattrxref("id")}} を持つ固有の要素 (対象要素) を表します。

+**`:target`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)は、 URL のフラグメントに一致する {{htmlattrxref("id")}} を持つ固有の要素 (*対象要素*) を表します。 -
/* 現在の URL のフラグメントに一致する ID を持つ要素を選択 */
+```css
+/* 現在の URL のフラグメントに一致する ID を持つ要素を選択 */
 :target {
   border: 2px solid black;
-}
+} +``` -

例えば、以下の URL には section2 と呼ばれる要素を指すフラグメント (# 記号で記述) があります。

+例えば、以下の URL には `section2` と呼ばれる要素を指すフラグメント (_#_ 記号で記述) があります。 -
http://www.example.com/index.html#section2
+ http://www.example.com/index.html#section2 -

現在の URL が上記の通りの場合、以下の要素が :target セレクターで選択されます。

+現在の URL が上記の通りの場合、以下の要素が `:target` セレクターで選択されます。 -
<section id="section2">Example</section>
+```html +
Example
+``` -

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

目次

+### 目次 -

:target 擬似クラスは、目次を構成するためにリンクされたページの部分を強調表示するために使うことができます。

+`:target` 擬似クラスは、目次を構成するためにリンクされたページの部分を強調表示するために使うことができます。 -

HTML

+#### HTML -
<h3>目次</h3>
-<ol>
- <li><a href="#p1">第1段落にジャンプ！</a></li>
- <li><a href="#p2">第2段落にジャンプ！</a></li>
- <li><a href="#nowhere">このリンクは対象がないので、
-   どこにも行きません。</a></li>
-</ol>
+```html
+
目次

+
    
+ 
  1. 第1段落にジャンプ！
    2. 
+ 
  2. 第2段落にジャンプ！
    3. 
+ 
  3. このリンクは対象がないので、
+   どこにも行きません。
    4. 
+

 
-<h3>My Fun Article</h3>
-<p id="p1">You can target <i>this paragraph</i> using a
-  URL fragment. Click on the link above to try out!</p>
-<p id="p2">This is <i>another paragraph</i>, also accessible
-  from the links above. Isn't that delightful?</p>
-
+

My Fun Article

+

You can target this paragraph using a + URL fragment. Click on the link above to try out!

+

This is another paragraph, also accessible + from the links above. Isn't that delightful?

+``` -

CSS

+#### CSS -
p:target {
+```css
+p:target {
   background-color: gold;
 }
 
@@ -72,45 +78,49 @@ p:target::before {
 /* 対象要素の中の i 要素にスタイルを適用 */
 p:target i {
   color: red;
-}
- -

結果

+} +``` -
{{EmbedLiveSample('A_table_of_contents', 500, 300)}}
+#### 結果 -

純粋な CSS のライトボックス

+{{EmbedLiveSample('A_table_of_contents', 500, 300)}} -

:target 擬似クラスを使用して JavaScript を使わずにライトボックスを作成することができます。この技術はページ内の最初は非表示の要素をリンクを作ることができることを利用しています。いったん対象となれば、 CSS で display を変更して表示させます。

+### 純粋な CSS のライトボックス -
注: :target 擬似クラスを使用した純粋な CSS のライトボックスのもっと完全な版は、 GitHub で利用できます (デモ)。
+`:target` 擬似クラスを使用して JavaScript を使わずにライトボックスを作成することができます。この技術はページ内の最初は非表示の要素をリンクを作ることができることを利用しています。いったん対象となれば、 CSS で `display` を変更して表示させます。 -

HTML

+> **Note:** `:target` 擬似クラスを使用した純粋な CSS のライトボックスのもっと完全な版は、 [GitHub で利用できます](https://github.com/madmurphy/takefive.css/) ([デモ](https://madmurphy.github.io/takefive.css/))。 -
<ul>
-  <li><a href="#example1">例1を開く</a></li>
-  <li><a href="#example2">例2を開く</a></li>
-</ul>
+#### HTML
 
-<div class="lightbox" id="example1">
-  <figure>
-    <a href="#" class="close"></a>
-    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
-  </figure>
-</div>
+```html
+
 
-<div class="lightbox" id="example2">
-  <figure>
-    <a href="#" class="close"></a>
-    <figcaption>Cras risus odio, pharetra nec ultricies et,
+
+
+
+ Quisque quis neque arcu, nec gravida magna. + + +``` -

CSS

+#### CSS -
/* 開いていないライトボックス */
+```css
+/* 開いていないライトボックス */
 .lightbox {
   display: none;
 }
@@ -168,47 +178,21 @@ p:target i {
   background-color: rgba(0,0,0,.7);
   content: "";
   cursor: default;
-}
- -

結果

- -
{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}HTML 特有の意味論を定義。
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}変更なし。
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}初回定義。
- -

ブラウザーの互換性

- -
{{Compat("css.selectors.target")}}
- -

関連情報

+} +``` - +#### 結果 + +{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [セレクターでの :target 擬似クラスの利用](/ja/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors) -- cgit v1.2.3-54-g00ecf