From 507374af09059e0e8a579810f332844011af4203 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 20:39:21 +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_visited/index.md | 135 ++++++++++++------------------- 1 file changed, 51 insertions(+), 84 deletions(-) (limited to 'files/ja/web/css/_colon_visited') 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 --- -
{{CSSRef}}
+{{CSSRef}} -

:visited は CSS の擬似クラスで、ユーザーがすでに訪問したリンクを表します。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。

+**`:visited`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーがすでに訪問したリンクを表します。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。 -
/* 訪問済みの <a> をすべて選択 */
+```css
+/* 訪問済みの  をすべて選択 */
 a:visited {
   color: green;
-}
+} +``` -

:visited 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}) によって上書きされます。適切にリンクにスタイルを適用するには、 :visited ルールを :link ルールの後、 :hover および :active ルールの前に置いてください。 LVHA 順、 :link — :visited — :hover — :active と定義されています。

+`:visited` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}) によって上書きされます。適切にリンクにスタイルを適用するには、 `:visited` ルールを `:link` ルールの後、 `:hover` および `:active` ルールの前に置いてください。 _LVHA 順_、 `:link` — `:visited` — `:hover` — `:active` と定義されています。 -

スタイル適用の制約

+## スタイル適用の制約 -

プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。

+プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。 - +- 利用できる 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` 状態ではない色の値を返します。 +- [``](/ja/docs/Web/HTML/Element/link) 要素は `:visited` に一致することはありません。 -
-

メモ: これらの制限とその理由については、プライバシーと :visited セレクターを参照してください。

-
+> **Note:** これらの制限とその理由については、[プライバシーと :visited セレクター](/ja/docs/CSS/Privacy_and_the_:visited_selector)を参照してください。 -

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

色を持っていないか透過のプロパティは、 :visited で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は color と column-rule-color だけでしょう。そのため、他のプロパティを変更したい場合は、 :visited セレクターの外で基本的な値を設定する必要があります。

+色を持っていないか透過のプロパティは、 `:visited` で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は `color` と `column-rule-color` だけでしょう。そのため、他のプロパティを変更したい場合は、 `:visited` セレクターの外で基本的な値を設定する必要があります。 -

HTML

+### HTML -
<a href="#test-visited-link">このリンクを訪問しましたか？</a><br>
-<a href="">このリンクはすでに訪問済みです。</a>
+```html +このリンクを訪問しましたか？
+このリンクはすでに訪問済みです。 +``` -

CSS

+### CSS -
a {
+```css
+a {
   /* 該当するプロパティに不透過の既定値を設定することで、
      :visited 状態のスタイルを定義できるようにします */
   background-color: white;
@@ -61,58 +64,22 @@ a:visited {
   background-color: yellow;
   border-color: hotpink;
   color: hotpink;
-}
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }}
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}変更なし。
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}変更なし。
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}{{ HTMLElement("a") }} 要素に適用する場合のみ制約を緩和。プライバシーを理由とするブラウザーの振る舞いの制限をかけた。
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.visited")}}

- -

関連情報

- - +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [プライバシーと :visited セレクター](/ja/docs/Web/CSS/Privacy_and_the_:visited_selector) +- リンク関連の擬似クラス: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}} -- cgit v1.2.3-54-g00ecf