From 3e9505ea8625b15dfee471fb77293c1379f8883d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 11 Nov 2021 23:27:00 +0900 Subject: 20211111-CSS-Backgrounds-and-Borders-articles --- .../resizing_background_images/index.html | 144 --------------------- .../resizing_background_images/index.md | 144 +++++++++++++++++++++ .../using_multiple_backgrounds/index.html | 62 --------- .../using_multiple_backgrounds/index.md | 62 +++++++++ 4 files changed, 206 insertions(+), 206 deletions(-) delete mode 100644 files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html create mode 100644 files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.md delete mode 100644 files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html deleted file mode 100644 index cb3f131200..0000000000 --- a/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: 背景画像の拡大縮小 -slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate - - Reference - - Scale - - Scaling - - Web - - dimensions - - height - - resize - - width -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images ---- -
{{cssref}}
- -

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

- -

巨大な画像を並べて表示

- -

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

- -

HTML

- -
<div class="tiledBackground">
-</div>
- -

CSS

- -
.tiledBackground {
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: 150px;
-  width: 300px;
-  height: 300px;
-  border: 2px solid;
-  color: pink;
-}
-
- -

結果

- -

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

- -

画像の拡大縮小

- -

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

- -
background-size: 300px 150px;
-
- -

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

- -

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

- -

画像の拡大

- -

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

- -

拡大された MDN ロゴ

- -
.square2 {
-  background-image: url(favicon.png);
-  background-size: 300px;
-  width: 300px;
-  height: 300px;
-  border: 2px solid;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

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

- -

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

- -

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

- -

contain

- -

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

- -

HTML

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

CSS

- -
.bgSizeContain {
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: contain;
-  width: 160px;
-  height: 160px;
-  border: 2px solid;
-  color: pink;
-  resize: both;
-  overflow: scroll;
-}
- -

結果

- -

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

- -

cover

- -

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

- -

HTML

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

CSS

- -
.bgSizeCover {
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: cover;
-  width: 160px;
-  height: 160px;
-  border: 2px solid;
-  color: pink;
-  resize: both;
-  overflow: scroll;
-}
- -

結果

- -

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

- -

関連情報

- - 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 new file mode 100644 index 0000000000..d4f513ec9d --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.md @@ -0,0 +1,144 @@ +--- +title: 背景画像の拡大縮小 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate + - Reference + - Scale + - Scaling + - Web + - dimensions + - height + - resize + - width +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +--- +
{{cssref}}
+ +

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

+ +

巨大な画像を並べて表示

+ +

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

+ +

HTML

+ +
<div class="tiledBackground">
+</div>
+ +

CSS

+ +
.tiledBackground {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: 150px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  color: pink;
+}
+
+ +

結果

+ +

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

+ +

画像の拡大縮小

+ +

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

+ +
background-size: 300px 150px;
+
+ +

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

+ +

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

+ +

画像の拡大

+ +

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

+ +

拡大された MDN ロゴ

+ +
.square2 {
+  background-image: url(favicon.png);
+  background-size: 300px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

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

+ +

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

+ +

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

+ +

contain

+ +

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

+ +

HTML

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

CSS

+ +
.bgSizeContain {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}
+ +

結果

+ +

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

+ +

cover

+ +

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

+ +

HTML

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

CSS

+ +
.bgSizeCover {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}
+ +

結果

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html deleted file mode 100644 index e5a24c51d9..0000000000 --- a/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 複数の背景画像の利用 -slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds ---- -
{{CSSRef}}
- -

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

- -

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

- -
.myclass {
-  background: background1, background 2, ..., 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") }}.

- -

例

- -

この例では、3 つの背景が重なっています。Firefox のロゴ、泡の画像、そして linear-gradient です。

- -

HTML

- -
<div class="multi-bg-example"></div>
- -

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),
-      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
-  background-repeat: no-repeat,
-      no-repeat,
-      no-repeat;
-  background-position: bottom right,
-      left,
-      right;
-}
- -

結果

- -

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

- -

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

- -

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

- -

関連情報

- - 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 new file mode 100644 index 0000000000..34cd4331fc --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md @@ -0,0 +1,62 @@ +--- +title: 複数の背景画像の利用 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +
{{CSSRef}}
+ +

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

+ +

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

+ +
.myclass {
+  background: background1, background 2, ..., 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") }}.

+ +

例

+ +

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

+ +

HTML

+ +
<div class="multi-bg-example"></div>
+ +

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),
+      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat,
+      no-repeat,
+      no-repeat;
+  background-position: bottom right,
+      left,
+      right;
+}
+ +

結果

+ +

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

+ +

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

+ +

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

+ +

関連情報

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