From 47edf44d954bed58ea106948ba4da399dab422bb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 19 Aug 2021 09:59:40 +0900 Subject: Web/CSS/text-emphasis を更新 (#2019) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/07/24 時点の英語版に同期 --- files/ja/web/css/text-emphasis/index.html | 71 ++++++++++++++----------------- 1 file changed, 33 insertions(+), 38 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html index 8d838fe112..6d0ae6bf2c 100644 --- a/files/ja/web/css/text-emphasis/index.html +++ b/files/ja/web/css/text-emphasis/index.html @@ -14,21 +14,28 @@ translation_of: Web/CSS/text-emphasis ---
{{CSSRef}}
-

CSS の text-emphasis プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の一括指定です。

+

text-emphasis は CSS のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の一括指定です。

{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}
- -

text-emphasis プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 text-decoration プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 text-emphasis は継承されます。これは、子孫に対して圏点を変更できることを意味します。

-

圏点の大きさは、ルビと同様にフォントの大きさの約50%であり、 text-emphasis は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。

+

圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 text-emphasis は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。

-

text-emphasis は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。稀にこれを必要とする場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。

+

text-emphasis は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これを必要とするような珍しい場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。

-

構文

+

構成要素のプロパティ

+ +

このプロパティは以下のプロパティの一括指定です。

+ + + +

構文

/* 初期値 */
 text-emphasis: none; /* 圏点なし */
@@ -38,7 +45,7 @@ text-emphasis: 'x';
 text-emphasis: '点';
 text-emphasis: '\25B2';
 text-emphasis: '*' #555;
-text-emphasis: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */
+text-emphasis: 'foo'; /* 使用するべきではない。 'f' のみとして計算や表示が行われる */
 
 /* キーワード値 */
 text-emphasis: filled;
@@ -52,18 +59,19 @@ text-emphasis: filled sesame #555;
 /* グローバル値 */
 text-emphasis: inherit;
 text-emphasis: initial;
+text-emphasis: revert;
 text-emphasis: unset;
-

値

+

値

none
圏点なし。
filled
-
図形は単色で塗りつぶされます。 filled も open も指定されない場合は、これが既定値です。
+
図形が単色で塗りつぶされます。 filled も open も指定されない場合は、これが既定値です。
open
-
図形は中抜きになります。
+
図形が中抜きになります。
dot
記号として小さな円を表示します。 filled dot は '•' (U+2022)、 open dot は '◦' (U+25E6) です。
circle
@@ -75,18 +83,22 @@ text-emphasis: unset;
sesame
記号としてゴマを表示します。 filled sesame は '﹅' (U+FE45)、 open sesame は'﹆' (U+FE46) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。
<string>
-
記号として文字列を表示します。 <string> には1文字を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。
+
記号として文字列を表示します。 <string> には 1 文字を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。
<color>
-
記号の色を定義します。 color を指定しない場合、既定では currentColor です。
+
記号の色を定義します。 color を指定しない場合、既定では currentcolor です。
-

形式文法

+

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

{{csssyntax}} -

例

+

例

-

強調して色を付けた見出し

+

強調して色を付けた見出し

この例は、見出しの各文字に三角形の圏点を付けて描画します。

@@ -100,36 +112,19 @@ text-emphasis: unset; 
<h2>これは重要です！</h2>
-

結果

+

結果

{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}

-

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義
+

仕様書

-

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

+

ブラウザーの互換性

-

{{Compat("css.properties.text-emphasis")}}

+

{{Compat}}

-

関連情報

+

関連情報