From a8026efcd3bbf9ac82b6dc432fb5b5ea08af3126 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 8 Oct 2021 01:42:14 +0900 Subject: CSS テキスト装飾の各プロパティの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/04 時点の英語版に同期 --- files/ja/web/css/text-emphasis/index.md | 138 ++++++++++++++++---------------- 1 file changed, 67 insertions(+), 71 deletions(-) (limited to 'files/ja/web/css/text-emphasis/index.md') diff --git a/files/ja/web/css/text-emphasis/index.md b/files/ja/web/css/text-emphasis/index.md index 6d0ae6bf2c..5cfe98ea06 100644 --- a/files/ja/web/css/text-emphasis/index.md +++ b/files/ja/web/css/text-emphasis/index.md @@ -3,44 +3,39 @@ title: text-emphasis slug: Web/CSS/text-emphasis tags: - CSS - - CSS テキスト装飾 - CSS プロパティ + - CSS テキスト装飾 - Reference - - text-emphasis - - text-emphasis-color - - text-emphasis-style - - 一括指定プロパティ + - recipe:css-shorthand-property +browser-compat: css.properties.text-emphasis translation_of: Web/CSS/text-emphasis --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`text-emphasis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)です。 -
{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}
+{{EmbedInteractiveExample("pages/css/text-emphasis.html")}} -

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

+`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")}} を使用してください。

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

構成要素のプロパティ

+## 構成要素のプロパティ -

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

+このプロパティは以下の CSS プロパティの一括指定です。 - +- [`text-emphasis-color`](/ja/docs/Web/CSS/text-emphasis-color) +- [`text-emphasis-style`](/ja/docs/Web/CSS/text-emphasis-style) -

構文

+## 構文 -
/* 初期値 */
+```css
+/* 初期値 */
 text-emphasis: none; /* 圏点なし */
 
-/* <string> 値 */
+/*  値 */
 text-emphasis: 'x';
 text-emphasis: '点';
 text-emphasis: '\25B2';
@@ -61,72 +56,73 @@ text-emphasis: inherit;
 text-emphasis: initial;
 text-emphasis: revert;
 text-emphasis: unset;
-
- -

- -
-
none
-
圏点なし。
-
filled
-
図形が単色で塗りつぶされます。 filledopen も指定されない場合は、これが既定値です。
-
open
-
図形が中抜きになります。
-
dot
-
記号として小さな円を表示します。 filled dot は '•' (U+2022)、 open dot は '◦' (U+25E6) です。
-
circle
-
記号として大きな円を表示します。 filled circle は '●' (U+25CF)、 open circle は '○' (U+25CB) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。
-
double-circle
-
記号として二重丸を表示します。 filled double-circle は '◉' (U+25C9)、 open double-circle は '◎' (U+25CE) です。
-
triangle
-
記号として三角形を表示します。 filled triangle は '▲' (U+25B2)、 open triangle は '△' (U+25B3) です。
-
sesame
-
記号としてゴマを表示します。 filled sesame は '﹅' (U+FE45)、 open sesame は'﹆' (U+FE46) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。
-
<string>
-
記号として文字列を表示します。 <string> には 1 文字を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。
-
<color>
-
記号の色を定義します。 color を指定しない場合、既定では currentcolor です。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

+``` + +### 値 + +- `none` + - : 圏点なし。 +- `filled` + - : 図形が単色で塗りつぶされます。 `filled` も `open` も指定されていない場合は、これが既定値です。 +- `open` + - : 図形が中抜きになります。 +- `dot` + - : 記号として小さな円を表示します。filled dot は `'•'` (`U+2022`)、open dot は `'◦'` (`U+25E6`) です。 +- `circle` + - : 記号として大きな円を表示します。filled circle は `'●'` (`U+25CF`)、open circle は `'○'` (`U+25CB`) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。 +- `double-circle` + - : 記号として二重丸を表示します。filled double-circle は `'◉'` (`U+25C9`)、open double-circle は `'◎'` (`U+25CE`) です。 +- `triangle` + - : 記号として三角形を表示します。filled triangle は `'▲'` (`U+25B2`)、open triangle は `'△'` (`U+25B3`) です。 +- `sesame` + - : 記号としてゴマを表示します。filled sesame は `'﹅'` (`U+FE45`)、open sesame は`'﹆'` (`U+FE46`) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。 +- `` + - : 記号として文字列を表示します。 `<string>` には 1 文字を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。 +- `` + - : 記号の色を定義します。 color を指定しない場合、既定では `currentcolor` です。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

+## Examples

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

-

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

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

CSS

+#### CSS -
h2 {
+```css
+h2 {
+  -webkit-text-emphasis: triangle #D55;
   text-emphasis: triangle #D55;
-}
+} +``` -

HTML

+#### HTML -
<h2>これは重要です!</h2>
+```html +

これは重要です!

+``` -

結果

+#### Result -

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

+{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 90)}} -

仕様書

+## 仕様書 {{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat}}

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • 個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}
  • -
  • 圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ。
  • -
+- 個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}} +- 圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ -- cgit v1.2.3-54-g00ecf