diff options
Diffstat (limited to 'files/ja/web/css/box-shadow/index.md')
| -rw-r--r-- | files/ja/web/css/box-shadow/index.md | 235 |
1 files changed, 110 insertions, 125 deletions
diff --git a/files/ja/web/css/box-shadow/index.md b/files/ja/web/css/box-shadow/index.md index c33f487fb6..82926bab45 100644 --- a/files/ja/web/css/box-shadow/index.md +++ b/files/ja/web/css/box-shadow/index.md @@ -3,37 +3,33 @@ title: box-shadow slug: Web/CSS/box-shadow tags: - CSS - - CSS Backgrounds and Borders - - CSS Property - - CSS Styles - - CSS スタイル - - CSS プロパティ - CSS 背景と境界 + - CSS プロパティ + - CSS スタイル - HTML Colors - - Reference - - Shadows + - リファレンス + - 影 - Styles - Styling HTML - box-shadow - - 'recipe:css-property' - - 影 + - recipe:css-property +browser-compat: css.properties.box-shadow translation_of: Web/CSS/box-shadow --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>box-shadow</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。</span>ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。</p> +**`box-shadow`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。 -<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div> +{{EmbedInteractiveExample("pages/css/box-shadow.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +`box-shadow` プロパティで、ほぼすべての要素のフレームからドロップシャドウを作成することができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数の[テキストの影](/ja/docs/Web/CSS/text-shadow)の場合と同様になります (最初に指定された影が最も手前に来ます)。 -<p><code>box-shadow</code> プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数の<a href="/ja/CSS/text-shadow">テキストの影</a>の場合と同様になります (最初に指定された影が最も手前に来ます)。</p> +[ボックスの影作成ツール](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator)は、 `box-shadow` を対話的に作成できるツールです。 -<p><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator">ボックスの影作成ツール</a>は、 <code>box-shadow</code> を対話的に作成できるツールです。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ box-shadow: none; /* offset-x | offset-y | color */ @@ -54,137 +50,126 @@ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* グローバルキーワード */ box-shadow: inherit; box-shadow: initial; +box-shadow: revert; box-shadow: unset; -</pre> - -<p>単一の box-shadow の使用を指定してみます。</p> - -<ul> - <li>二つ、三つ、四つの <code><a href="/ja/docs/Web/CSS/length"><length></a></code> 値 - - <ul> - <li>値が二つだけ与えられた場合、 <code><a href="#offset-x"><offset-x><offset-y></a></code> として解釈されます。</li> - <li>値が三つ与えられた場合、 <code><a href="#blur-radius"><blur-radius></a></code> として解釈されます。</li> - <li>値が四つ与えられた場合、 <code><a href="#spread-radius"><spread-radius></a></code> として解釈されます。</li> - </ul> - </li> - <li>任意で、 <code><a href="#inset">inset</a></code> キーワード</li> - <li>任意で、 <code><a href="#color"><color></a></code> の値</li> -</ul> - -<p>複数の影を指定するには、影をカンマで区切ったリストを提供します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="inset"><code>inset</code></dt> - <dd>指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。<br> - <code>inset</code> キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 <code>inset</code> な影は背景の上、境界や内容の下に描画されます。</dd> - <dt id="offset-x"><code><offset-x></code> <code><offset-y></code></dt> - <dd>これら２つの {{cssxref("<length>")}} 値は、影のオフセットを設定します。 <code><offset-x></code> は水平方向の距離を表します。負の値が指定された場合、影は左方向に延びます。 <code><offset-y></code> は垂直方向の距離を表します。負の値が指定された場合、影は上方向に延びます。利用可能な値の単位については {{cssxref("<length>")}} をご覧ください。<br> - どちらのオフセットも <code>0</code> である場合、影は要素の裏に配置されます。 (<code><blur-radius></code> や <code><spread-radius></code> が指定されている場合は、ぼかし効果が与えられるでしょう。)</dd> - <dt id="blur-radius"><code><blur-radius></code></dt> - <dd>これは３番目の {{cssxref("<length>")}} 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は <code>0</code> となります (影の縁にぼかしが入りません)。仕様書にはぼかしの半径の計算方法について正確なアルゴリズムは書かれていませんが、以下のように複雑なものです。</dd> - <dd> - <blockquote>…影の辺が長くまっすぐな場合、影の辺に垂直で中心にあるぼかし距離の長さの色遷移を作成し、影の内側の半径の端点で完全な影の色からその外側の端点で完全に透明になるまでの範囲の色遷移を作成する必要があります。</blockquote> - </dd> - <dt id="spread-radius"><code><spread-radius></code></dt> - <dd>4 番目に指定された {{cssxref("<length>")}} の値。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は <code>0</code> と解釈され、影の大きさは要素の大きさと同じままとなります。</dd> - <dt id="color"><code><color></code></dt> - <dd>可能なキーワード及び記述方法については {{cssxref("<color>")}} の値をご覧ください。<br> - 値が指定されていない場合は、既定で {{cssxref("currentcolor")}} になります。</dd> -</dl> - -<h3 id="Interpolation" name="Interpolation">補間</h3> - -<p>リストの中 (<code>none</code> は長さ 0 のリスト) 中のそれぞれの影は、色の成分、 x、 y、 ぼかし、及び (適切であれば) 広がり (の長さ) の成分で補間されます。両方の影について、もし <code>inset</code> が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で <code>inset</code> と <code>inset</code> の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は <code>transparent</code> の色の影で補完し、すべての長さが <code>0</code> であり、 <code>inset</code> (の有無) が一致するものがあれば、より長いリストに一致します。</p> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +単一の box-shadow は次の物を使用して指定します。 + +- 2 ～ 4 つの [`<length>`](/ja/docs/Web/CSS/length) 値 + + - 値が 2 つだけ与えられた場合、 `<offset-x>` および `<offset-y>` として解釈されます。 + - 3 つ目の値が与えられた場合、 `<blur-radius>` として解釈されます。 + - 4 つ目の値が与えられた場合、 `<spread-radius>` として解釈されます。 + +- 任意で、 `inset` キーワード +- 任意で、 [`<color>`](#color) の値 + +複数の影を指定する場合は、影をカンマで区切ったリストを指定してください。 + +### 値 + +- `inset` + - : 指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。 + `inset` キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 `inset` な影は背景の上、境界や内容の下に描画されます。 +- `<offset-x>` `<offset-y>` + - : これらは 2 つの {{cssxref("<length>")}} 値で、影のオフセットを設定します。 `<offset-x>` は水平方向の距離を表します。負の値が指定された場合、影は左方向に配置されます。 `<offset-y>` は垂直方向の距離を表します。負の値が指定された場合、影は上方向に配置されます。利用可能な値の単位については {{cssxref("<length>")}} をご覧ください。 + どちらのオフセットも `0` である場合、影は要素の裏に配置されます。 (`<blur-radius>` や `<spread-radius>` が指定されている場合は、ぼかし効果を生成することができます。) +- `<blur-radius>` + + - : これは 3 つ目の {{cssxref("<length>")}} 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は `0` となります (影の縁にぼかしが入りません)。仕様書にはぼかしの半径の計算方法について正確なアルゴリズムは書かれていませんが、以下のように複雑なものです。 + + > …影の辺が長くまっすぐな場合、影の辺に垂直で中心にあるぼかし距離の長さの色遷移を作成し、影の内側の半径の端点で完全な影の色からその外側の端点で完全に透明になるまでの範囲の色遷移を作成する必要があります。 + +- `<spread-radius>` + - : 4 つ目に指定される {{cssxref("<length>")}} の値です。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は `0` と解釈され、影の大きさは要素の大きさと同じままとなります。 +- `<color>` + - : 可能なキーワード及び記述方法については {{cssxref("<color>")}} の値をご覧ください。 + 値が指定されていない場合は、既定で {{cssxref("<color>","currentColor","#currentcolor_keyword")}} になります。 + +### 補間 + +リストの中 (`none` は長さ 0 のリスト) 中のそれぞれの影は、色の成分、 x、 y、 ぼかし、およびび (適切であれば) 広がり (の長さ) の成分で補間されます。両方の影について、もし `inset` が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で `inset` と `inset` の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は `transparent` の色の影で補完し、すべての長さが `0` であり、 `inset` (の有無) が一致するものがあれば、より長いリストに一致します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_three_shadows" name="Setting_three_shadows">3つの影の設定</h3> +<h3 id="Setting_three_shadows">3 つの影の設定</h3> -<p>この例では、3 つの影を使用しています。インセットシャドウ、通常のドロップシャドウ、境界の効果を生む 2px の影です (3 つ目の影の代わりに {{cssxref('outline')}} を使用することもできます)。</p> +この例では、3 つの影を使用しています。内部への影、通常のドロップシャドウ、境界の効果を生む 2px の影です (3 つ目の影の代わりに {{cssxref('outline')}} を使用することもできます)。 -<div id="Examples1"> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><blockquote><q>You may shoot me with your words,<br/> -You may cut me with your eyes,<br/> -You may kill me with your hatefulness,<br/> -But still, like air, I'll rise.</q> -<p>&mdash; Maya Angelou</p> -</blockquote></pre> +```html +<blockquote><q>You may shoot me with your words,<br/> +You may cut me with your eyes,<br/> +You may kill me with your hatefulness,<br/> +But still, like air, I'll rise.</q> +<p>— Maya Angelou</p> +</blockquote> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">blockquote { +```css +blockquote { padding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3); -}</pre> -</div> +} +``` -<p>{{EmbedLiveSample('Setting_three_shadows', '300', '300')}}</p> +#### 結果 -<h3 id="Setting_zero_for_offset_and_blur" name="Setting_zero_for_offset_and_blur">offset と blur をゼロに設定</h3> +{{EmbedLiveSample('Setting_three_shadows', '300', '300')}} -<div id="Examples2"> -<p><code>x-offset</code>, <code>y-offset</code>, <code>blur</code> がすべてゼロの場合、ボックスシャドウはすべての辺に同じ幅の単一色の囲み線になります。影は背後から手前にかけて描かれるため、最初の影はその後の影の最上位に表示されます。既定値通り、 <code>border-radius</code> が 0 に設定されていた場合、影の角は同様に尖った形になります。 <code>border-radius</code> にそれ以外の値を設定した場合、角は丸みを帯びます。。</p> +<h3 id="Setting_zero_for_offset_and_blur">offset と blur をゼロに設定</h3> -<p>影が隣接する要素と重ならないように、また、含まれるボックスの境界線を超えないように、最も広いボックスシャドウの寸法のマージンを追加しました。ボックスシャドウは<a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a>の寸法に影響を与えません。</p> +`x-offset`, `y-offset`, `blur` がすべてゼロの場合、ボックスシャドウはすべての辺に同じ幅の単一色の囲み線になります。影は背後から手前にかけて描かれるため、最初の影はその後の影の最上位に表示されます。既定値通り、 `border-radius` が 0 に設定されていた場合、影の角は同様に尖った形になります。 `border-radius` にそれ以外の値を設定した場合、角は丸みを帯びます。 -<h4 id="HTML_2">HTML</h4> +影が隣接する要素と重ならないように、また、包含ボックスの境界線を超えないように、最も広いボックスシャドウの寸法のマージンを追加しました。ボックスシャドウは[ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model)の寸法に影響を与えません。 -<pre class="brush: html notranslate"><div><p>Hello World</p></div></pre> +#### HTML -<h4 id="CSS_2">CSS</h4> +```html +<div><p>Hello World</p></div> +``` -<pre class="brush: css notranslate">p { +#### CSS + +```css +p { box-shadow: 0 0 0 2em #F4AAB9, 0 0 0 4em #66CCFF; margin: 4em; padding:1em; -}</pre> -</div> - -<p>{{EmbedLiveSample('Setting_zero_for_offset_and_blur', '300', '300')}}</p> - -<h2 class="cleared" id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.box-shadow")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("<color>")}} データ型</li> - <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> - <li>{{cssxref("text-shadow")}}</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を用いた HTML 要素への色の適用</a></li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('Setting_zero_for_offset_and_blur', '300', '300')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<color>")}} データ型 +- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- {{cssxref("text-shadow")}} +- [CSS を用いた HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color) |