From 0cf48a8e111546f6f91b987f5d214005e556c610 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Oct 2021 10:01:28 +0900 Subject: text-decoration-skip の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/text-decoration-skip/index.html | 108 ----------------------- files/ja/web/css/text-decoration-skip/index.md | 108 +++++++++++++++++++++++ 2 files changed, 108 insertions(+), 108 deletions(-) delete mode 100644 files/ja/web/css/text-decoration-skip/index.html create mode 100644 files/ja/web/css/text-decoration-skip/index.md diff --git a/files/ja/web/css/text-decoration-skip/index.html b/files/ja/web/css/text-decoration-skip/index.html deleted file mode 100644 index a429cc4cb6..0000000000 --- a/files/ja/web/css/text-decoration-skip/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: text-decoration-skip -slug: Web/CSS/text-decoration-skip -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Experimental - - Reference - - ウェブ - - レイアウト -translation_of: Web/CSS/text-decoration-skip ---- -
{{CSSRef}}
- -

text-decoration-skip は CSS のプロパティで、要素に影響する要素の内容に対するテキスト装飾のどの部分をスキップする必要があるかを設定します。これは要素によって描かれたテキスト装飾の行、および祖先によって描かれたすべてのテキスト装飾を制御します。

- -
-

メモ: 他の多くのブラウザーでは、より単純な {{cssxref("text-decoration-skip-ink")}} プロパティへの対応に集中しています。

-
- -
/* キーワード値 */
-text-decoration-skip: none;
-text-decoration-skip: objects;
-text-decoration-skip: spaces;
-text-decoration-skip: edges;
-text-decoration-skip: box-decoration;
-
-/* 複数のキーワード */
-text-decoration-skip: objects spaces;
-text-decoration-skip: leading-spaces trailing-spaces;
-text-decoration-skip: objects edges box-decoration;
-
-/* グローバル値 */
-text-decoration-skip: inherit;
-text-decoration-skip: initial;
-text-decoration-skip: unset;
-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
none
-
何もスキップされません。つまり、テキストの装飾はすべてのテキストの内容と不可分のインラインレベルボックスに渡って描かれます。
-
objects
-
要素の中で、画像やインラインブロックなどの不可分のインラインボックスのマージンボックス全体がスキップされます。
-
spaces
-
すべての空白をスキップします。すべての Unicode ホワイトスペース文字、すべての単語区切りに加えて、子孫の {{cssxref("letter-spacing")}} または {{cssxref("word-spacing")}} すべてです。
-
leading-spaces
-
先頭の空白のみがスキップされるという点を除いて、 spaces と同じです。
-
trailing-spaces
-
末尾の空白のみがスキップされるという点を除いて、 spaces と同じです。
-
edges
-
テキスト装飾の始点と終点を、装飾ボックスのコンテンツの辺からわずかに (例えば線の太さの半分だけ) 離します。つまり、子孫ボックスには個別に下線が引かれます。 (これは中国語で、区切って下線を引くのに重要です。)
-
"text-decoration-skip: edges;" の例です。
-
box-decoration
-
テキストの装飾はボックスのマージン、境界、パディング領域をスキップします。これは祖先により重ねられた装飾の効果のみを持ちます。装飾ボックスはボックスの装飾の上に描画を行いません。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p>Hey, grab a cup of <em>coffee!</em></p>
- -

CSS

- -
p {
-  margin: 0;
-  font-size: 3em;
-  text-decoration: underline;
-  text-decoration-skip: edges;
-}
- -

結果

- -

{{EmbedLiveSample("Example", "100%", 150)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}{{Spec2("CSS4 Text Decoration")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.text-decoration-skip")}}

diff --git a/files/ja/web/css/text-decoration-skip/index.md b/files/ja/web/css/text-decoration-skip/index.md new file mode 100644 index 0000000000..3c9c0ddab5 --- /dev/null +++ b/files/ja/web/css/text-decoration-skip/index.md @@ -0,0 +1,108 @@ +--- +title: text-decoration-skip +slug: Web/CSS/text-decoration-skip +tags: + - CSS + - CSS プロパティ + - CSS テキスト装飾 + - Experimental + - レイアウト + - Reference + - Web + - recipe:css-property +browser-compat: css.properties.text-decoration-skip +translation_of: Web/CSS/text-decoration-skip +--- +{{CSSRef}} + +**`text-decoration-skip`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素に影響する要素の内容に対するテキスト装飾のどの部分をスキップする必要があるかを設定します。これは要素によって描かれたテキスト装飾の行、および祖先によって描かれたすべてのテキスト装飾を制御します。 + +> **Note:** 他の多くのブラウザーでは、より単純な {{cssxref("text-decoration-skip-ink")}} プロパティへの対応に集中しています。 + +```css +/* キーワード値 */ +text-decoration-skip: none; +text-decoration-skip: objects; +text-decoration-skip: spaces; +text-decoration-skip: edges; +text-decoration-skip: box-decoration; + +/* 複数のキーワード */ +text-decoration-skip: objects spaces; +text-decoration-skip: leading-spaces trailing-spaces; +text-decoration-skip: objects edges box-decoration; + +/* グローバル値 */ +text-decoration-skip: inherit; +text-decoration-skip: initial; +text-decoration-skip: revert; +text-decoration-skip: unset; +``` + +## 構文 + +### 値 + +- `none` + - : 何もスキップされません。つまり、テキストの装飾はすべてのテキストの内容と不可分のインラインレベルボックスに渡って描かれます。 +- `objects` + - : 要素の中で、画像やインラインブロックなどの不可分のインラインボックスのマージンボックス全体がスキップされます。 +- `spaces` + - : すべての空白をスキップします。すべての [Unicode ホワイトスペース文字](https://www.unicode.org/reports/tr44/#White_Space)、すべての単語区切りに加えて、子孫の {{cssxref("letter-spacing")}} または {{cssxref("word-spacing")}} すべてです。 +- `leading-spaces` + - : 先頭の空白のみがスキップされるという点を除いて、 `spaces` と同じです。 +- `trailing-spaces` + - : 末尾の空白のみがスキップされるという点を除いて、 `spaces` と同じです。 +- `edges` + + - : テキスト装飾の始点と終点を、装飾ボックスのコンテンツの辺からわずかに (例えば線の太さの半分だけ) 離します。つまり、子孫ボックスには個別に下線が引かれます。 (これは中国語では、区切って下線を引くのに重要です。) + + !["text-decoration-skip: edges;" の例です。](decoration-skip-edges.png) + +- `box-decoration` + - : テキストの装飾はボックスのマージン、境界、パディング領域をスキップします。これは祖先により重ねられた装飾の効果のみを持ちます。*装飾ボックス*はボックスの装飾の上に描画を行いません。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +

エッジをスキップ

+ +#### HTML + +```html +

Hey, grab a cup of coffee!

+``` + +#### CSS + +```css +p { + margin: 0; + font-size: 3em; + text-decoration: underline; + text-decoration-skip: edges; +} +``` + +#### 結果 + +{{EmbedLiveSample("Skipping_edges", "100%", 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`text-decoration-skip-ink`](/ja/docs/Web/CSS/text-decoration-skip-ink) -- cgit v1.2.3-54-g00ecf