From 4e7f38b255e10211ec0e438036bce18142fe0a0e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 15:47:20 +0900 Subject: 言語擬似クラス、位置擬似クラス、ユーザー操作擬似クラスを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_active/index.html | 128 ----------------- files/ja/web/css/_colon_active/index.md | 128 +++++++++++++++++ files/ja/web/css/_colon_any-link/index.html | 74 ---------- files/ja/web/css/_colon_any-link/index.md | 74 ++++++++++ files/ja/web/css/_colon_dir/index.html | 110 -------------- files/ja/web/css/_colon_dir/index.md | 110 ++++++++++++++ files/ja/web/css/_colon_hover/index.html | 104 -------------- files/ja/web/css/_colon_hover/index.md | 104 ++++++++++++++ files/ja/web/css/_colon_lang/index.html | 103 ------------- files/ja/web/css/_colon_lang/index.md | 103 +++++++++++++ files/ja/web/css/_colon_link/index.html | 103 ------------- files/ja/web/css/_colon_link/index.md | 103 +++++++++++++ files/ja/web/css/_colon_scope/index.html | 120 ---------------- files/ja/web/css/_colon_scope/index.md | 120 ++++++++++++++++ files/ja/web/css/_colon_target/index.html | 214 ---------------------------- files/ja/web/css/_colon_target/index.md | 214 ++++++++++++++++++++++++++++ files/ja/web/css/_colon_visited/index.html | 118 --------------- files/ja/web/css/_colon_visited/index.md | 118 +++++++++++++++ 18 files changed, 1074 insertions(+), 1074 deletions(-) delete mode 100644 files/ja/web/css/_colon_active/index.html create mode 100644 files/ja/web/css/_colon_active/index.md delete mode 100644 files/ja/web/css/_colon_any-link/index.html create mode 100644 files/ja/web/css/_colon_any-link/index.md delete mode 100644 files/ja/web/css/_colon_dir/index.html create mode 100644 files/ja/web/css/_colon_dir/index.md delete mode 100644 files/ja/web/css/_colon_hover/index.html create mode 100644 files/ja/web/css/_colon_hover/index.md delete mode 100644 files/ja/web/css/_colon_lang/index.html create mode 100644 files/ja/web/css/_colon_lang/index.md delete mode 100644 files/ja/web/css/_colon_link/index.html create mode 100644 files/ja/web/css/_colon_link/index.md delete mode 100644 files/ja/web/css/_colon_scope/index.html create mode 100644 files/ja/web/css/_colon_scope/index.md delete mode 100644 files/ja/web/css/_colon_target/index.html create mode 100644 files/ja/web/css/_colon_target/index.md delete mode 100644 files/ja/web/css/_colon_visited/index.html create mode 100644 files/ja/web/css/_colon_visited/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/_colon_active/index.html b/files/ja/web/css/_colon_active/index.html deleted file mode 100644 index a8f6aaab1e..0000000000 --- a/files/ja/web/css/_colon_active/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: ':active' -slug: 'Web/CSS/:active' -tags: - - CSS - - ウェブ - - セレクター - - リファレンス - - レイアウト - - 疑似クラス -translation_of: 'Web/CSS/:active' ---- -
{{CSSRef}}
- -

CSS の :active 疑似クラスは、ユーザーによってアクティブ化されている要素 (ボタンなど) を表します。マウスを使用する場合は、「アクティブ化」とはふつう、第1ボタンを押し下げたときに始まります。

- -
/* アクティブ化されている <a> をすべて選択します */
-a:active {
-  color: red;
-}
- -

:active 疑似クラスは、 {{HTMLElement("a")}} 及び {{HTMLElement("button")}} 要素で使われます。この疑似クラスで他のよくあるターゲットとしては、アクティブ化される要素を含む要素や、関連付けられた {{HTMLElement("label")}} 要素を通してアクティブ化されるフォーム要素です。

- -

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

- -
メモ: 複数ボタンのマウスを使うシステムでは、 CSS 3 は :active 擬似クラスは第1ボタン、つまり右手用のマウスではふつう一番左のボタンにのみ適用しなければならないと定義しています。
- -

構文

- -{{csssyntax}} - -

例

- - - -

HTML

- -
<p>この段落にはリンクが含まれています。
-  <a href="#">このリンクはクリックすると赤色になります。</a>
-  この段落は段落やリンクをクリックすると灰色になります。
-</p>
- -

CSS

- -
a:link { color: blue; }          /* 未訪問リンク */
-a:visited { color: purple; }     /* 訪問済みリンク */
-a:hover { background: yellow; }  /* ホバー時 */
-a:active { color: red; }         /* アクティブなリンク */
-
-p:active { background: #eee; }   /* アクティブな段落 */
- -

結果

- -

{{EmbedLiveSample('Active_links')}}

- -

フォーム要素をアクティブ化

- -

HTML

- -
<form>
-  <label for="my-button">My button: </label>
-  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
-</form>
- -

CSS

- -
form :active {
-  color: red;
-}
-
-form button {
-  background: white;
-}
- -

結果

- -

{{EmbedLiveSample('Active_form_elements')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}変更なし。
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}変更なし。
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}初回定義。
- -

ブラウザーの対応

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_active/index.md b/files/ja/web/css/_colon_active/index.md new file mode 100644 index 0000000000..a8f6aaab1e --- /dev/null +++ b/files/ja/web/css/_colon_active/index.md @@ -0,0 +1,128 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - ウェブ + - セレクター + - リファレンス + - レイアウト + - 疑似クラス +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

CSS の :active 疑似クラスは、ユーザーによってアクティブ化されている要素 (ボタンなど) を表します。マウスを使用する場合は、「アクティブ化」とはふつう、第1ボタンを押し下げたときに始まります。

+ +
/* アクティブ化されている <a> をすべて選択します */
+a:active {
+  color: red;
+}
+ +

:active 疑似クラスは、 {{HTMLElement("a")}} 及び {{HTMLElement("button")}} 要素で使われます。この疑似クラスで他のよくあるターゲットとしては、アクティブ化される要素を含む要素や、関連付けられた {{HTMLElement("label")}} 要素を通してアクティブ化されるフォーム要素です。

+ +

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

+ +
メモ: 複数ボタンのマウスを使うシステムでは、 CSS 3 は :active 擬似クラスは第1ボタン、つまり右手用のマウスではふつう一番左のボタンにのみ適用しなければならないと定義しています。
+ +

構文

+ +{{csssyntax}} + +

例

+ + + +

HTML

+ +
<p>この段落にはリンクが含まれています。
+  <a href="#">このリンクはクリックすると赤色になります。</a>
+  この段落は段落やリンクをクリックすると灰色になります。
+</p>
+ +

CSS

+ +
a:link { color: blue; }          /* 未訪問リンク */
+a:visited { color: purple; }     /* 訪問済みリンク */
+a:hover { background: yellow; }  /* ホバー時 */
+a:active { color: red; }         /* アクティブなリンク */
+
+p:active { background: #eee; }   /* アクティブな段落 */
+ +

結果

+ +

{{EmbedLiveSample('Active_links')}}

+ +

フォーム要素をアクティブ化

+ +

HTML

+ +
<form>
+  <label for="my-button">My button: </label>
+  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
+</form>
+ +

CSS

+ +
form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

結果

+ +

{{EmbedLiveSample('Active_form_elements')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}変更なし。
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}変更なし。
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}初回定義。
+ +

ブラウザーの対応

+ +
+

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_any-link/index.html b/files/ja/web/css/_colon_any-link/index.html deleted file mode 100644 index 661d3a66de..0000000000 --- a/files/ja/web/css/_colon_any-link/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: ':any-link' -slug: 'Web/CSS/:any-link' -tags: - - CSS - - CSS 疑似クラス - - Experimental - - Reference - - Web - - セレクター - - レイアウト -translation_of: 'Web/CSS/:any-link' ---- -
{{CSSRef}}
- -

CSS の :any-link 疑似クラスセレクターは、訪問の有無とは独立したソースアンカーとして振る舞う要素を表します。言い換えれば、 href 属性を持つすべての {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} の各要素を選択します。つまり、 {{cssxref(":link")}} または {{cssxref(":visited")}} に一致するすべての要素を選択します。

- -
/* :link または :visited に該当するすべての要素を選択 */
-:any-link {
-  color: green;
-}
- -

構文

- -{{csssyntax}} - -

例

- -

HTML

- -
<a href="https://example.com">External link</a><br>
-<a href="#">Internal target link</a><br>
-<a>Placeholder link (won't get styled)</a>
- -

CSS

- -
a:any-link {
-  border: 1px solid blue;
-  color: orange;
-}
-
-/* WebKit browsers */
-a:-webkit-any-link {
-  border: 1px solid blue;
-  color: orange;
-}
-
- -

結果

- -

{{EmbedLiveSample('Example')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.selectors.any-link")}}

diff --git a/files/ja/web/css/_colon_any-link/index.md b/files/ja/web/css/_colon_any-link/index.md new file mode 100644 index 0000000000..661d3a66de --- /dev/null +++ b/files/ja/web/css/_colon_any-link/index.md @@ -0,0 +1,74 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - CSS + - CSS 疑似クラス + - Experimental + - Reference + - Web + - セレクター + - レイアウト +translation_of: 'Web/CSS/:any-link' +--- +
{{CSSRef}}
+ +

CSS の :any-link 疑似クラスセレクターは、訪問の有無とは独立したソースアンカーとして振る舞う要素を表します。言い換えれば、 href 属性を持つすべての {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} の各要素を選択します。つまり、 {{cssxref(":link")}} または {{cssxref(":visited")}} に一致するすべての要素を選択します。

+ +
/* :link または :visited に該当するすべての要素を選択 */
+:any-link {
+  color: green;
+}
+ +

構文

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<a href="https://example.com">External link</a><br>
+<a href="#">Internal target link</a><br>
+<a>Placeholder link (won't get styled)</a>
+ +

CSS

+ +
a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* WebKit browsers */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.selectors.any-link")}}

diff --git a/files/ja/web/css/_colon_dir/index.html b/files/ja/web/css/_colon_dir/index.html deleted file mode 100644 index 5d0951f8ab..0000000000 --- a/files/ja/web/css/_colon_dir/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: ':dir()' -slug: 'Web/CSS/:dir' -tags: - - BiDi - - CSS - - Experimental - - Pseudo-class - - Reference - - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:dir' ---- -
{{CSSRef}}
- -

:dir() は CSS の 擬似クラスで、中に含まれる文字列の方向に基づいて要素を選択します。

- -
/* 右から左への文字列がある要素すべてを選択 */
-:dir(rtl) {
-  background-color: red;
-}
- -

:dir() 擬似クラスは文字方向の意味的な値、つまり、文書自身に設定されているもののみを使用します。スタイルによる文字方向、つまり、 {{cssxref("direction")}} のような CSS プロパティで設定された文字方向には対応しません。

- -
-

メモ: :dir() 擬似クラスは [dir=…] 属性セレクター とは等価でないことに注意してください。後者は HTML の {{htmlattrxref("dir")}} 属性を選択しますが、これがない要素は、文字方向が親から継承されていても無視します。（同様に、 [dir=rtl] と [dir=ltr] は auto の値を選択しません。）それに対して、 :dir() は継承の場合も含め、{{glossary("user agent", "ユーザーエージェント")}} が計算した値で選択します。

-
- -
-

メモ: HTML では、文字方向は {{htmlattrxref("dir")}} 属性で指定されます。他の文書タイプでは異なる方法があるかもしれません。

-
- -

構文

- -

:dir() 擬似クラスは1つの引数を取り、対象としたい文字方向を指定します。

- -

引数

- -
-
ltr
-
文字方向が左から右の要素を対象とします。
-
rtl
-
文字方向が右から左の要素を対象とします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div dir="rtl">
-  <span>test1</span>
-  <div dir="ltr">test2
-    <div dir="auto">עִבְרִית</div>
-  </div>
-</div>
-
- -

CSS

- -
:dir(ltr) {
-  background-color: yellow;
-}
-
-:dir(rtl) {
-  background-color: powderblue;
-}
- -

結果

- -

{{ EmbedLiveSample('Examples') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}初回定義。
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_dir/index.md b/files/ja/web/css/_colon_dir/index.md new file mode 100644 index 0000000000..5d0951f8ab --- /dev/null +++ b/files/ja/web/css/_colon_dir/index.md @@ -0,0 +1,110 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - BiDi + - CSS + - Experimental + - Pseudo-class + - Reference + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}
+ +

:dir() は CSS の 擬似クラスで、中に含まれる文字列の方向に基づいて要素を選択します。

+ +
/* 右から左への文字列がある要素すべてを選択 */
+:dir(rtl) {
+  background-color: red;
+}
+ +

:dir() 擬似クラスは文字方向の意味的な値、つまり、文書自身に設定されているもののみを使用します。スタイルによる文字方向、つまり、 {{cssxref("direction")}} のような CSS プロパティで設定された文字方向には対応しません。

+ +
+

メモ: :dir() 擬似クラスは [dir=…] 属性セレクター とは等価でないことに注意してください。後者は HTML の {{htmlattrxref("dir")}} 属性を選択しますが、これがない要素は、文字方向が親から継承されていても無視します。（同様に、 [dir=rtl] と [dir=ltr] は auto の値を選択しません。）それに対して、 :dir() は継承の場合も含め、{{glossary("user agent", "ユーザーエージェント")}} が計算した値で選択します。

+
+ +
+

メモ: HTML では、文字方向は {{htmlattrxref("dir")}} 属性で指定されます。他の文書タイプでは異なる方法があるかもしれません。

+
+ +

構文

+ +

:dir() 擬似クラスは1つの引数を取り、対象としたい文字方向を指定します。

+ +

引数

+ +
+
ltr
+
文字方向が左から右の要素を対象とします。
+
rtl
+
文字方向が右から左の要素を対象とします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+
+ +

CSS

+ +
:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Examples') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_hover/index.html b/files/ja/web/css/_colon_hover/index.html deleted file mode 100644 index 5a6feb6729..0000000000 --- a/files/ja/web/css/_colon_hover/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: ':hover' -slug: Web/CSS/:hover -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web - - 擬似クラス -browser-compat: css.selectors.hover -translation_of: Web/CSS/:hover ---- -
{{ CSSRef }}
- -

:hover は CSS の 擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル (マウスポインター) で要素の上をホバー (通過) させたときにこの状態になります。

- -
/* 「ホバー」状態の <a> 要素を選択します */
-a:hover {
-  color: orange;
-}
- -

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

- -
注: :hover 擬似クラスはタッチスクリーンで問題になります。ブラウザーによっては、 :hover 擬似クラスが全く選択されなかったり、要素をタッチした直後だけ選択されたり、ユーザーが指を離しても選択され続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。
- -

構文

- -{{csssyntax}} - -

例

- -

基本的な例

- -

HTML

- -
<a href="#">このリンクの上を通過させてみてください。</a>
- -

CSS

- -
a {
-  background-color: powderblue;
-  transition: background-color .5s;
-}
-
-a:hover {
-  background-color: gold;
-}
- -

結果

- -

{{EmbedLiveSample("Basic_example")}}

- - - -

:hover 擬似クラスを使用して、サムネイルの上をマウスが通過したときだけフルサイズに画像が表示される画像ギャラリーを作成することができます。実行できるものとして、このデモを参照してください。

- -
注: :checked 擬似クラスを (隠れたラジオボタンに適用して) 使用した同様の効果の例として、 :checked のリファレンスページから取ったこのデモも参照してください。
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書備考連絡先
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}:hover があらゆる擬似要素に適用できるようになった。CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}初回定義。
- -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_hover/index.md b/files/ja/web/css/_colon_hover/index.md new file mode 100644 index 0000000000..5a6feb6729 --- /dev/null +++ b/files/ja/web/css/_colon_hover/index.md @@ -0,0 +1,104 @@ +--- +title: ':hover' +slug: Web/CSS/:hover +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web + - 擬似クラス +browser-compat: css.selectors.hover +translation_of: Web/CSS/:hover +--- +
{{ CSSRef }}
+ +

:hover は CSS の 擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル (マウスポインター) で要素の上をホバー (通過) させたときにこの状態になります。

+ +
/* 「ホバー」状態の <a> 要素を選択します */
+a:hover {
+  color: orange;
+}
+ +

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

+ +
注: :hover 擬似クラスはタッチスクリーンで問題になります。ブラウザーによっては、 :hover 擬似クラスが全く選択されなかったり、要素をタッチした直後だけ選択されたり、ユーザーが指を離しても選択され続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。
+ +

構文

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +

HTML

+ +
<a href="#">このリンクの上を通過させてみてください。</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

結果

+ +

{{EmbedLiveSample("Basic_example")}}

+ + + +

:hover 擬似クラスを使用して、サムネイルの上をマウスが通過したときだけフルサイズに画像が表示される画像ギャラリーを作成することができます。実行できるものとして、このデモを参照してください。

+ +
注: :checked 擬似クラスを (隠れたラジオボタンに適用して) 使用した同様の効果の例として、 :checked のリファレンスページから取ったこのデモも参照してください。
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書備考連絡先
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}:hover があらゆる擬似要素に適用できるようになった。CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}初回定義。
+ +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_lang/index.html b/files/ja/web/css/_colon_lang/index.html deleted file mode 100644 index 2e0519a3f9..0000000000 --- a/files/ja/web/css/_colon_lang/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: ':lang' -slug: 'Web/CSS/:lang' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:lang' ---- -
{{CSSRef}}
- -

:lang() はCSS の擬似クラスで、指定された言語に基づいて要素に一致させます。

- -
/* <p> のうち English (en) のものをすべて選択 */
-p:lang(en) {
-  quotes: '\201C' '\201D' '\2018' '\2019';
-}
- -
-

メモ: HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。

-
- -

構文

- -

形式文法

- -{{csssyntax}} - -

引数

- -
-
<language-code>
-
{{cssxref("<string>")}} で、ターゲットにしたい言語を表します。受付可能な値は HTML 仕様書で定義されています。
-
- -

例

- -

この例では、 :lang() 疑似クラスを使用して引用要素 ({{htmlElement("q")}}) の親を選択するために 子結合子 を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。

- -

HTML

- -
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
-<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
-<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
-
- -

CSS

- -
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
-:lang(fr) > q { quotes: '« ' ' »'; }
-:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
-
- -

結果

- -

{{EmbedLiveSample('Examples', 350)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}ワイルドカードによるマッチングとカンマ区切りの言語リストを追加。
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}有意な変更なし。
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}初回定義。
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_lang/index.md b/files/ja/web/css/_colon_lang/index.md new file mode 100644 index 0000000000..2e0519a3f9 --- /dev/null +++ b/files/ja/web/css/_colon_lang/index.md @@ -0,0 +1,103 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

:lang() はCSS の擬似クラスで、指定された言語に基づいて要素に一致させます。

+ +
/* <p> のうち English (en) のものをすべて選択 */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

メモ: HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。

+
+ +

構文

+ +

形式文法

+ +{{csssyntax}} + +

引数

+ +
+
<language-code>
+
{{cssxref("<string>")}} で、ターゲットにしたい言語を表します。受付可能な値は HTML 仕様書で定義されています。
+
+ +

例

+ +

この例では、 :lang() 疑似クラスを使用して引用要素 ({{htmlElement("q")}}) の親を選択するために 子結合子 を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。

+ +

HTML

+ +
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
+<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
+<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
+
+ +

CSS

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 350)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}ワイルドカードによるマッチングとカンマ区切りの言語リストを追加。
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}有意な変更なし。
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}初回定義。
+ +

ブラウザーの互換性

+ +
+

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_link/index.html b/files/ja/web/css/_colon_link/index.html deleted file mode 100644 index 99b6057169..0000000000 --- a/files/ja/web/css/_colon_link/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: ':link' -slug: 'Web/CSS/:link' -tags: - - CSS - - CSS Reference - - Pseudo-class - - Reference - - 疑似クラス -translation_of: 'Web/CSS/:link' ---- -
{{CSSRef}}
- -

CSS の :link 疑似クラスは、まだ訪問されていない要素を表します。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} など、 href 属性を持つ未訪問のすべての要素を選択します。

- -
/* 未訪問の <a> をすべて選択します */
-a:link {
-  color: red;
-}
- -

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

- -
-

メモ: 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。

-
- -

構文

- -{{csssyntax}} - -

例

- -

既定では、大半のブラウザーが訪問済みのリンクに特殊な {{cssxref("color")}} の値を適用しています。そのため、この例のリンクは訪問前でしか特殊な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があるでしょう）。しかし、 {{cssxref("background-color")}} の値は大半のブラウザーが既定で訪問済みのリンクに設定していないので残るでしょう。

- -

HTML

- -
<a href="#ordinary-target">これは普通のリンクです。</a><br>
-<a href="">このリンクを訪問しました。</a><br>
-<a>リンクのプレイスホルダー（スタイルの適用なし）</a>
-
- -

CSS

- -
a:link {
-  background-color: gold;
-  color: green;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}変更なし。
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}変更なし。
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}{{ HTMLElement("a") }} 要素に適用する場合のみ制約を緩和。
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}初回定義。
- -

ブラウザー実装状況

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_link/index.md b/files/ja/web/css/_colon_link/index.md new file mode 100644 index 0000000000..99b6057169 --- /dev/null +++ b/files/ja/web/css/_colon_link/index.md @@ -0,0 +1,103 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - CSS Reference + - Pseudo-class + - Reference + - 疑似クラス +translation_of: 'Web/CSS/:link' +--- +
{{CSSRef}}
+ +

CSS の :link 疑似クラスは、まだ訪問されていない要素を表します。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} など、 href 属性を持つ未訪問のすべての要素を選択します。

+ +
/* 未訪問の <a> をすべて選択します */
+a:link {
+  color: red;
+}
+ +

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

+ +
+

メモ: 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

既定では、大半のブラウザーが訪問済みのリンクに特殊な {{cssxref("color")}} の値を適用しています。そのため、この例のリンクは訪問前でしか特殊な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があるでしょう）。しかし、 {{cssxref("background-color")}} の値は大半のブラウザーが既定で訪問済みのリンクに設定していないので残るでしょう。

+ +

HTML

+ +
<a href="#ordinary-target">これは普通のリンクです。</a><br>
+<a href="">このリンクを訪問しました。</a><br>
+<a>リンクのプレイスホルダー（スタイルの適用なし）</a>
+
+ +

CSS

+ +
a:link {
+  background-color: gold;
+  color: green;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}変更なし。
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}変更なし。
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}{{ HTMLElement("a") }} 要素に適用する場合のみ制約を緩和。
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}初回定義。
+ +

ブラウザー実装状況

+ +
+

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_scope/index.html b/files/ja/web/css/_colon_scope/index.html deleted file mode 100644 index 0dbe004e78..0000000000 --- a/files/ja/web/css/_colon_scope/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: ':scope' -slug: 'Web/CSS/:scope' -tags: - - CSS - - Layout - - Reference - - Web - - スコープ付き要素 - - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:scope' ---- -
{{CSSRef}}
- -

:scope は CSS の疑似クラスで、セレクターが選択する対象の参照点である要素を表します。

- -
/* スコープとなる要素を選択 */
-:scope {
-  background-color: lime;
-}
- -

現在、スタイルシートで使用したときは、現時点ではスコープ付きの要素を明確に確立する方法がないため、 :scope は {{cssxref(":root")}} と同じです。 DOM API ({{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, {{domxref("Element.closest()")}} など) で使用したときは、 :scope はメソッドを呼び出した要素を選択します。

- -

構文

- -{{csssyntax}} - -

例

- -

ID の一致

- -

この例では、 {{domxref("Element.matches()")}} メソッドから :scope を使用して呼び出される要素を選択する方法を紹介します。

- -

JavaScript

- -
let paragraph = document.getElementById("para");
-let output = document.getElementById("output");
-
-if (paragraph.matches(":scope")) {
-  output.innerText = "はい、この要素は自分自身のスコープ内にあります！";
-}
- -

HTML

- -
<p id="para">
-  これは段落です。面白い段落ではありません。すみません。
-</p>
-<p id="output"></p>
- -

結果

- -
{{ EmbedLiveSample('Identity_match') }}
- -

直接の子

- -

:scope 疑似クラスが有用だと示されるのは、すでに受け取っている {{domxref("Element")}} の直接の子を取得する必要がある場合です。

- -

JavaScript

- -
var context = document.getElementById('context');
-var selected = context.querySelectorAll(':scope > div');
-
-document.getElementById('results').innerHTML = Array.prototype.map.call(selected, function (element) {
-    return '#' + element.getAttribute('id');
-}).join(', ');
- -

HTML

- -
<div id="context">
-    <div id="element-1">
-        <div id="element-1.1"></div>
-        <div id="element-1.2"></div>
-    </div>
-    <div id="element-2">
-        <div id="element-2.1"></div>
-    </div>
-</div>
-<p>
-    Selected elements ids :
-    <span id="results"></span>
-</p>
- -

結果

- -

{{ EmbedLiveSample('Direct_children') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }}{{ Spec2('CSS4 Selectors') }}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_scope/index.md b/files/ja/web/css/_colon_scope/index.md new file mode 100644 index 0000000000..0dbe004e78 --- /dev/null +++ b/files/ja/web/css/_colon_scope/index.md @@ -0,0 +1,120 @@ +--- +title: ':scope' +slug: 'Web/CSS/:scope' +tags: + - CSS + - Layout + - Reference + - Web + - スコープ付き要素 + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:scope' +--- +
{{CSSRef}}
+ +

:scope は CSS の疑似クラスで、セレクターが選択する対象の参照点である要素を表します。

+ +
/* スコープとなる要素を選択 */
+:scope {
+  background-color: lime;
+}
+ +

現在、スタイルシートで使用したときは、現時点ではスコープ付きの要素を明確に確立する方法がないため、 :scope は {{cssxref(":root")}} と同じです。 DOM API ({{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, {{domxref("Element.closest()")}} など) で使用したときは、 :scope はメソッドを呼び出した要素を選択します。

+ +

構文

+ +{{csssyntax}} + +

例

+ +

ID の一致

+ +

この例では、 {{domxref("Element.matches()")}} メソッドから :scope を使用して呼び出される要素を選択する方法を紹介します。

+ +

JavaScript

+ +
let paragraph = document.getElementById("para");
+let output = document.getElementById("output");
+
+if (paragraph.matches(":scope")) {
+  output.innerText = "はい、この要素は自分自身のスコープ内にあります！";
+}
+ +

HTML

+ +
<p id="para">
+  これは段落です。面白い段落ではありません。すみません。
+</p>
+<p id="output"></p>
+ +

結果

+ +
{{ EmbedLiveSample('Identity_match') }}
+ +

直接の子

+ +

:scope 疑似クラスが有用だと示されるのは、すでに受け取っている {{domxref("Element")}} の直接の子を取得する必要がある場合です。

+ +

JavaScript

+ +
var context = document.getElementById('context');
+var selected = context.querySelectorAll(':scope > div');
+
+document.getElementById('results').innerHTML = Array.prototype.map.call(selected, function (element) {
+    return '#' + element.getAttribute('id');
+}).join(', ');
+ +

HTML

+ +
<div id="context">
+    <div id="element-1">
+        <div id="element-1.1"></div>
+        <div id="element-1.2"></div>
+    </div>
+    <div id="element-2">
+        <div id="element-2.1"></div>
+    </div>
+</div>
+<p>
+    Selected elements ids :
+    <span id="results"></span>
+</p>
+ +

結果

+ +

{{ EmbedLiveSample('Direct_children') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }}{{ Spec2('CSS4 Selectors') }}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_target/index.html b/files/ja/web/css/_colon_target/index.html deleted file mode 100644 index 3cfa238a57..0000000000 --- a/files/ja/web/css/_colon_target/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: ':target' -slug: 'Web/CSS/:target' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Web - - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:target' ---- -
{{CSSRef}}
- -

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

- -
/* 現在の URL のフラグメントに一致する ID を持つ要素を選択 */
-:target {
-  border: 2px solid black;
-}
- -

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

- -
http://www.example.com/index.html#section2
- -

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

- -
<section id="section2">Example</section>
- -

構文

- -{{csssyntax}} - -

例

- -

目次

- -

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

- -

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>
-
-<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>
-
- -

CSS

- -
p:target {
-  background-color: gold;
-}
-
-/* 対象要素に擬似要素を追加 */
-p:target::before {
-  font: 70% sans-serif;
-  content: "►";
-  color: limegreen;
-  margin-right: .25em;
-}
-
-/* 対象要素の中の i 要素にスタイルを適用 */
-p:target i {
-  color: red;
-}
- -

結果

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

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

- -

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

- -
注: :target 擬似クラスを使用した純粋な CSS のライトボックスのもっと完全な版は、 GitHub で利用できます (デモ)。
- -

HTML

- -
<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>
- -

CSS

- -
/* 開いていないライトボックス */
-.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;
-}
- -

結果

- -
{{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")}}
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_target/index.md b/files/ja/web/css/_colon_target/index.md new file mode 100644 index 0000000000..3cfa238a57 --- /dev/null +++ b/files/ja/web/css/_colon_target/index.md @@ -0,0 +1,214 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

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

+ +
/* 現在の URL のフラグメントに一致する ID を持つ要素を選択 */
+:target {
+  border: 2px solid black;
+}
+ +

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

+ +
http://www.example.com/index.html#section2
+ +

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

+ +
<section id="section2">Example</section>
+ +

構文

+ +{{csssyntax}} + +

例

+ +

目次

+ +

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

+ +

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>
+
+<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>
+
+ +

CSS

+ +
p:target {
+  background-color: gold;
+}
+
+/* 対象要素に擬似要素を追加 */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* 対象要素の中の i 要素にスタイルを適用 */
+p:target i {
+  color: red;
+}
+ +

結果

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

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

+ +

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

+ +
注: :target 擬似クラスを使用した純粋な CSS のライトボックスのもっと完全な版は、 GitHub で利用できます (デモ)。
+ +

HTML

+ +
<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>
+ +

CSS

+ +
/* 開いていないライトボックス */
+.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;
+}
+ +

結果

+ +
{{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")}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_visited/index.html b/files/ja/web/css/_colon_visited/index.html deleted file mode 100644 index 7209a8c259..0000000000 --- a/files/ja/web/css/_colon_visited/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: ':visited' -slug: 'Web/CSS/:visited' -tags: - - CSS - - Reference - - Selectors - - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:visited' ---- -
{{CSSRef}}
- -

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

- -
/* 訪問済みの <a> をすべて選択 */
-a:visited {
-  color: green;
-}
- -

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

- -

スタイル適用の制約

- -

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

- - - -
-

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

-
- -

構文

- -{{csssyntax}} - -

例

- -

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

- -

HTML

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

CSS

- -
a {
-  /* 該当するプロパティに不透過の既定値を設定することで、
-     :visited 状態のスタイルを定義できるようにします */
-  background-color: white;
-  border: 1px solid white;
-}
-
-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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_visited/index.md b/files/ja/web/css/_colon_visited/index.md new file mode 100644 index 0000000000..7209a8c259 --- /dev/null +++ b/files/ja/web/css/_colon_visited/index.md @@ -0,0 +1,118 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Reference + - Selectors + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:visited' +--- +
{{CSSRef}}
+ +

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

+ +
/* 訪問済みの <a> をすべて選択 */
+a:visited {
+  color: green;
+}
+ +

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

+ +

スタイル適用の制約

+ +

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

+ + + +
+

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

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

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

+ +

HTML

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

CSS

+ +
a {
+  /* 該当するプロパティに不透過の既定値を設定することで、
+     :visited 状態のスタイルを定義できるようにします */
+  background-color: white;
+  border: 1px solid white;
+}
+
+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")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf