From 4734c0065bab5ff7f4092ab55b1a8659ed946487 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 4 Oct 2021 10:26:57 +0900 Subject: Web/CSS/text-underline-offset の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/text-underline-offset/index.html | 102 ---------------------- files/ja/web/css/text-underline-offset/index.md | 102 ++++++++++++++++++++++ 2 files changed, 102 insertions(+), 102 deletions(-) delete mode 100644 files/ja/web/css/text-underline-offset/index.html create mode 100644 files/ja/web/css/text-underline-offset/index.md diff --git a/files/ja/web/css/text-underline-offset/index.html b/files/ja/web/css/text-underline-offset/index.html deleted file mode 100644 index fd95b1560c..0000000000 --- a/files/ja/web/css/text-underline-offset/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: text-underline-offset -slug: Web/CSS/text-underline-offset -tags: - - CSS - - CSS Text Decoration - - CSS テキスト装飾 - - Property - - Reference - - text-decoration - - text-underline-offset - - プロパティ -translation_of: Web/CSS/text-underline-offset ---- -
{{CSSRef}}
- -

text-underline-offset は CSS のプロパティで、 ({{cssxref("text-decoration")}} を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。

- -

text-underline-offset は {{cssxref('text-decoration')}} の一括指定の一部ではありません。一つの要素が複数の text-decoration による線を持つため、 text-underline-offset は下線のみに影響し、 overline や line-through などの他の装飾線には影響しません。

- -

構文

- -
/* 単一のキーワード */
-text-underline-offset: auto;
-
-/* 長さ */
-text-underline-offset: 0.1em;
-text-underline-offset: 3px;
-
-/* パーセント値 */
-text-underline-offset: 20%;
-
-/* グローバル値 */
-text-underline-offset: inherit;
-text-underline-offset: initial;
-text-underline-offset: unset;
-
- -

text-underline-offset プロパティは、以下のリストのうち一つの値で指定します。

- -

値

- -
-
auto
-
ブラウザーが下線の適切なオフセットを選択します。
-
<length>
-
下線のオフセットを {{cssxref('length')}} で指定し、フォントファイルの提案やブラウザーの既定値を上書きします。オフセットがフォントサイズに合わせて変化するように、 em 単位を使用することを推奨します。
-
<percentage>
-
下線のオフセットを、要素のフォントにおける 1 em に対する {{cssxref('percentage')}} で指定します。パーセント値はは相対値として継承されるため、フォントの変化に応じて変化します。このプロパティを適用した場合、オフセットは、フォントサイズや垂直方向の配置が異なる子要素があっても、下線が適用されているボックス全体で一定となります。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
<p class="oneline">Here's some text with an offset wavy red underline!</p>
-<br>
-<p class="twolines">This text has lines both above and below it. Only the bottom one is offset.</p>
- -
p {
-  text-decoration: underline wavy red;
-  text-underline-offset: 1em;
-}
-
-.twolines {
-  text-decoration-color: purple;
-  text-decoration-line: underline overline;
-}
- -

{{ EmbedLiveSample('Examples', '', '', '') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Text Decoration', '#underline-offset', 'text-underline-offset')}}{{Spec2('CSS4 Text Decoration')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.text-underline-offset")}}

- -

関連情報

- - diff --git a/files/ja/web/css/text-underline-offset/index.md b/files/ja/web/css/text-underline-offset/index.md new file mode 100644 index 0000000000..fd95b1560c --- /dev/null +++ b/files/ja/web/css/text-underline-offset/index.md @@ -0,0 +1,102 @@ +--- +title: text-underline-offset +slug: Web/CSS/text-underline-offset +tags: + - CSS + - CSS Text Decoration + - CSS テキスト装飾 + - Property + - Reference + - text-decoration + - text-underline-offset + - プロパティ +translation_of: Web/CSS/text-underline-offset +--- +
{{CSSRef}}
+ +

text-underline-offset は CSS のプロパティで、 ({{cssxref("text-decoration")}} を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。

+ +

text-underline-offset は {{cssxref('text-decoration')}} の一括指定の一部ではありません。一つの要素が複数の text-decoration による線を持つため、 text-underline-offset は下線のみに影響し、 overline や line-through などの他の装飾線には影響しません。

+ +

構文

+ +
/* 単一のキーワード */
+text-underline-offset: auto;
+
+/* 長さ */
+text-underline-offset: 0.1em;
+text-underline-offset: 3px;
+
+/* パーセント値 */
+text-underline-offset: 20%;
+
+/* グローバル値 */
+text-underline-offset: inherit;
+text-underline-offset: initial;
+text-underline-offset: unset;
+
+ +

text-underline-offset プロパティは、以下のリストのうち一つの値で指定します。

+ +

値

+ +
+
auto
+
ブラウザーが下線の適切なオフセットを選択します。
+
<length>
+
下線のオフセットを {{cssxref('length')}} で指定し、フォントファイルの提案やブラウザーの既定値を上書きします。オフセットがフォントサイズに合わせて変化するように、 em 単位を使用することを推奨します。
+
<percentage>
+
下線のオフセットを、要素のフォントにおける 1 em に対する {{cssxref('percentage')}} で指定します。パーセント値はは相対値として継承されるため、フォントの変化に応じて変化します。このプロパティを適用した場合、オフセットは、フォントサイズや垂直方向の配置が異なる子要素があっても、下線が適用されているボックス全体で一定となります。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
<p class="oneline">Here's some text with an offset wavy red underline!</p>
+<br>
+<p class="twolines">This text has lines both above and below it. Only the bottom one is offset.</p>
+ +
p {
+  text-decoration: underline wavy red;
+  text-underline-offset: 1em;
+}
+
+.twolines {
+  text-decoration-color: purple;
+  text-decoration-line: underline overline;
+}
+ +

{{ EmbedLiveSample('Examples', '', '', '') }}

+ +

仕様書

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

ブラウザーの互換性

+ +

{{Compat("css.properties.text-underline-offset")}}

+ +

関連情報

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