From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../resizing_background_images/index.html | 143 +++++++++++++++++++++ .../scaling_background_images/index.html | 143 --------------------- 2 files changed, 143 insertions(+), 143 deletions(-) create mode 100644 files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html delete mode 100644 files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html (limited to 'files/ja/web/css/css_backgrounds_and_borders') 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 new file mode 100644 index 0000000000..dde72afbab --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,143 @@ +--- +title: 背景画像の拡大縮小 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_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 +--- +
{{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/scaling_background_images/index.html b/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html deleted file mode 100644 index dde72afbab..0000000000 --- a/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: 背景画像の拡大縮小 -slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_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 ---- -
{{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) }}

- -

関連情報

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