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-decoration-color/index.html | 109 --------------- files/ja/web/css/text-decoration-color/index.md | 109 +++++++++++++++ files/ja/web/css/text-decoration-line/index.html | 107 --------------- files/ja/web/css/text-decoration-line/index.md | 107 +++++++++++++++ .../ja/web/css/text-decoration-skip-ink/index.html | 116 ---------------- files/ja/web/css/text-decoration-skip-ink/index.md | 116 ++++++++++++++++ files/ja/web/css/text-decoration-style/index.html | 113 --------------- files/ja/web/css/text-decoration-style/index.md | 113 +++++++++++++++ .../web/css/text-decoration-thickness/index.html | 124 ----------------- .../ja/web/css/text-decoration-thickness/index.md | 124 +++++++++++++++++ files/ja/web/css/text-decoration/index.html | 151 --------------------- files/ja/web/css/text-decoration/index.md | 151 +++++++++++++++++++++ files/ja/web/css/text-emphasis-color/index.html | 92 ------------- files/ja/web/css/text-emphasis-color/index.md | 92 +++++++++++++ files/ja/web/css/text-emphasis-position/index.html | 141 ------------------- files/ja/web/css/text-emphasis-position/index.md | 141 +++++++++++++++++++ files/ja/web/css/text-emphasis-style/index.html | 107 --------------- files/ja/web/css/text-emphasis-style/index.md | 107 +++++++++++++++ files/ja/web/css/text-emphasis/index.html | 132 ------------------ files/ja/web/css/text-emphasis/index.md | 132 ++++++++++++++++++ files/ja/web/css/text-shadow/index.html | 150 -------------------- files/ja/web/css/text-shadow/index.md | 150 ++++++++++++++++++++ 22 files changed, 1342 insertions(+), 1342 deletions(-) delete mode 100644 files/ja/web/css/text-decoration-color/index.html create mode 100644 files/ja/web/css/text-decoration-color/index.md delete mode 100644 files/ja/web/css/text-decoration-line/index.html create mode 100644 files/ja/web/css/text-decoration-line/index.md delete mode 100644 files/ja/web/css/text-decoration-skip-ink/index.html create mode 100644 files/ja/web/css/text-decoration-skip-ink/index.md delete mode 100644 files/ja/web/css/text-decoration-style/index.html create mode 100644 files/ja/web/css/text-decoration-style/index.md delete mode 100644 files/ja/web/css/text-decoration-thickness/index.html create mode 100644 files/ja/web/css/text-decoration-thickness/index.md delete mode 100644 files/ja/web/css/text-decoration/index.html create mode 100644 files/ja/web/css/text-decoration/index.md delete mode 100644 files/ja/web/css/text-emphasis-color/index.html create mode 100644 files/ja/web/css/text-emphasis-color/index.md delete mode 100644 files/ja/web/css/text-emphasis-position/index.html create mode 100644 files/ja/web/css/text-emphasis-position/index.md delete mode 100644 files/ja/web/css/text-emphasis-style/index.html create mode 100644 files/ja/web/css/text-emphasis-style/index.md delete mode 100644 files/ja/web/css/text-emphasis/index.html create mode 100644 files/ja/web/css/text-emphasis/index.md delete mode 100644 files/ja/web/css/text-shadow/index.html create mode 100644 files/ja/web/css/text-shadow/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html deleted file mode 100644 index f41da12a5c..0000000000 --- a/files/ja/web/css/text-decoration-color/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: text-decoration-color -slug: Web/CSS/text-decoration-color -tags: - - CSS - - CSS Property - - CSS Text - - CSS Text Decoration - - HTML Colors - - HTML Styles - - Reference - - Styling HTML - - Styling text - - color - - colors - - 'recipe:css-property' -browser-compat: css.properties.text-decoration-color -translation_of: Web/CSS/text-decoration-color ---- -
{{ CSSRef }}
- -

text-decoration-color は CSS のプロパティで、 {{ cssxref("text-decoration-line") }} でテキストに追加された装飾の色を設定します。

- -

色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。

- -
{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}
- - -

CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。

- -

構文

- -
/* <color> 値 */
-text-decoration-color: currentcolor;
-text-decoration-color: red;
-text-decoration-color: #00ff00;
-text-decoration-color: rgba(255, 128, 128, 0.5);
-text-decoration-color: transparent;
-
-/* グローバル値 */
-text-decoration-color: inherit;
-text-decoration-color: initial;
-text-decoration-color: revert;
-text-decoration-color: unset;
-
- -

値

- -
-
{{cssxref("<color>")}}
-
装飾線の色です。
-
- -

アクセシビリティの考慮

- -

テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。

- -

色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。

- - - -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

基本的な例

- -
<p>This paragraph has <s>some erroneous text</s>
-    inside it that I want to call attention to.</p>
- -
p {
-  text-decoration-line: underline;
-  text-decoration-color: cyan;
-}
-
-s {
-  text-decoration-line: line-through;
-  text-decoration-color: red;
-  text-decoration-style: wavy;
-}
- -

{{ EmbedLiveSample('Examples') }}

- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - diff --git a/files/ja/web/css/text-decoration-color/index.md b/files/ja/web/css/text-decoration-color/index.md new file mode 100644 index 0000000000..f41da12a5c --- /dev/null +++ b/files/ja/web/css/text-decoration-color/index.md @@ -0,0 +1,109 @@ +--- +title: text-decoration-color +slug: Web/CSS/text-decoration-color +tags: + - CSS + - CSS Property + - CSS Text + - CSS Text Decoration + - HTML Colors + - HTML Styles + - Reference + - Styling HTML + - Styling text + - color + - colors + - 'recipe:css-property' +browser-compat: css.properties.text-decoration-color +translation_of: Web/CSS/text-decoration-color +--- +
{{ CSSRef }}
+ +

text-decoration-color は CSS のプロパティで、 {{ cssxref("text-decoration-line") }} でテキストに追加された装飾の色を設定します。

+ +

色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。

+ +
{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}
+ + +

CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。

+ +

構文

+ +
/* <color> 値 */
+text-decoration-color: currentcolor;
+text-decoration-color: red;
+text-decoration-color: #00ff00;
+text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: transparent;
+
+/* グローバル値 */
+text-decoration-color: inherit;
+text-decoration-color: initial;
+text-decoration-color: revert;
+text-decoration-color: unset;
+
+ +

値

+ +
+
{{cssxref("<color>")}}
+
装飾線の色です。
+
+ +

アクセシビリティの考慮

+ +

テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。

+ +

色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。

+ + + +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +
<p>This paragraph has <s>some erroneous text</s>
+    inside it that I want to call attention to.</p>
+ +
p {
+  text-decoration-line: underline;
+  text-decoration-color: cyan;
+}
+
+s {
+  text-decoration-line: line-through;
+  text-decoration-color: red;
+  text-decoration-style: wavy;
+}
+ +

{{ EmbedLiveSample('Examples') }}

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-decoration-line/index.html b/files/ja/web/css/text-decoration-line/index.html deleted file mode 100644 index b64e8c68c1..0000000000 --- a/files/ja/web/css/text-decoration-line/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: text-decoration-line -slug: Web/CSS/text-decoration-line -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Reference -translation_of: Web/CSS/text-decoration-line ---- -
{{CSSRef}}
- -

CSS の text-decoration-line プロパティは、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。

- -
{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}
- - - -

複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。

- -

構文

- -
/* 単一のキーワード */
-text-decoration-line: none;
-text-decoration-line: underline;
-text-decoration-line: overline;
-text-decoration-line: line-through;
-text-decoration-line: blink;
-
-/* 複数のキーワード */
-text-decoration-line: underline overline;               /* 2つの装飾線 */
-text-decoration-line: overline underline line-through;  /* 複数の装飾線 */
-
-/* グローバル値 */
-text-decoration-line: inherit;
-text-decoration-line: initial;
-text-decoration-line: unset;
-
- -

text-decoration-line プロパティは none または以下のリストにある1つ以上の空白で区切られた値を指定します。

- -

値

- -
-
none
-
テキストの装飾を行いません。
-
underline
-
テキストの各行に下線を引きます。
-
overline
-
テキストの各行の上線を引きます。
-
line-through
-
テキストの各行の中央を貫く線を引きます。
-
blink {{deprecated_inline}}
-
テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は非推奨であり、 CSS アニメーションに取って代わりました。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
<p class="wavy">Here's some text with wavy red underline!</p>
-<p class="both">This text has lines both above and below it.</p>
- -
.wavy {
-  text-decoration-line: underline;
-  text-decoration-style: wavy;
-  text-decoration-color: red;
-}
-
-.both {
-  text-decoration-line: underline overline;
-}
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}{{Spec2('CSS3 Text Decoration')}}初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

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

CSS の text-decoration-line プロパティは、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。

+ +
{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}
+ + + +

複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。

+ +

構文

+ +
/* 単一のキーワード */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+text-decoration-line: blink;
+
+/* 複数のキーワード */
+text-decoration-line: underline overline;               /* 2つの装飾線 */
+text-decoration-line: overline underline line-through;  /* 複数の装飾線 */
+
+/* グローバル値 */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+
+ +

text-decoration-line プロパティは none または以下のリストにある1つ以上の空白で区切られた値を指定します。

+ +

値

+ +
+
none
+
テキストの装飾を行いません。
+
underline
+
テキストの各行に下線を引きます。
+
overline
+
テキストの各行の上線を引きます。
+
line-through
+
テキストの各行の中央を貫く線を引きます。
+
blink {{deprecated_inline}}
+
テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は非推奨であり、 CSS アニメーションに取って代わりました。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
<p class="wavy">Here's some text with wavy red underline!</p>
+<p class="both">This text has lines both above and below it.</p>
+ +
.wavy {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+
+.both {
+  text-decoration-line: underline overline;
+}
+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}{{Spec2('CSS3 Text Decoration')}}初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-decoration-skip-ink/index.html b/files/ja/web/css/text-decoration-skip-ink/index.html deleted file mode 100644 index 587f6629c7..0000000000 --- a/files/ja/web/css/text-decoration-skip-ink/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: text-decoration-skip-ink -slug: Web/CSS/text-decoration-skip-ink -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Experimental - - Reference - - Web - - text-decoration-skip-ink - - ウェブ - - レイアウト -translation_of: Web/CSS/text-decoration-skip-ink ---- -
{{CSSRef}}
- -

CSS の text-decoration-skip-ink プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。

- -
{{EmbedInteractiveExample("pages/css/text-decoration-skip-ink.html")}}
- - - -

text-decoration-skip-ink は {{cssxref("text-decoration")}} 一括指定の一部ではありません。

- -

構文

- -
/* 単一キーワード */
-text-decoration-skip-ink: none;
-text-decoration-skip-ink: auto;
-text-decoration-skip-ink: all;
-
-/* グローバルキーワード */
-text-decoration-skip: inherit;
-text-decoration-skip: initial;
-text-decoration-skip: unset;
-
- -

値

- -
-
none
-
下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。
-
auto
-
既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う可能性があります。つまり、線が文字を横切ろうとするところで中断されます。
-
all
-
ブラウザーは、下線や上線が文字に触れたり近づいたりしないように必ず中断を行います。これは、 auto の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。
-
"text-decoration-skip-ink" の例
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p>You should go on a quest for a cup of coffee.</p>
-<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
-<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
-<p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p>
-
- -

CSS

- -
p {
-  font-size: 1.5em;
-  text-decoration: underline blue;
-  text-decoration-skip-ink: auto; /* this is the default anyway */
-}
-
-.no-skip-ink {
-  text-decoration-skip-ink: none;
-}
-
-.skip-ink-all{
-  text-decoration-skip-ink: all;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples", "100%", 250)}}

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/text-decoration-skip-ink/index.md b/files/ja/web/css/text-decoration-skip-ink/index.md new file mode 100644 index 0000000000..587f6629c7 --- /dev/null +++ b/files/ja/web/css/text-decoration-skip-ink/index.md @@ -0,0 +1,116 @@ +--- +title: text-decoration-skip-ink +slug: Web/CSS/text-decoration-skip-ink +tags: + - CSS + - CSS テキスト装飾 + - CSS プロパティ + - Experimental + - Reference + - Web + - text-decoration-skip-ink + - ウェブ + - レイアウト +translation_of: Web/CSS/text-decoration-skip-ink +--- +
{{CSSRef}}
+ +

CSS の text-decoration-skip-ink プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。

+ +
{{EmbedInteractiveExample("pages/css/text-decoration-skip-ink.html")}}
+ + + +

text-decoration-skip-ink は {{cssxref("text-decoration")}} 一括指定の一部ではありません。

+ +

構文

+ +
/* 単一キーワード */
+text-decoration-skip-ink: none;
+text-decoration-skip-ink: auto;
+text-decoration-skip-ink: all;
+
+/* グローバルキーワード */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+
+ +

値

+ +
+
none
+
下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。
+
auto
+
既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う可能性があります。つまり、線が文字を横切ろうとするところで中断されます。
+
all
+
ブラウザーは、下線や上線が文字に触れたり近づいたりしないように必ず中断を行います。これは、 auto の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。
+
"text-decoration-skip-ink" の例
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p>You should go on a quest for a cup of coffee.</p>
+<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
+<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
+<p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p>
+
+ +

CSS

+ +
p {
+  font-size: 1.5em;
+  text-decoration: underline blue;
+  text-decoration-skip-ink: auto; /* this is the default anyway */
+}
+
+.no-skip-ink {
+  text-decoration-skip-ink: none;
+}
+
+.skip-ink-all{
+  text-decoration-skip-ink: all;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", "100%", 250)}}

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-decoration-style/index.html b/files/ja/web/css/text-decoration-style/index.html deleted file mode 100644 index 76e20dd2f2..0000000000 --- a/files/ja/web/css/text-decoration-style/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: text-decoration-style -slug: Web/CSS/text-decoration-style -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Layout - - Reference - - レイアウト -translation_of: Web/CSS/text-decoration-style ---- -
{{CSSRef}}
- -

CSS の text-decoration-style プロパティは、 {{ cssxref("text-decoration-line") }} で指定された線の種類を設定します。線の種類はすべての線に適用され text-decoration-line で定義された線ごとに異なる種類を定義する方法はありません。

- -
{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}
- - - -

文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 {{HTMLElement("del")}} や {{HTMLElement("s")}} といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。

- -

線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。

- -

構文

- -
/* キーワード値 */
-text-decoration-style: solid;
-text-decoration-style: double;
-text-decoration-style: dotted;
-text-decoration-style: dashed;
-text-decoration-style: wavy;
-
-/* グローバル値 */
-text-decoration-style: inherit;
-text-decoration-style: initial;
-text-decoration-style: unset;
-
- -

値

- -
-
solid
-
単独線を描画します。
-
double
-
二重線を描画します。
-
dotted
-
点線を描画します。
-
dashed
-
破線を描画します。
-
wavy
-
波線を描画します。
-
-moz-none{{ non-standard_inline }}
-
線を描画しません。代わりに {{ cssxref("text-decoration-line") }}: none を使用してください。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
.example {
-       -moz-text-decoration-line: underline;
-       -moz-text-decoration-style: wavy;
-       -moz-text-decoration-color: red;
-    -webkit-text-decoration-line: underline;
-    -webkit-text-decoration-style: wavy;
-    -webkit-text-decoration-color: red;
-}
- -
.wavy {
-  text-decoration-line: underline;
-  text-decoration-style: wavy;
-  text-decoration-color: red;
-}
-
- -
<p class="wavy">This text has a wavy red line beneath it.</p>
-
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}{{ Spec2('CSS3 Text Decoration') }}初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義するための一括指定になりました。
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/text-decoration-style/index.md b/files/ja/web/css/text-decoration-style/index.md new file mode 100644 index 0000000000..76e20dd2f2 --- /dev/null +++ b/files/ja/web/css/text-decoration-style/index.md @@ -0,0 +1,113 @@ +--- +title: text-decoration-style +slug: Web/CSS/text-decoration-style +tags: + - CSS + - CSS テキスト装飾 + - CSS プロパティ + - Layout + - Reference + - レイアウト +translation_of: Web/CSS/text-decoration-style +--- +
{{CSSRef}}
+ +

CSS の text-decoration-style プロパティは、 {{ cssxref("text-decoration-line") }} で指定された線の種類を設定します。線の種類はすべての線に適用され text-decoration-line で定義された線ごとに異なる種類を定義する方法はありません。

+ +
{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}
+ + + +

文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 {{HTMLElement("del")}} や {{HTMLElement("s")}} といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。

+ +

線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。

+ +

構文

+ +
/* キーワード値 */
+text-decoration-style: solid;
+text-decoration-style: double;
+text-decoration-style: dotted;
+text-decoration-style: dashed;
+text-decoration-style: wavy;
+
+/* グローバル値 */
+text-decoration-style: inherit;
+text-decoration-style: initial;
+text-decoration-style: unset;
+
+ +

値

+ +
+
solid
+
単独線を描画します。
+
double
+
二重線を描画します。
+
dotted
+
点線を描画します。
+
dashed
+
破線を描画します。
+
wavy
+
波線を描画します。
+
-moz-none{{ non-standard_inline }}
+
線を描画しません。代わりに {{ cssxref("text-decoration-line") }}: none を使用してください。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
.example {
+       -moz-text-decoration-line: underline;
+       -moz-text-decoration-style: wavy;
+       -moz-text-decoration-color: red;
+    -webkit-text-decoration-line: underline;
+    -webkit-text-decoration-style: wavy;
+    -webkit-text-decoration-color: red;
+}
+ +
.wavy {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+
+ +
<p class="wavy">This text has a wavy red line beneath it.</p>
+
+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}{{ Spec2('CSS3 Text Decoration') }}初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義するための一括指定になりました。
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-decoration-thickness/index.html b/files/ja/web/css/text-decoration-thickness/index.html deleted file mode 100644 index 63fcce1a71..0000000000 --- a/files/ja/web/css/text-decoration-thickness/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: text-decoration-thickness -slug: Web/CSS/text-decoration-thickness -tags: - - CSS - - CSS Text Decoration - - Property - - Reference - - 'recipe:css-property' - - text-decoration - - text-decoration-thickness -translation_of: Web/CSS/text-decoration-thickness ---- -
{{CSSRef}}
- -

text-decoration-thickness は CSS のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。

- -

構文

- -
/* 単独のキーワード */
-text-decoration-thickness: auto;
-text-decoration-thickness: from-font;
-
-/* 長さ */
-text-decoration-thickness: 0.1em;
-text-decoration-thickness: 3px;
-
-/* パーセント値 */
-text-decoration-thickness: 10%;
-
-/* グローバル値 */
-text-decoration-thickness: inherit;
-text-decoration-thickness: initial;
-text-decoration-thickness: unset;
-
- -

値

- -
-
auto
-
ブラウザーがテキスト装飾線の適切な太さを選択します。
-
from-font
-
フォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、 auto が設定されているのと同様に動作し、ブラウザーが適切な太さを選択します。
-
<length>
-
テキスト装飾線の太さを {{cssxref('length')}} として指定し、フォントファイルの推奨値やブラウザーの既定値を無視します。
-
<percentage>
-
テキスト装飾線の太さを現在のフォントの 1em に対する {{cssxref('percentage')}} で指定します。パーセント値は相対値として継承されるので、フォントが変わるとそれに合わせて変わります。ブラウザーは最小でも 1 デバイスピクセルを使用しなければなりません。このプロパティを適用した場合、フォントの大きさが異なる子要素があっても、適用されたボックス全体で太さが一定になります。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

様々な太さ

- -

HTML

- -
<p class="thin">赤い 1px の下線を引いたテキストです。</p>
-<p class="thick">赤い 5px の下線を引いたテキストです。</p>
-<p class="shorthand">これは同等の一括指定を使用しています。</p>
- -

CSS

- -
.thin {
-  text-decoration-line: underline;
-  text-decoration-style: solid;
-  text-decoration-color: red;
-  text-decoration-thickness: 1px;
-}
-
-.thick {
-  text-decoration-line: underline;
-  text-decoration-style: solid;
-  text-decoration-color: red;
-  text-decoration-thickness: 5px;
-}
-
-.shorthand {
-  text-decoration: underline solid red 5px;
-}
- -

結果

- -

{{ EmbedLiveSample('Varying_thickness', '', '', '') }}

- -

仕様書

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

注: このプロパティは text-decoration-width と呼ばれていましたが、 2019 年に text-decoration-thickness に更新されました。

-
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/text-decoration-thickness/index.md b/files/ja/web/css/text-decoration-thickness/index.md new file mode 100644 index 0000000000..63fcce1a71 --- /dev/null +++ b/files/ja/web/css/text-decoration-thickness/index.md @@ -0,0 +1,124 @@ +--- +title: text-decoration-thickness +slug: Web/CSS/text-decoration-thickness +tags: + - CSS + - CSS Text Decoration + - Property + - Reference + - 'recipe:css-property' + - text-decoration + - text-decoration-thickness +translation_of: Web/CSS/text-decoration-thickness +--- +
{{CSSRef}}
+ +

text-decoration-thickness は CSS のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。

+ +

構文

+ +
/* 単独のキーワード */
+text-decoration-thickness: auto;
+text-decoration-thickness: from-font;
+
+/* 長さ */
+text-decoration-thickness: 0.1em;
+text-decoration-thickness: 3px;
+
+/* パーセント値 */
+text-decoration-thickness: 10%;
+
+/* グローバル値 */
+text-decoration-thickness: inherit;
+text-decoration-thickness: initial;
+text-decoration-thickness: unset;
+
+ +

値

+ +
+
auto
+
ブラウザーがテキスト装飾線の適切な太さを選択します。
+
from-font
+
フォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、 auto が設定されているのと同様に動作し、ブラウザーが適切な太さを選択します。
+
<length>
+
テキスト装飾線の太さを {{cssxref('length')}} として指定し、フォントファイルの推奨値やブラウザーの既定値を無視します。
+
<percentage>
+
テキスト装飾線の太さを現在のフォントの 1em に対する {{cssxref('percentage')}} で指定します。パーセント値は相対値として継承されるので、フォントが変わるとそれに合わせて変わります。ブラウザーは最小でも 1 デバイスピクセルを使用しなければなりません。このプロパティを適用した場合、フォントの大きさが異なる子要素があっても、適用されたボックス全体で太さが一定になります。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

様々な太さ

+ +

HTML

+ +
<p class="thin">赤い 1px の下線を引いたテキストです。</p>
+<p class="thick">赤い 5px の下線を引いたテキストです。</p>
+<p class="shorthand">これは同等の一括指定を使用しています。</p>
+ +

CSS

+ +
.thin {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-color: red;
+  text-decoration-thickness: 1px;
+}
+
+.thick {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-color: red;
+  text-decoration-thickness: 5px;
+}
+
+.shorthand {
+  text-decoration: underline solid red 5px;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Varying_thickness', '', '', '') }}

+ +

仕様書

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

注: このプロパティは text-decoration-width と呼ばれていましたが、 2019 年に text-decoration-thickness に更新されました。

+
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-decoration/index.html b/files/ja/web/css/text-decoration/index.html deleted file mode 100644 index 8e77aba241..0000000000 --- a/files/ja/web/css/text-decoration/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: text-decoration -slug: Web/CSS/text-decoration -tags: - - CSS - - CSS Property - - CSS Text Decoration - - Reference - - 'recipe:css-shorthand-property' - - text-decoration - - text-decoration-color - - text-decoration-line - - text-decoration-style -translation_of: Web/CSS/text-decoration ---- -
{{CSSRef}}
- -

text-decoration は CSS の 一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} およびさらに新しい {{cssxref("text-decoration-thickness")}} プロパティの一括指定です。

- -
{{EmbedInteractiveExample("pages/css/text-decoration.html")}}
- -

文字列の装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、 <p>This text has <em>some emphasized words</em> in it.</p> というマークアップと、 p { text-decoration: underline; } のスタイル規則では、段落全体に下線が引かれます。 em { text-decoration: none; } のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 em { text-decoration: overline; } の規則で "some emphasized words" に第二の装飾が施されます。

- -

構成要素のプロパティ

- -

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

- - - -

構文

- -

text-decoration プロパティは、個別指定の text-decoration プロパティを表す 1 つまたは複数の値を空白で区切って指定します。

- -

値

- -
-
{{cssxref("text-decoration-line")}}
-
使用する装飾の種類を設定します。 underline や line-through などです。
-
{{cssxref("text-decoration-color")}}
-
装飾の色を設定します。
-
{{cssxref("text-decoration-style")}}
-
装飾に使用する線のスタイルを設定します。 solid, wavy, dashed などです。
-
{{cssxref("text-decoration-thickness")}}
-
装飾に使われる線の太さを設定します。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

text-decoration の値のデモ

- -
.under {
-  text-decoration: underline red;
-}
-
-.over {
-  text-decoration: wavy overline lime;
-}
-
-.line {
-  text-decoration: line-through;
-}
-
-.plain {
-  text-decoration: none;
-}
-
-.underover {
-  text-decoration: dashed underline overline;
-}
-
-.thick {
-  text-decoration: solid underline purple 4px;
-}
-
-.blink {
-  text-decoration: blink;
-}
-
- -
<p class="under">This text has a line underneath it.</p>
-<p class="over">This text has a line over it.</p>
-<p class="line">This text has a line going through it.</p>
-<p>This <a class="plain" href="#">link will not be underlined</a>,
-    as links generally are by default. Be careful when removing
-    the text decoration on anchors since users often depend on
-    the underline to denote hyperlinks.</p>
-<p class="underover">This text has lines above <em>and</em> below it.</p>
-<p class="thick">This text has a really thick purple underline in supporting browsers.</p>
-<p class="blink">This text might blink for you,
-    depending on the browser you use.</p>
-
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Text Decoration')}}{{Spec2('CSS4 Text Decoration')}}{{cssxref("text-decoration-thickness")}} を追加。なお、これはまだ公式には一括指定の一部ではありません。これはまだ未定義です。
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}}一括指定プロパティへ変更。 {{cssxref('text-decoration-style')}} の値への対応を追加。
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}実質的な変更なし。
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/text-decoration/index.md b/files/ja/web/css/text-decoration/index.md new file mode 100644 index 0000000000..8e77aba241 --- /dev/null +++ b/files/ja/web/css/text-decoration/index.md @@ -0,0 +1,151 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - CSS + - CSS Property + - CSS Text Decoration + - Reference + - 'recipe:css-shorthand-property' + - text-decoration + - text-decoration-color + - text-decoration-line + - text-decoration-style +translation_of: Web/CSS/text-decoration +--- +
{{CSSRef}}
+ +

text-decoration は CSS の 一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} およびさらに新しい {{cssxref("text-decoration-thickness")}} プロパティの一括指定です。

+ +
{{EmbedInteractiveExample("pages/css/text-decoration.html")}}
+ +

文字列の装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、 <p>This text has <em>some emphasized words</em> in it.</p> というマークアップと、 p { text-decoration: underline; } のスタイル規則では、段落全体に下線が引かれます。 em { text-decoration: none; } のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 em { text-decoration: overline; } の規則で "some emphasized words" に第二の装飾が施されます。

+ +

構成要素のプロパティ

+ +

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

+ + + +

構文

+ +

text-decoration プロパティは、個別指定の text-decoration プロパティを表す 1 つまたは複数の値を空白で区切って指定します。

+ +

値

+ +
+
{{cssxref("text-decoration-line")}}
+
使用する装飾の種類を設定します。 underline や line-through などです。
+
{{cssxref("text-decoration-color")}}
+
装飾の色を設定します。
+
{{cssxref("text-decoration-style")}}
+
装飾に使用する線のスタイルを設定します。 solid, wavy, dashed などです。
+
{{cssxref("text-decoration-thickness")}}
+
装飾に使われる線の太さを設定します。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

text-decoration の値のデモ

+ +
.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.thick {
+  text-decoration: solid underline purple 4px;
+}
+
+.blink {
+  text-decoration: blink;
+}
+
+ +
<p class="under">This text has a line underneath it.</p>
+<p class="over">This text has a line over it.</p>
+<p class="line">This text has a line going through it.</p>
+<p>This <a class="plain" href="#">link will not be underlined</a>,
+    as links generally are by default. Be careful when removing
+    the text decoration on anchors since users often depend on
+    the underline to denote hyperlinks.</p>
+<p class="underover">This text has lines above <em>and</em> below it.</p>
+<p class="thick">This text has a really thick purple underline in supporting browsers.</p>
+<p class="blink">This text might blink for you,
+    depending on the browser you use.</p>
+
+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Text Decoration')}}{{Spec2('CSS4 Text Decoration')}}{{cssxref("text-decoration-thickness")}} を追加。なお、これはまだ公式には一括指定の一部ではありません。これはまだ未定義です。
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}}一括指定プロパティへ変更。 {{cssxref('text-decoration-style')}} の値への対応を追加。
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}実質的な変更なし。
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-emphasis-color/index.html b/files/ja/web/css/text-emphasis-color/index.html deleted file mode 100644 index 44da77376c..0000000000 --- a/files/ja/web/css/text-emphasis-color/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: text-emphasis-color -slug: Web/CSS/text-emphasis-color -tags: - - CSS - - CSS スタイル - - CSS テキスト装飾 - - CSS プロパティ - - HTML 色 - - Reference - - Styling HTML - - Text Emphasis - - 'recipe:css-property' - - text-decoration-color -browser-compat: css.properties.text-emphasis-color -translation_of: Web/CSS/text-emphasis-color ---- -
{{CSSRef}}
- -

text-emphasis-color は CSS のプロパティで、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。

- -
/* 初期値 */
-text-emphasis-color: currentcolor;
-
-/* <color> */
-text-emphasis-color: #555;
-text-emphasis-color: blue;
-text-emphasis-color: rgba(90, 200, 160, 0.8);
-text-emphasis-color: transparent;
-
-/* グローバル値 */
-text-emphasis-color: inherit;
-text-emphasis-color: initial;
-text-emphasis-color: revert;
-text-emphasis-color: unset;
-
- -

構文

- -

値

- -
-
<color>
-
記号の色を定義します。 color が存在しない場合、既定で currentcolor になります。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

色と固有の文字で強調

- -

CSS

- -
em {
-  text-emphasis-color: green;
-  text-emphasis-style: "*";
-}
- -

HTML

- -
<p>Here's an example:</p>
-
-<em>This has emphasis marks!</em>
-
- -

結果

- -

{{EmbedLiveSample("Emphasis_with_a_color_and_custom_character", 450, 100)}}

- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - diff --git a/files/ja/web/css/text-emphasis-color/index.md b/files/ja/web/css/text-emphasis-color/index.md new file mode 100644 index 0000000000..44da77376c --- /dev/null +++ b/files/ja/web/css/text-emphasis-color/index.md @@ -0,0 +1,92 @@ +--- +title: text-emphasis-color +slug: Web/CSS/text-emphasis-color +tags: + - CSS + - CSS スタイル + - CSS テキスト装飾 + - CSS プロパティ + - HTML 色 + - Reference + - Styling HTML + - Text Emphasis + - 'recipe:css-property' + - text-decoration-color +browser-compat: css.properties.text-emphasis-color +translation_of: Web/CSS/text-emphasis-color +--- +
{{CSSRef}}
+ +

text-emphasis-color は CSS のプロパティで、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。

+ +
/* 初期値 */
+text-emphasis-color: currentcolor;
+
+/* <color> */
+text-emphasis-color: #555;
+text-emphasis-color: blue;
+text-emphasis-color: rgba(90, 200, 160, 0.8);
+text-emphasis-color: transparent;
+
+/* グローバル値 */
+text-emphasis-color: inherit;
+text-emphasis-color: initial;
+text-emphasis-color: revert;
+text-emphasis-color: unset;
+
+ +

構文

+ +

値

+ +
+
<color>
+
記号の色を定義します。 color が存在しない場合、既定で currentcolor になります。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

色と固有の文字で強調

+ +

CSS

+ +
em {
+  text-emphasis-color: green;
+  text-emphasis-style: "*";
+}
+ +

HTML

+ +
<p>Here's an example:</p>
+
+<em>This has emphasis marks!</em>
+
+ +

結果

+ +

{{EmbedLiveSample("Emphasis_with_a_color_and_custom_character", 450, 100)}}

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-emphasis-position/index.html b/files/ja/web/css/text-emphasis-position/index.html deleted file mode 100644 index 7ba827b564..0000000000 --- a/files/ja/web/css/text-emphasis-position/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: text-emphasis-position -slug: Web/CSS/text-emphasis-position -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Reference -translation_of: Web/CSS/text-emphasis-position ---- -
{{CSSRef}}
- -

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

- -
/* 初期値 */
-text-emphasis-position: over right;
-
-/* キーワード値 */
-text-emphasis-position: over left;
-text-emphasis-position: under right;
-text-emphasis-position: under left;
-
-text-emphasis-position: left over;
-text-emphasis-position: right under;
-text-emphasis-position: left under;
-
-/* グローバル値 */
-text-emphasis-position: inherit;
-text-emphasis-position: initial;
-text-emphasis-position: unset;
-
- -

{{cssinfo}}

- -

望ましい位置

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
望ましい圏点とルビの位置
言語望ましい位置説明
横書き縦書き
日本語overright日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。
モンゴル語
中国語underright中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。
- -
-

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

-
- -

構文

- -

値

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

形式文法

- -{{csssyntax}} - -

例

- -

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

- -
ruby {
-  text-emphasis: none;
-}
-
- -

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

- -
em {
-  text-emphasis: dot; /* <em> 要素に text-emphasis を設定 */
-}
-
-em rt {
-  display: none; /* <em> 要素内のルビを隠す */
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義
- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/text-emphasis-position/index.md b/files/ja/web/css/text-emphasis-position/index.md new file mode 100644 index 0000000000..7ba827b564 --- /dev/null +++ b/files/ja/web/css/text-emphasis-position/index.md @@ -0,0 +1,141 @@ +--- +title: text-emphasis-position +slug: Web/CSS/text-emphasis-position +tags: + - CSS + - CSS テキスト装飾 + - CSS プロパティ + - Reference +translation_of: Web/CSS/text-emphasis-position +--- +
{{CSSRef}}
+ +

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

+ +
/* 初期値 */
+text-emphasis-position: over right;
+
+/* キーワード値 */
+text-emphasis-position: over left;
+text-emphasis-position: under right;
+text-emphasis-position: under left;
+
+text-emphasis-position: left over;
+text-emphasis-position: right under;
+text-emphasis-position: left under;
+
+/* グローバル値 */
+text-emphasis-position: inherit;
+text-emphasis-position: initial;
+text-emphasis-position: unset;
+
+ +

{{cssinfo}}

+ +

望ましい位置

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
望ましい圏点とルビの位置
言語望ましい位置説明
横書き縦書き
日本語overright日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。
モンゴル語
中国語underright中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。
+ +
+

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

+
+ +

構文

+ +

値

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

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +
ruby {
+  text-emphasis: none;
+}
+
+ +

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

+ +
em {
+  text-emphasis: dot; /* <em> 要素に text-emphasis を設定 */
+}
+
+em rt {
+  display: none; /* <em> 要素内のルビを隠す */
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-emphasis-style/index.html b/files/ja/web/css/text-emphasis-style/index.html deleted file mode 100644 index 6c2e0bd827..0000000000 --- a/files/ja/web/css/text-emphasis-style/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: text-emphasis-style -slug: Web/CSS/text-emphasis-style -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Reference - - text-emphasis -translation_of: Web/CSS/text-emphasis-style ---- -
{{CSSRef}}
- -

CSS の text-emphasis-style プロパティは、圏点の表示を設定します。設定や解除に一括指定の {{cssxref("text-emphasis")}} を使用することもできます。

- -
/* 初期値 */
-text-emphasis-style: none; /* 圏点なし */
-
-/* <string> 値 */
-text-emphasis-style: 'x';
-text-emphasis-style: '点';
-text-emphasis-style: '\25B2';
-text-emphasis-style: '*';
-text-emphasis-style: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */
-
-/* キーワード値 */
-text-emphasis-style: filled;
-text-emphasis-style: open;
-text-emphasis-style: dot;
-text-emphasis-style: circle;
-text-emphasis-style: double-circle;
-text-emphasis-style: triangle;
-text-emphasis-style: filled sesame;
-text-emphasis-style: open sesame;
-
-/* グローバル値 */
-text-emphasis-style: inherit;
-text-emphasis-style: initial;
-text-emphasis-style: unset;
-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
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つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
h2 {
-  text-emphasis-style: sesame;
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/text-emphasis-style/index.md b/files/ja/web/css/text-emphasis-style/index.md new file mode 100644 index 0000000000..6c2e0bd827 --- /dev/null +++ b/files/ja/web/css/text-emphasis-style/index.md @@ -0,0 +1,107 @@ +--- +title: text-emphasis-style +slug: Web/CSS/text-emphasis-style +tags: + - CSS + - CSS テキスト装飾 + - CSS プロパティ + - Reference + - text-emphasis +translation_of: Web/CSS/text-emphasis-style +--- +
{{CSSRef}}
+ +

CSS の text-emphasis-style プロパティは、圏点の表示を設定します。設定や解除に一括指定の {{cssxref("text-emphasis")}} を使用することもできます。

+ +
/* 初期値 */
+text-emphasis-style: none; /* 圏点なし */
+
+/* <string> 値 */
+text-emphasis-style: 'x';
+text-emphasis-style: '点';
+text-emphasis-style: '\25B2';
+text-emphasis-style: '*';
+text-emphasis-style: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */
+
+/* キーワード値 */
+text-emphasis-style: filled;
+text-emphasis-style: open;
+text-emphasis-style: dot;
+text-emphasis-style: circle;
+text-emphasis-style: double-circle;
+text-emphasis-style: triangle;
+text-emphasis-style: filled sesame;
+text-emphasis-style: open sesame;
+
+/* グローバル値 */
+text-emphasis-style: inherit;
+text-emphasis-style: initial;
+text-emphasis-style: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
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つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
h2 {
+  text-emphasis-style: sesame;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html deleted file mode 100644 index 6d0ae6bf2c..0000000000 --- a/files/ja/web/css/text-emphasis/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -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}}

- -

関連情報

- - 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}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-shadow/index.html b/files/ja/web/css/text-shadow/index.html deleted file mode 100644 index 1cfba9a47b..0000000000 --- a/files/ja/web/css/text-shadow/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: text-shadow -slug: Web/CSS/text-shadow -tags: - - CSS - - CSS Property - - CSS Styles - - CSS Text Decoration - - CSS スタイル - - CSS テキスト装飾 - - CSS プロパティ - - HTML Colors - - HTML Styles - - HTML スタイル - - HTML 色 - - Reference - - Styles - - Styling HTML - - color - - 'recipe:css-property' - - スタイル -translation_of: Web/CSS/text-shadow ---- -
{{CSSRef}}
- -

text-shadow は CSS のプロパティで、テキストに影を追加します。文字列及びその装飾に適用される影のカンマで区切られたリストを受け付けます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。

- -
{{EmbedInteractiveExample("pages/css/text-shadow.html")}}
- - - -

構文

- -
/* offset-x | offset-y | blur-radius | color */
-text-shadow: 1px 1px 2px black;
-
-/* color | offset-x | offset-y | blur-radius */
-text-shadow: #fc0 1px 0 10px;
-
-/* offset-x | offset-y | color */
-text-shadow: 5px 5px #558abb;
-
-/* color | offset-x | offset-y */
-text-shadow: white 2px 5px;
-
-/* offset-x | offset-y
-/* color および blur-radius は既定値を使用 */
-text-shadow: 5px 10px;
-
-/* グローバル値 */
-text-shadow: inherit;
-text-shadow: initial;
-text-shadow: unset;
-
- -

このプロパティは、影のカンマで区切られたリストとして指定します。

- -

それぞれの影は2つ又は3つの <length> 値と、任意でその後に <color> 値を続けることで指定します。最初の2つの <length> 値は、 <offset-x> 及び <offset-y> の値です。3番目の <length> 値は、任意で、 <blur-radius> です。 <color> 値は影の色です。

- -

複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。

- -

このプロパティは {{cssxref("::first-line")}} 及び {{cssxref("::first-letter")}} の両方の擬似要素に適用されます。

- -

値

- -
-
{{cssxref("<color>")}}
-
省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。
-
<offset-x> <offset-y>
-
必須。これらの <length> 値はテキストに対する影のオフセットを指定します。 <offset-x> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <offset-y> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が 0 ならば、影はテキストの真後ろに配置されますが、 <blur-radius> の効果により一部だけが見えるかもしれません。
-
<blur-radius>
-
省略可。これは {{ cssxref("<length>") }} 値です。指定されなければ、既定では 0 になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

単純な影

- -
-
.red-text-shadow {
-  text-shadow: red 0 -2px;
-}
- -
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
-    natus error sit voluptatem accusantium doloremque laudantium,
-    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
-
- -

{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}

- -

複数の影

- -
-
.white-text-with-blue-shadow {
-  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
-  color: white;
-  font: 1.5em Georgia, serif;
-}
- -
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
-    natus error sit voluptatem accusantium doloremque laudantium,
-    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
-
- -

{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}CSS プロパティ text-shadow は CSS2 で不適切に定義され、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 CSS Text Decoration Module Level 3 に移動しました。
- -

ブラウザーの互換性

- -

{{Compat("css.properties.text-shadow")}}

- -

Quantum CSS のメモ

- - - -

関連情報

- - diff --git a/files/ja/web/css/text-shadow/index.md b/files/ja/web/css/text-shadow/index.md new file mode 100644 index 0000000000..1cfba9a47b --- /dev/null +++ b/files/ja/web/css/text-shadow/index.md @@ -0,0 +1,150 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - CSS + - CSS Property + - CSS Styles + - CSS Text Decoration + - CSS スタイル + - CSS テキスト装飾 + - CSS プロパティ + - HTML Colors + - HTML Styles + - HTML スタイル + - HTML 色 + - Reference + - Styles + - Styling HTML + - color + - 'recipe:css-property' + - スタイル +translation_of: Web/CSS/text-shadow +--- +
{{CSSRef}}
+ +

text-shadow は CSS のプロパティで、テキストに影を追加します。文字列及びその装飾に適用される影のカンマで区切られたリストを受け付けます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。

+ +
{{EmbedInteractiveExample("pages/css/text-shadow.html")}}
+ + + +

構文

+ +
/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* color および blur-radius は既定値を使用 */
+text-shadow: 5px 10px;
+
+/* グローバル値 */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+
+ +

このプロパティは、影のカンマで区切られたリストとして指定します。

+ +

それぞれの影は2つ又は3つの <length> 値と、任意でその後に <color> 値を続けることで指定します。最初の2つの <length> 値は、 <offset-x> 及び <offset-y> の値です。3番目の <length> 値は、任意で、 <blur-radius> です。 <color> 値は影の色です。

+ +

複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。

+ +

このプロパティは {{cssxref("::first-line")}} 及び {{cssxref("::first-letter")}} の両方の擬似要素に適用されます。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。
+
<offset-x> <offset-y>
+
必須。これらの <length> 値はテキストに対する影のオフセットを指定します。 <offset-x> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <offset-y> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が 0 ならば、影はテキストの真後ろに配置されますが、 <blur-radius> の効果により一部だけが見えるかもしれません。
+
<blur-radius>
+
省略可。これは {{ cssxref("<length>") }} 値です。指定されなければ、既定では 0 になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

単純な影

+ +
+
.red-text-shadow {
+  text-shadow: red 0 -2px;
+}
+ +
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
+
+ +

{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}

+ +

複数の影

+ +
+
.white-text-with-blue-shadow {
+  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+  color: white;
+  font: 1.5em Georgia, serif;
+}
+ +
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
+
+ +

{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}CSS プロパティ text-shadow は CSS2 で不適切に定義され、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 CSS Text Decoration Module Level 3 に移動しました。
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.text-shadow")}}

+ +

Quantum CSS のメモ

+ + + +

関連情報

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