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-position/index.md | 195 ++++++++++++----------- 1 file changed, 106 insertions(+), 89 deletions(-) (limited to 'files/ja/web/css/text-emphasis-position/index.md') diff --git a/files/ja/web/css/text-emphasis-position/index.md b/files/ja/web/css/text-emphasis-position/index.md index 7ba827b564..5909273bf9 100644 --- a/files/ja/web/css/text-emphasis-position/index.md +++ b/files/ja/web/css/text-emphasis-position/index.md @@ -3,16 +3,19 @@ title: text-emphasis-position slug: Web/CSS/text-emphasis-position tags: - CSS - - CSS テキスト装飾 - CSS プロパティ + - CSS テキスト装飾 - Reference + - recipe:css-property +browser-compat: css.properties.text-emphasis-position translation_of: Web/CSS/text-emphasis-position --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の text-emphasis-position プロパティは、圏点が描かれる位置を設定します。ルビテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。

+**`text-emphasis-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、圏点が描かれる位置を設定します。ルビのテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。 -
/* 初期値 */
+```css
+/* 初期値 */
 text-emphasis-position: over right;
 
 /* キーワード値 */
@@ -27,115 +30,129 @@ text-emphasis-position: left under;
 /* グローバル値 */
 text-emphasis-position: inherit;
 text-emphasis-position: initial;
+text-emphasis-postition: revert;
 text-emphasis-position: unset;
-
+``` + +## 構文 -

{{cssinfo}}

+### 値 -

望ましい位置

+- `over` + - : 横書きモードでテキストの上に圏点を描きます。 +- `under` + - : 横書きモードでテキストの下に圏点を描きます。 +- `right` + - : 縦書きモードでテキストの右に圏点を描きます。 +- `left` + - : 縦書きモードでテキストの左に圏点を描きます。 -

圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は over right です。一方中国語では、望ましい位置は under right となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置を要約するものです。

+## Description + +圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は `over right` です。一方、中国語では、望ましい位置は `under right` となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置をまとめたものです。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
望ましい圏点とルビの位置
言語望ましい位置説明
横書き縦書き
日本語overright日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。
モンゴル語
中国語underright中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。
 + 望ましい圏点とルビの位置 +
言語望ましい位置図
横書き縦書き
日本語overright + 日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。 + + 日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。 +
韓国語
モンゴル語
中国語underright + 中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。 +
-
-

メモ: {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 text-emphasis-position を設定することはできず、また初期化されることもありません。

-
- -

構文

+> **Note:** {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 `text-emphasis-position` を設定することはできず、また初期化されることもありません。 -

値

+## 公式定義 -
-
over
-
横書きモードでテキストの上に圏点を描きます。
-
under
-
横書きモードでテキストの下に圏点を描きます。
-
right
-
縦書きモードでテキストの右に圏点を描きます。
-
left
-
縦書きモードでテキストの左に圏点を描きます。
-
+{{CSSInfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## Examples + +### ルビを圏点より優先させる場合 -

編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。

+編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。 -
ruby {
+```css
+ruby {
+  -webkit-text-emphasis: none;
   text-emphasis: none;
 }
-
+``` -

編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。

+### 圏点よりルビを優先させる場合 -
em {
-  text-emphasis: dot; /* <em> 要素に text-emphasis を設定 */
+編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。
+
+```css
+em {
+  -webkit-text-emphasis: dot;
+  text-emphasis: dot; /* text-emphasis を  要素に設定 */
 }
 
 em rt {
-  display: none; /* <em> 要素内のルビを隠す */
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義
+ display: none; /* 要素内のルビを隠す */ +} +``` + +## 仕様書 + +{{Specifications}} -

ブラウザーの対応

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

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

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • 個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}}
    • -
+- 個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}} -- cgit v1.2.3-54-g00ecf