Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator を新規翻訳 (#2157)

関連するファイルを更新

3 files changed, 34 insertions, 2 deletions

diff --git a/files/ja/web/css/box-shadow/index.html b/files/ja/web/css/box-shadow/index.html
index 5fb4b74744..d28db18a1e 100644
--- a/files/ja/web/css/box-shadow/index.html
+++ b/files/ja/web/css/box-shadow/index.html
@@ -29,7 +29,7 @@ translation_of: Web/CSS/box-shadow
 
 <p><code>box-shadow</code> プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数の<a href="/ja/CSS/text-shadow">テキストの影</a>の場合と同様になります (最初に指定された影が最も手前に来ます)。</p>
 
-<p><a href="/ja/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a> は、 <code>box-shadow</code> を対話的に作成できるツールです。</p>
+<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>
 
diff --git a/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md
new file mode 100644
index 0000000000..963bf61cb4
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md
@@ -0,0 +1,32 @@
+---
+title: ボックスの影作成ツール
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+tags:
+  - CSS
+  - Tools
+  - box-shadow
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+---
+このツールで CSS の {{cssxref("box-shadow")}} 効果を組み立てて、 CSS オブジェクトにボックスの影の効果を追加することができます。
+
+{{EmbedGHLiveSample("css-examples/tools/box-shadow-generator/", '100%', 900)}}
+
+ボックスの影作成ツールは、 1 つまたは複数のボックスの影を要素に追加することができます。
+
+ツールを開くと、右上の部分に四角形があります。これがシャドウを適用する対象となる要素です。この要素が選択されている状態 (ページを最初に読み込んだときの状態) では、基本的なスタイルを適用することができます。
+
+- カラーピッカーツールを使って、要素の {{cssxref("color")}} を設定しましょう。
+- "border" チェックボックスを使って、要素の {{cssxref("border")}} をつけましょう。
+- スライダーを使って、要素の {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("width")}}, {{cssxref("height")}} の各プロパティを設定しましょう。
+
+ボックスの影を追加するには、左上の「+」ボタンをクリックしてください。これで影を追加し、左側の列に並べます。それで新しい影の値を設定することができるようになります。
+
+- カラーピッカーツールを使って、影の {{cssxref("color")}} を設定しましょう。
+- "inset" チェックボックスを使って、影が内側になるようにしましょう。
+- スライダーを使って、影の位置、ぼかし、広がりを設定しましょう。
+
+他の影を追加するには、「+」をまたクリックしてください。ここで設定した値は、この新しい影にも適用されます。左上の↑と↓のボタンで、 2 つの影の適用順を変更します。左側の列で最初の影をクリックして再度選択してください。要素のスタイルを更新するには、要素を選択し、上部にある「element」というボタンをクリックします。
+
+要素に {{cssxref("::before")}} と {{cssxref("::after")}} の擬似要素を追加して、ボックスの影を付けることもできます。要素とその擬似要素を切り替えるには、上部にある「element」「:before」「:after」と書かれたボタンを使います。
+
+右下のボックスには、要素と `before::` または `::after` 擬似要素の CSS が表示されます。
diff --git a/files/ja/web/css/css_backgrounds_and_borders/index.html b/files/ja/web/css/css_backgrounds_and_borders/index.html
index 6e43c5ab15..a7e5a5bb6b 100644
--- a/files/ja/web/css/css_backgrounds_and_borders/index.html
+++ b/files/ja/web/css/css_backgrounds_and_borders/index.html
@@ -78,7 +78,7 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders
  <dd>境界画像 ({{cssxref("border-image")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
  <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator">境界角丸作成ツール</a></dt>
  <dd>角の丸み ({{cssxref("border-radius")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">ボックスの影作成ツール</a></dt>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator">ボックスの影作成ツール</a></dt>
  <dd>要素の背後の影 ({{cssxref("box-shadow")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
 </dl>