From b0794fcfaed0dde0de796e5afd2c9e65812dc20e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 02:59:36 +0900 Subject: 2021/12/21 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_doublecolon_after/index.md | 198 ++++++++++++--------------- 1 file changed, 89 insertions(+), 109 deletions(-) (limited to 'files/ja/web/css/_doublecolon_after') diff --git a/files/ja/web/css/_doublecolon_after/index.md b/files/ja/web/css/_doublecolon_after/index.md index 74e3639749..e892fa478a 100644 --- a/files/ja/web/css/_doublecolon_after/index.md +++ b/files/ja/web/css/_doublecolon_after/index.md @@ -1,74 +1,81 @@ --- title: '::after (:after)' -slug: 'Web/CSS/::after' +slug: Web/CSS/::after tags: - CSS - - ウェブ - - リファレンス - レイアウト - - 疑似要素 -translation_of: 'Web/CSS/::after' + - 擬似要素 + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.after +translation_of: Web/CSS/::after --- -
{{CSSRef}}
+{{CSSRef}} -

CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

+CSS において **`::after`** は、選択した要素の最後の子要素として[擬似要素](/ja/docs/CSS/Pseudo-elements)を生成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。 -
/* リンクの後に矢印を追加 */
-a::after {
-  content: "→";
-}
+```css +/* リンクの後に矢印を追加 */ +a::after { + content: "→"; +} +``` -
-

メモ: ::before 及び ::after によって作成される疑似要素は要素の整形ボックスに含まれるため、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような置換要素には適用されません。

-
+> **Note:** `::before` および `::after` によって作成される擬似要素は[要素の整形ボックスに含まれるため](https://www.w3.org/TR/CSS2/generate.html#before-after-content)、 {{htmlelement("img")}} や {{htmlelement("br")}} のような[置換要素](/ja/docs/Web/CSS/Replaced_element)には適用されません。 -

構文

+## 構文 -{{csssyntax}} +{{CSSSyntax}} -
-

メモ: CSS3 では疑似クラスと疑似要素を見分けやすくするために、 ::after の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :after も使用できます。

-
+> **Note:** CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::after` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:after` も使用できます。 -

例

+## 例 -

シンプルな使い方

+### シンプルな使い方 -

2つのクラスを作成しましょう。1つはつまらない段落で1つは楽しい段落です。これらのクラスを使用して、段落の最後に疑似要素を追加することができます。

+2 つのクラスを作成しましょう。 1 つはつまらない段落で 1 つは楽しい段落です。これらのクラスを使用して、段落の最後に擬似要素を追加することができます。 -

HTML

+#### HTML -
<p class="boring-text">古くつまらないテキストです。</p>
-<p>つまらなくも楽しくもないふつうのテキストです。</p>
-<p class="exciting-text">MDN への協力は簡単で楽しいものです。</p>
+```html +

古くつまらないテキストです。

+

つまらなくも楽しくもないふつうのテキストです。

+

MDN への協力は簡単で楽しいものです。

+``` -

CSS

+#### CSS -
.exciting-text::after {
-  content: " <- 楽しい！";
+```css
+.exciting-text::after {
+  content: " <- 楽しい！";
   color: green;
 }
 
 .boring-text::after {
-  content: " <- ツマラナイ！";
+  content: " <- ツマラナイ！";
   color: red;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample('Simple_usage', 500, 150)}}

+{{EmbedLiveSample('Simple_usage', 500, 150)}} -

装飾の例

+### 装飾の例 -

{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。

+{{CSSxRef("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。 -

HTML

+#### HTML -
<span class="ribbon">このテキストの後のオレンジのボックスを見てください。</span>
+```html +このテキストの後のオレンジのボックスを見てください。 +``` -

CSS

+#### CSS -
.ribbon {
+```css
+.ribbon {
   background-color: #5BC8F7;
 }
 
@@ -77,34 +84,40 @@ translation_of: 'Web/CSS/::after'
   background-color: #FFBA10;
   border-color: black;
   border-style: dotted;
-}
+} +``` + +#### 結果 -

結果

+{{EmbedLiveSample('Decorative_example', 450, 20)}} -

{{EmbedLiveSample('Decorative_example', 450, 20)}}

+### ツールチップ -

ツールチップ

+この例は、 `::after` を CSS の [`attr()`](/ja/docs/Web/CSS/attr) 関数と `data-descr` [カスタムデータ属性](/ja/docs/Web/HTML/Global_attributes/data-*)との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。 -

この例は、 ::after を CSS の attr() 関数と data-descr カスタムデータ属性との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。

+また、このテクニックを使ってキーボードユーザーに対応することもできます。 `tabindex` に `0` を追加して、それぞれの `span` をキーボードフォーカス可能にし、CSS の `:focus` セレクターを使用することでキーボードフォーカスを可能にします。これは `::before` と `::after` がいかに柔軟であるかを示しています。しかし、最もアクセスしやすいようにするには、他の方法（例えば [details および summary](/ja/docs/Web/HTML/Element/details) 要素で作成した詳細折りたたみウィジェットがより適していると思われます。 -

HTML

+#### HTML -
<p>Here we have some
-  <span data-descr="collection of words and punctuation">text</span> with a few
-  <span data-descr="small popups that appear when hovering">tooltips</span>.
-</p>
-
+```html +

Here we have some + text with a few + tooltips. +

+``` -

CSS

+#### CSS -
span[data-descr] {
+```css
+span[data-descr] {
   position: relative;
   text-decoration: underline;
   color: #00F;
   cursor: help;
 }
 
-span[data-descr]:hover::after {
+span[data-descr]:hover::after,
+span[data-descr]:focus::after {
   content: attr(data-descr);
   position: absolute;
   left: 0;
@@ -117,59 +130,26 @@ span[data-descr]:hover::after {
   color: #000000;
   font-size: 14px;
   z-index: 1;
-}
- -

結果

- -

{{EmbedLiveSample('Tooltips', 450, 120)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}前回の版から重要な変更はなし
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}{{Spec2("CSS3 Transitions")}}擬似要素で定義されたプロパティのトランジションを許可
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}{{Spec2("CSS3 Animations")}}擬似要素で定義されたプロパティのアニメーションを許可
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}2重コロンの構文を導入
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}初回定義。コロン1つの構文のみ
- -

ブラウザーの対応

- -
-

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

-
- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample('Tooltips', 450, 120)}} + +## アクセシビリティの考慮 + +`::after` 擬似要素を使用してコンテンツを追加することは、画面リーダーからアクセスできなくなる可能性があるため推奨されません。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("::before")}} +- {{CSSxRef("content")}} -- cgit v1.2.3-54-g00ecf