From f6e08414dd1b002c081c0e6a4fb4774875a428d8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 28 Aug 2021 21:03:28 +0900 Subject: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator を新規翻訳 (#2157) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 関連するファイルを更新 --- files/ja/web/css/box-shadow/index.html | 2 +- .../box-shadow_generator/index.md | 32 ++++++++++++++++++++++ .../web/css/css_backgrounds_and_borders/index.html | 2 +- 3 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md (limited to 'files/ja/web/css') 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

box-shadow プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数のテキストの影の場合と同様になります (最初に指定された影が最も手前に来ます)。

-

Box-shadow generator は、 box-shadow を対話的に作成できるツールです。

+

ボックスの影作成ツールは、 box-shadow を対話的に作成できるツールです。

構文

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
境界画像 ({{cssxref("border-image")}} プロパティ) を見ながら作ることができる対話型のツールです。
境界角丸作成ツール
角の丸み ({{cssxref("border-radius")}} プロパティ) を見ながら作ることができる対話型のツールです。
-
ボックスの影作成ツール
+
ボックスの影作成ツール
要素の背後の影 ({{cssxref("box-shadow")}} プロパティ) を見ながら作ることができる対話型のツールです。
-- cgit v1.2.3-54-g00ecf