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-shadow/index.html | 150 -------------------------------- 1 file changed, 150 deletions(-) delete mode 100644 files/ja/web/css/text-shadow/index.html (limited to 'files/ja/web/css/text-shadow/index.html') 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 のメモ

- - - -

関連情報

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