From bc1cbb9df788bd797455f238f6b7adacf0fc613e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 09:50:32 +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_before/index.md | 235 ++++++++++++-------------- 1 file changed, 109 insertions(+), 126 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/_doublecolon_before/index.md b/files/ja/web/css/_doublecolon_before/index.md index 64c35a440c..e6bc436acd 100644 --- a/files/ja/web/css/_doublecolon_before/index.md +++ b/files/ja/web/css/_doublecolon_before/index.md @@ -1,49 +1,51 @@ --- title: '::before (:before)' -slug: 'Web/CSS/::before' +slug: Web/CSS/::before tags: - CSS - - Layout - - Pseudo-element - - Reference - - Selector - - Web + - レイアウト + - 擬似要素 + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.before translation_of: 'Web/CSS/::before' --- -
{{CSSRef}}
+{{CSSRef}} -

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

+CSS において **`::before`** は、選択した要素の最初の子要素として[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を生成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。 -
/* リンクの前にハートを追加 */
+```css
+/* リンクの前にハートを追加 */
 a::before {
   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 では擬似クラスと擬似要素を見分けやすくするために、 ::before の表記法 (二重コロン付き) が導入されました。ブラウザーでは CSS2 で導入された :before も使用できます。

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

例

+## 例 -

引用符の追加

+### 引用符の追加 -

::before 擬似要素を使用するシンプルな例の1つ目は、引用符を追加するものです。引用符を挿入するために ::before および {{Cssxref("::after")}} の両方を使用しています。

+`::before` 擬似要素を使用するシンプルな例の一つとして、引用符を追加します。引用符を挿入するために `::before` および {{Cssxref("::after")}} の両方を使用しています。 -

HTML

+#### HTML -
<q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q>
+```html +引用があることは、彼は言った、ないよりも良い。 +``` -

CSS

+#### CSS -
q::before {
+```css
+q::before {
   content: "«";
   color: blue;
 }
@@ -51,23 +53,27 @@ a::before {
 q::after {
   content: "»";
   color: red;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}

+{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}} -

装飾の例

+### 装飾の例 -

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

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

HTML

+#### HTML -
<span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span>
+```html +オレンジのボックスがどこにあるか注意してください。 +``` -

CSS

+#### CSS -
.ribbon {
+```css
+.ribbon {
   background-color: #5BC8F7;
 }
 
@@ -76,31 +82,34 @@ q::after {
   background-color: #FFBA10;
   border-color: black;
   border-style: dotted;
-}
+} +``` -

結果

+#### 結果 -

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

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

やることリスト

+### やることリスト -

この例では、擬似要素を使用して簡単なやることリストを作成します。この方法は UI に小さな変更を加え、使い勝手を改善するためによく使われます。

+この例では、擬似要素を使用して簡単なやることリストを作成します。この方法は UI に小さな変更を加え、使い勝手を改善するためによく使われます。 -

HTML

+#### HTML -
<ul>
-  <li>牛乳を買う</li>
-  <li>犬の散歩をする</li>
-  <li>エクササイズ</li>
-  <li>コードを書く</li>
-  <li>音楽を演奏する</li>
-  <li>リラックスする</li>
-</ul>
-
+```html + +``` -

CSS

+#### CSS -
li {
+```css
+li {
   list-style-type: none;
   position: relative;
   margin: 2px;
@@ -125,45 +134,49 @@ li.done::before {
   margin-top: -1em;
   transform: rotate(45deg);
   width: 0.5em;
-}
+} +``` -

JavaScript

+#### JavaScript -
var list = document.querySelector('ul');
+```js
+var list = document.querySelector('ul');
 list.addEventListener('click', function(ev) {
   if (ev.target.tagName === 'LI') {
      ev.target.classList.toggle('done');
   }
 }, false);
-
+``` -

ここで上記のコードをライブで実行できます。なお、アイコンは使用しておらず、チェックマークは実際に CSS の ::before で整形したものです。先に進んでやってみてください。

+ここで上記のコードをライブで実行できます。なお、アイコンは使用しておらず、チェックマークは実際に CSS の `::before` で整形したものです。先に進んでやってみてください。 -

結果

+#### 結果 -

{{EmbedLiveSample('To-do_list', 400, 300)}}

+{{EmbedLiveSample('To-do_list', 400, 300)}} -

特殊文字

+### 特殊文字 -

これは CSS であり HTML ではないので、 content の値の中でエンティティのマークアップを使用することはできません。特殊文字を使用する必要がある場合で、 CSS の content の文字列に入力する場合は、 If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

+これは CSS であり HTML ではないので、 content の値の中でエンティティのマークアップを使用することは**できません**。特殊文字を使用する必要がある場合で、 CSS の content の文字列に直接入力できない場合は、バックスラッシュの後に 16 進数の Unicode 値を続ける Unicode エスケープシーケンスを使用してください。 -

HTML

+#### HTML -
<ol>
-  <li>Crack Eggs into bowl</li>
-  <li>Add Milk</li>
-  <li>Add Flour</li>
-  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
-  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
-  <li>Fry until the top of the pancake loses its gloss</li>
-  <li>Flip it over and fry for a couple more minutes</li>
-  <li>serve with your favorite topping</li>
-</ol>
-
+```html +
    +
  1. Crack Eggs into bowl
    2. +
  2. Add Milk
    3. +
  3. Add Flour
    4. +
  4. Mix thoroughly into a smooth batter
    5. +
  5. Pour a ladleful of batter onto a hot, greased, flat frying pan
    6. +
  6. Fry until the top of the pancake loses its gloss
    7. +
  7. Flip it over and fry for a couple more minutes
    8. +
  8. serve with your favorite topping
    9. +
+``` -

CSS

+#### CSS -
li {
+```css
+li {
   padding:0.5em;
 }
 
@@ -172,58 +185,28 @@ li[aria-current='step'] {
 }
 
 li[aria-current='step']::after {
-  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
+  content: " \21E6"; /* 左向きの白い矢印を表す Unicode の 16 進数 */
   display: inline;
 }
-
- -

Result

- -

{{EmbedLiveSample('Special_characters', 400, 200)}}

- -

仕様書

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

ブラウザーの互換性

- -
-

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

-
- -

関連情報

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