diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-03 20:39:21 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-13 09:56:21 +0900 |
commit | 507374af09059e0e8a579810f332844011af4203 (patch) | |
tree | 4dbe2307954d496e47e2561371c0c38f57beb50f /files | |
parent | 3244d75fbc4f86221ba34678776b0c9310b2d96f (diff) | |
download | translated-content-507374af09059e0e8a579810f332844011af4203.tar.gz translated-content-507374af09059e0e8a579810f332844011af4203.tar.bz2 translated-content-507374af09059e0e8a579810f332844011af4203.zip |
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files')
-rw-r--r-- | files/ja/web/css/_colon_visited/index.md | 135 |
1 files changed, 51 insertions, 84 deletions
diff --git a/files/ja/web/css/_colon_visited/index.md b/files/ja/web/css/_colon_visited/index.md index 7209a8c259..795614a2bb 100644 --- a/files/ja/web/css/_colon_visited/index.md +++ b/files/ja/web/css/_colon_visited/index.md @@ -1,56 +1,59 @@ --- title: ':visited' -slug: 'Web/CSS/:visited' +slug: Web/CSS/:visited tags: - CSS - - Reference - - Selectors + - レイアウト + - 擬似クラス + - リファレンス - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:visited' + - ウェブ +translation_of: Web/CSS/:visited --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>:visited</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、ユーザーがすでに訪問したリンクを表します。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。</p> +**`:visited`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーがすでに訪問したリンクを表します。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。 -<pre class="brush: css no-line-numbers">/* 訪問済みの <a> をすべて選択 */ +```css +/* 訪問済みの <a> をすべて選択 */ a:visited { color: green; -}</pre> +} +``` -<p><code>:visited</code> 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}) によって上書きされます。適切にリンクにスタイルを適用するには、 <code>:visited</code> ルールを <code>:link</code> ルールの後、 <code>:hover</code> および <code>:active</code> ルールの前に置いてください。 <em>LVHA 順</em>、 <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code> と定義されています。</p> +`:visited` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}) によって上書きされます。適切にリンクにスタイルを適用するには、 `:visited` ルールを `:link` ルールの後、 `:hover` および `:active` ルールの前に置いてください。 _LVHA 順_、 `:link` — `:visited` — `:hover` — `:active` と定義されています。 -<h2 id="Styling_restrictions" name="Styling_restrictions">スタイル適用の制約</h2> +## スタイル適用の制約 -<p>プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。</p> +プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。 -<ul> - <li>利用できる CSS プロパティは、 {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("text-decoration-color") }}, {{ cssxref("text-emphasis-color") }} です。</li> - <li>利用できる SVG 属性は {{SVGAttr("fill")}} と {{SVGAttr("stroke")}} です。</li> - <li>利用できるスタイルでもアルファチャンネルは無視されます。アルファチャンネルは要素の <code>:visited</code> 状態ではないものが代わりに使用されますが、アルファチャンネルが <code>0</code> であった場合は、 <code>:visited</code> で設定されたスタイルセットは完全に無視されます。</li> - <li>これらのスタイルはエンドユーザーに対する表示色を変更できるようになっていますが、 {{domxref("window.getComputedStyle")}} メソッドは嘘をつき、 <code>:visited</code> 状態ではない色の値を返します。</li> -</ul> +- 利用できる CSS プロパティは、 {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("text-decoration-color") }}, {{ cssxref("text-emphasis-color") }} です。 +- 利用できる SVG 属性は {{SVGAttr("fill")}} と {{SVGAttr("stroke")}} です。 +- 利用できるスタイルでもアルファチャンネルは無視されます。アルファチャンネルは要素の `:visited` 状態ではないものが代わりに使用されますが、アルファチャンネルが `0` であった場合は、 `:visited` で設定されたスタイルセットは全体的に無視されます。 +- これらのスタイルはエンドユーザーに対する表示色を変更できるようになっていますが、 {{domxref("window.getComputedStyle")}} メソッドは嘘をつき、 `:visited` 状態ではない色の値を返します。 +- [`<link>`](/ja/docs/Web/HTML/Element/link) 要素は `:visited` に一致することはありません。 -<div class="note"> -<p><strong>メモ:</strong> これらの制限とその理由については、<a href="/ja/docs/CSS/Privacy_and_the_:visited_selector">プライバシーと :visited セレクター</a>を参照してください。</p> -</div> +> **Note:** これらの制限とその理由については、[プライバシーと :visited セレクター](/ja/docs/CSS/Privacy_and_the_:visited_selector)を参照してください。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<p>色を持っていないか透過のプロパティは、 <code>:visited</code> で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は <code>color</code> と <code>column-rule-color</code> だけでしょう。そのため、他のプロパティを変更したい場合は、 <code>:visited</code> セレクターの外で基本的な値を設定する必要があります。</p> +色を持っていないか透過のプロパティは、 `:visited` で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は `color` と `column-rule-color` だけでしょう。そのため、他のプロパティを変更したい場合は、 `:visited` セレクターの外で基本的な値を設定する必要があります。 -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><a href="#test-visited-link">このリンクを訪問しましたか?</a><br> -<a href="">このリンクはすでに訪問済みです。</a></pre> +```html +<a href="#test-visited-link">このリンクを訪問しましたか?</a><br> +<a href="">このリンクはすでに訪問済みです。</a> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">a { +```css +a { /* 該当するプロパティに不透過の既定値を設定することで、 :visited 状態のスタイルを定義できるようにします */ background-color: white; @@ -61,58 +64,22 @@ a:visited { background-color: yellow; border-color: hotpink; color: hotpink; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<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', 'scripting.html#selector-visited', ':visited') }}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td></td> - </tr> - <tr> - <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td> - <td>{{ Spec2('CSS4 Selectors') }}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td> - <td>{{ Spec2('CSS3 Selectors') }}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>{{ HTMLElement("a") }} 要素に適用する場合のみ制約を緩和。プライバシーを理由とするブラウザーの振る舞いの制限をかけた。</td> - </tr> - <tr> - <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td> - <td>{{ Spec2('CSS1') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.selectors.visited")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/CSS/Privacy_and_the_:visited_selector">プライバシーと :visited セレクター</a></li> - <li>リンク関連の擬似クラス: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}}</li> -</ul> +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [プライバシーと :visited セレクター](/ja/docs/Web/CSS/Privacy_and_the_:visited_selector) +- リンク関連の擬似クラス: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}} |