From fe9fa61ab5c1e15f53ae7f5331e6468c60fd08ac Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 12 Nov 2021 00:51:20 +0900 Subject: CSS Backgrounds and Borders のガイドを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/11 時点の英語版に同期 --- .../resizing_background_images/index.md | 131 +++++++++++---------- .../using_multiple_backgrounds/bubbles.png | Bin 0 -> 73426 bytes .../using_multiple_backgrounds/firefox.png | Bin 0 -> 5353 bytes .../using_multiple_backgrounds/index.md | 60 +++++----- 4 files changed, 102 insertions(+), 89 deletions(-) create mode 100644 files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/bubbles.png create mode 100644 files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/firefox.png diff --git a/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.md index d4f513ec9d..c709753b3f 100644 --- a/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.md +++ b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.md @@ -3,14 +3,14 @@ title: 背景画像の拡大縮小 slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images tags: - CSS - - CSS Background - - Example - - Guide - - Intermediate - - Reference + - CSS 背景 + - 例 + - ガイド + - 中級者 + - リファレンス - Scale - Scaling - - Web + - ウェブ - dimensions - height - resize @@ -18,22 +18,25 @@ tags: translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images --- -
{{cssref}}
+{{CSSRef}} -

{{cssxref("background-size")}} は CSS のプロパティで、要素の背景画像の大きさを変更し、画像の幅や高さから見た完全な大きさの画像をタイル表示するという既定の動作を変更することができます。こうすることで、画像を必要に応じて拡大したり縮小したりすることができます。

+**{{cssxref("background-size")}}** は CSS のプロパティで、要素の背景画像の大きさを変更し、画像の幅や高さから見た完全な大きさの画像をタイル表示するという既定の動作を変更することができます。こうすることで、画像を必要に応じて拡大したり縮小したりすることができます。 -

巨大な画像を並べて表示

+

巨大な画像を並べて表示

-

巨大な画像、2982x2808の Firefox のロゴ画像を想像してください。この画像を300x300ピクセルの要素の中に4枚並べて表示したいとします (いくつかの理由で恐ろしく悪いサイトデザインですが)。 background-size に固定値の150ピクセルの値を使用すると、このようにすることができます。

+巨大な画像、2982 x 2808 の Firefox のロゴ画像を想像してください。この画像を 300 x 300 ピクセルの要素の中に 4 枚並べて表示したいとします (いくつかの理由で恐ろしく悪いサイトデザインですが)。 `background-size` に固定値の 150 ピクセルの値を使用すると、このようにすることができます。 -

HTML

+### HTML -
<div class="tiledBackground">
-</div>
+```html +
+
+``` -

CSS

+### CSS -
.tiledBackground {
+```css
+.tiledBackground {
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
   background-size: 150px;
   width: 300px;
@@ -41,30 +44,32 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
   border: 2px solid;
   color: pink;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}}

+{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}} -

画像の拡大縮小

+## 画像の拡大縮小 -

以下のように、画像の水平と垂直の両方の寸法を指定することもできます。

+以下のように、画像の水平と垂直の両方の寸法を指定することもできます。 -
background-size: 300px 150px;
-
+```css +background-size: 300px 150px; +``` -

結果は以下のようになります。

+結果は以下のようになります。 -

引き伸ばされた新しい Firefox のロゴ

+![引き伸ばされた新しい Firefox のロゴ](s.codepen.io_richienb_debug_lonxgp_pnkvygvggyxa.png) -

画像の拡大

+## 画像の拡大 -

一方で、背景の画像を拡大することができます。ここでは32x32ピクセルのファビコンを300x300ピクセルに拡大します。

+一方で、背景の画像を拡大することができます。ここでは 32 x 32 ピクセルのファビコンを 300 x 300 ピクセルに拡大します。 -

拡大された MDN ロゴ

+![拡大された MDN ロゴ](favicon57.de33179910ae.1.1.png) -
.square2 {
+```css
+.square2 {
   background-image: url(favicon.png);
   background-size: 300px;
   width: 300px;
@@ -73,27 +78,30 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
   text-shadow: white 0px 0px 2px;
   font-size: 16px;
 }
-
+``` -

見てのとおり、 CSS は実際には基本的に同一で、画像ファイルの名前を保存してください。

+見てのとおり、 CSS は画像ファイルの名前を除けば、実際には基本的に同一です。 -

特殊な値: "contain" と "cover"

+## 特殊な値: "contain" と "cover" -

{{cssxref("<length>")}} の値以外に、 CSS の {{ cssxref("background-size") }} プロパティは contain と cover という二つの特殊な寸法の値を提供しています。これらを見てみましょう。

+{{cssxref("<length>")}} の値以外に、 CSS の {{ cssxref("background-size") }} プロパティは `contain` と `cover` という二つの特殊な寸法の値を提供しています。これらを見てみましょう。 -

contain

+### contain -

contain の値は、包含ボックスの寸法にかかわらず、背景画像をそれぞれの方向にできるだけ大きくなるように、ただしコンテナーの対応する辺の長さを超えないように拡大します。以下の例の大きさを変えて試してみてください。

+`contain` の値は、包含ボックスの寸法にかかわらず、背景画像をそれぞれの方向にできるだけ大きくなるように、ただしコンテナーの対応する辺の長さを超えないように拡大します。以下の例の大きさを変えて試してみてください。 -

HTML

+#### HTML -
<div class="bgSizeContain">
-  <p>この要素の寸法を変更してみてください！</p>
-</div>
+```html +
+

この要素の寸法を変更してみてください！

+
+``` -

CSS

+#### CSS -
.bgSizeContain {
+```css
+.bgSizeContain {
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
   background-size: contain;
   width: 160px;
@@ -102,25 +110,29 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
   color: pink;
   resize: both;
   overflow: scroll;
-}
+} +``` -

結果

+#### 結果 -

{{ EmbedLiveSample('contain', 250, 250) }}

+{{ EmbedLiveSample('contain', 250, 250) }} -

cover

+### cover -

cover の値は、背景画像が対応する方向のコンテナーの寸法より大きいか同じであることを保証しつつ、できるだけ画像が小さくなるように拡大縮小することを指定します。以下の例の大きさを変えて試してみてください。

+`cover` の値は、背景画像が対応する方向のコンテナーの寸法より大きいか同じであることを保証しつつ、できるだけ画像が小さくなるように拡大縮小することを指定します。以下の例の大きさを変えて試してみてください。 -

HTML

+#### HTML -
<div class="bgSizeCover">
-  <p>この要素の寸法を変更してみてください！</p>
-</div>
+```html +
+

この要素の寸法を変更してみてください！

+
+``` -

CSS

+#### CSS -
.bgSizeCover {
+```css
+.bgSizeCover {
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
   background-size: cover;
   width: 160px;
@@ -129,16 +141,15 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
   color: pink;
   resize: both;
   overflow: scroll;
-}
+} +``` -

結果

+#### 結果 -

{{ EmbedLiveSample('cover', 250, 250) }}

+{{ EmbedLiveSample('cover', 250, 250) }} -

関連情報

+## 関連情報 - +- {{ cssxref("background-size") }} +- {{ cssxref("background") }} +- [SVG の背景画像の拡大縮小](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds) diff --git a/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/bubbles.png b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/bubbles.png new file mode 100644 index 0000000000..e0d7fa4829 Binary files /dev/null and b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/bubbles.png differ diff --git a/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/firefox.png b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/firefox.png new file mode 100644 index 0000000000..840db29e3a Binary files /dev/null and b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/firefox.png differ diff --git a/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md index 34cd4331fc..c117fc7cba 100644 --- a/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md +++ b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md @@ -3,41 +3,44 @@ title: 複数の背景画像の利用 slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds tags: - CSS - - CSS Background - - Example - - Guide - - Reference + - CSS 背景 + - 例 + - ガイド + - リファレンス translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds --- -
{{CSSRef}}
+{{CSSRef}} -

複数の背景画像を要素に適用できます。これらは、最初に記述した背景が一番上になり、後に記述した背景がその下になるように重ね合わされます。最後の背景にだけ、背景色を指定できます。

+**複数の背景画像**を要素に適用できます。これらは、最初に記述した背景が一番上になり、後に記述した背景がその下になるように重ね合わされます。最後の背景にだけ、背景色が指定できます。 -

複数の背景の指定は、下記のように簡単です。

+複数の背景の指定は、下記のように簡単です。 -
.myclass {
-  background: background1, background 2, ..., backgroundN;
+```css
+.myclass {
+  background: background1, background2, ..., backgroundN;
 }
-
+``` -

{{ cssxref("background-color") }} を除いて、短縮プロパティの {{ cssxref("background") }} と個々のプロパティの両方で指定できます。つまり、下記のプロパティは背景ひとつずつに対して指定できます。
-{{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+{{ cssxref("background-color") }} を除いて、一括指定プロパティの {{ cssxref("background") }} と個々のプロパティの両方で指定できます。つまり、{{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }} のプロパティは背景ひとつずつに対して指定することができます。 -

例

+

例

-

この例では、3 つの背景が重なっています。Firefox のロゴ、泡の画像、そして [linear-gradient](/ja/docs/Web/CSS/linear-gradient) です。

+この例では、3 つの背景が重なっています。Firefox のロゴ、泡の画像、そして [linear-gradient](/ja/docs/Web/CSS/gradient/linear-gradient()) です。 -

HTML

+### HTML -
<div class="multi-bg-example"></div>
+```html +
+``` -

CSS

+### CSS -
.multi-bg-example {
+```css
+.multi-bg-example {
   width: 100%;
   height: 400px;
-  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
-      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+  background-image: url(firefox.png),
+      url(bubbles.png),
       linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
   background-repeat: no-repeat,
       no-repeat,
@@ -45,18 +48,17 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
   background-position: bottom right,
       left,
       right;
-}
+} +``` -

結果

+### 結果 -

(CodePen で画像が表示されない場合、CSS 部分の「Tidy CSS」をクリックしてください)

+(CodePen で画像が表示されない場合、CSS 部分の「Tidy CSS」をクリックしてください) -

{{EmbedLiveSample('Example','600','400')}}

+{{EmbedLiveSample('Example','600','400')}} -

ご覧のように、Firefox のロゴ ({{ cssxref("background-image") }} で最初に記載) が一番上になり、泡の画像がそれに続き、グラデーション (最後に記述) が前述の全ての画像の下に配置されています。後に続くプロパティ ({{ cssxref("background-repeat") }} と {{ cssxref("background-position") }}) はそれぞれの背景に対応して適用されています。つまり、{{ cssxref("background-repeat") }} の最初の値は最初(最前面)の画像に適用され、後に続くものも順番に適用されます。

+ご覧のように、Firefox のロゴ ({{ cssxref("background-image") }} で最初に記載) が一番上になり、泡の画像がそれに続き、グラデーション (最後に記述) が前述の全ての画像の下に配置されています。後に続くプロパティ ({{ cssxref("background-repeat") }} と {{ cssxref("background-position") }}) はそれぞれの背景に対応して適用されています。つまり、{{ cssxref("background-repeat") }} の最初の値は最初(最前面)の画像に適用され、後に続くものも順番に適用されます。 -

関連情報

+## 関連情報 - +- [CSS グラデーションの利用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- cgit v1.2.3-54-g00ecf