From 5968326af62c0f7cc1c46ca6c6cece37ec550ba1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 8 Oct 2021 01:29:38 +0900 Subject: CSS テキスト装飾関係のプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/text-emphasis/index.md | 132 ++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/ja/web/css/text-emphasis/index.md (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 new file mode 100644 index 0000000000..6d0ae6bf2c --- /dev/null +++ b/files/ja/web/css/text-emphasis/index.md @@ -0,0 +1,132 @@ +--- +title: text-emphasis +slug: Web/CSS/text-emphasis +tags: + - CSS + - CSS テキスト装飾 + - CSS プロパティ + - Reference + - text-emphasis + - text-emphasis-color + - text-emphasis-style + - 一括指定プロパティ +translation_of: Web/CSS/text-emphasis +--- +
{{CSSRef}}
+ +

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 は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。

+ +
+

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

+
+ +

構成要素のプロパティ

+ +

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

+ + + +

構文

+ +
/* 初期値 */
+text-emphasis: none; /* 圏点なし */
+
+/* <string> 値 */
+text-emphasis: 'x';
+text-emphasis: '点';
+text-emphasis: '\25B2';
+text-emphasis: '*' #555;
+text-emphasis: 'foo'; /* 使用するべきではない。 'f' のみとして計算や表示が行われる */
+
+/* キーワード値 */
+text-emphasis: filled;
+text-emphasis: open;
+text-emphasis: filled sesame;
+text-emphasis: open sesame;
+
+/* 色と組み合わせたキーワード値 */
+text-emphasis: filled sesame #555;
+
+/* グローバル値 */
+text-emphasis: inherit;
+text-emphasis: initial;
+text-emphasis: revert;
+text-emphasis: unset;
+
+ +

値

+ +
+
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>
+
記号として文字列を表示します。 <string> には 1 文字を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。
+
<color>
+
記号の色を定義します。 color を指定しない場合、既定では currentcolor です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

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

+ +

CSS

+ +
h2 {
+  text-emphasis: triangle #D55;
+}
+ +

HTML

+ +
<h2>これは重要です！</h2>
+ +

結果

+ +

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

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf