From 4294c2e2b1a1e6e1a54c025aa2e718655ed99eea Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 20:11:41 +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_active/index.md | 150 +++++++++++++------------------- 1 file changed, 61 insertions(+), 89 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/_colon_active/index.md b/files/ja/web/css/_colon_active/index.md index a8f6aaab1e..b150c19864 100644 --- a/files/ja/web/css/_colon_active/index.md +++ b/files/ja/web/css/_colon_active/index.md @@ -1,128 +1,100 @@ --- title: ':active' -slug: 'Web/CSS/:active' +slug: Web/CSS/:active tags: - CSS - - ウェブ - - セレクター - - リファレンス - レイアウト - - 疑似クラス -translation_of: 'Web/CSS/:active' + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.active +translation_of: Web/CSS/:active --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:active`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーによってアクティブ化されている要素 (ボタンなど) を表します。マウスを使用する場合は、「アクティブ化」とはふつう、主ボタンを押し下げたときに始まります。 -
/* アクティブ化されている <a> をすべて選択します */
+```css
+/* アクティブ化されている  をすべて選択します */
 a:active {
   color: red;
-}
+} +``` -

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

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

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

+`:active` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス （{{cssxref(":link")}}、{{cssxref(":hover")}}、 {{cssxref(":visited")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるように、他のすべてのリンク関連ルールの後に `:active` ルールを置いてください。 -
メモ: 複数ボタンのマウスを使うシステムでは、 CSS 3 は :active 擬似クラスは第1ボタン、つまり右手用のマウスではふつう一番左のボタンにのみ適用しなければならないと定義しています。
+> **Note:** 複数ボタンのマウスを使うシステムでは、 CSS 3 は `:active` 擬似クラスは主ボタン、つまり右手用のマウスではふつう最も左のボタンにのみ適用しなければならないと定義しています。 -

構文

+## 構文 {{csssyntax}} -

例

+## 例 - +### アクティブなリンク -

HTML

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

+``` -

CSS

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

結果

+#### 結果 -

{{EmbedLiveSample('Active_links')}}

+{{EmbedLiveSample('Active_links')}} -

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

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

HTML

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

CSS

+#### CSS -
form :active {
+```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")}}

-
- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample('Active_form_elements')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- リンク関連の擬似クラス: {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}} -- cgit v1.2.3-54-g00ecf