1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
|
---
title: ':target'
slug: 'Web/CSS/:target'
tags:
- CSS
- Layout
- Pseudo-class
- Reference
- Web
- セレクター
- 疑似クラス
translation_of: 'Web/CSS/:target'
---
<div>{{CSSRef}}</div>
<p><strong><code>:target</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は、 URL のフラグメントに一致する {{htmlattrxref("id")}} を持つ固有の要素 (<em>対象要素</em>) を表します。</p>
<pre class="brush: css no-line-numbers notranslate">/* 現在の URL のフラグメントに一致する ID を持つ要素を選択 */
:target {
border: 2px solid black;
}</pre>
<p>例えば、以下の URL には <code>section2</code> と呼ばれる要素を指すフラグメント (<em>#</em> 記号で記述) があります。</p>
<pre class="notranslate">http://www.example.com/index.html#section2</pre>
<p>現在の URL が上記の通りの場合、以下の要素が <code>:target</code> セレクターで選択されます。</p>
<pre class="brush: html notranslate"><section id="section2">Example</section></pre>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="A_table_of_contents" name="A_table_of_contents">目次</h3>
<p><code>:target</code> 擬似クラスは、目次を構成するためにリンクされたページの部分を強調表示するために使うことができます。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><h3>目次</h3>
<ol>
<li><a href="#p1">第1段落にジャンプ！</a></li>
<li><a href="#p2">第2段落にジャンプ！</a></li>
<li><a href="#nowhere">このリンクは対象がないので、
どこにも行きません。</a></li>
</ol>
<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>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">p:target {
background-color: gold;
}
/* 対象要素に擬似要素を追加 */
p:target::before {
font: 70% sans-serif;
content: "►";
color: limegreen;
margin-right: .25em;
}
/* 対象要素の中の i 要素にスタイルを適用 */
p:target i {
color: red;
}</pre>
<h4 id="Result" name="Result">結果</h4>
<div>{{EmbedLiveSample('A_table_of_contents', 500, 300)}}</div>
<h3 id="Pure-CSS_lightbox" name="Pure-CSS_lightbox">純粋な CSS のライトボックス</h3>
<p><code>:target</code> 擬似クラスを使用して JavaScript を使わずにライトボックスを作成することができます。この技術はページ内の最初は非表示の要素をリンクを作ることができることを利用しています。いったん対象となれば、 CSS で <code>display</code> を変更して表示させます。</p>
<div class="note"><strong>注:</strong> <code>:target</code> 擬似クラスを使用した純粋な CSS のライトボックスのもっと完全な版は、 <a href="https://github.com/madmurphy/takefive.css/">GitHub で利用できます</a> (<a href="https://madmurphy.github.io/takefive.css/">デモ</a>)。</div>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><ul>
<li><a href="#example1">例1を開く</a></li>
<li><a href="#example2">例2を開く</a></li>
</ul>
<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>
<div class="lightbox" id="example2">
<figure>
<a href="#" class="close"></a>
<figcaption>Cras risus odio, pharetra nec ultricies et,
mollis ac augue. Nunc et diam quis sapien dignissim auctor.
Quisque quis neque arcu, nec gravida magna.</figcaption>
</figure>
</div></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate">/* 開いていないライトボックス */
.lightbox {
display: none;
}
/* 開いたライトボックス */
.lightbox:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* ライトボックスの中身 */
.lightbox figcaption {
width: 25rem;
position: relative;
padding: 1.5em;
background-color: lightpink;
}
/* 閉じるボタン */
.lightbox .close {
position: relative;
display: block;
}
.lightbox .close::after {
right: -1rem;
top: -1rem;
width: 2rem;
height: 2rem;
position: absolute;
display: flex;
z-index: 1;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 50%;
color: white;
content: "×";
cursor: pointer;
}
/* ライトボックスのオーバーレイ */
.lightbox .close::before {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,.7);
content: "";
cursor: default;
}</pre>
<h4 id="Result_2" name="Result_2">結果</h4>
<div>{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}</div>
<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("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>HTML 特有の意味論を定義。</td>
</tr>
<tr>
<td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>変更なし。</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td>初回定義。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<div>{{Compat("css.selectors.target")}}</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors">セレクターでの :target 擬似クラスの利用</a></li>
</ul>
|
