From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/text-underline-offset/index.html | 104 ++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 files/ja/web/css/text-underline-offset/index.html (limited to 'files/ja/web/css/text-underline-offset') diff --git a/files/ja/web/css/text-underline-offset/index.html b/files/ja/web/css/text-underline-offset/index.html new file mode 100644 index 0000000000..46dab30ce4 --- /dev/null +++ b/files/ja/web/css/text-underline-offset/index.html @@ -0,0 +1,104 @@ +--- +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