From 78a809cda8c0af756dfe71dafa14f9779fd1d7e8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 29 Jul 2021 13:58:55 +0900 Subject: conflicting/Web/CSS/CSS_Backgrounds_and_Borders 以下を削除 (#1521) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 正規版に履歴を継承 --- .../resizing_background_images/index.html | 104 --------------------- .../using_multiple_backgrounds/index.html | 75 --------------- 2 files changed, 179 deletions(-) delete mode 100644 files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html delete mode 100644 files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html (limited to 'files/ja/conflicting') diff --git a/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html deleted file mode 100644 index f977767419..0000000000 --- a/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 背景画像の拡大縮小 -slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images -original_slug: Web/CSS/Scaling_background_images ---- -

CSS の {{cssxref("background-size")}} プロパティによって、フルサイズの画像がタイル状に配置されるという既定の動作の代わりに、背景画像のサイズを調節することができるようになります。画像を望むように拡大または縮小することができます。

- -

大きな画像をタイル状に配置する

- -

1233 × 1233 の大きな Firefox のロゴ画像を考えてみましょう。 300 × 300 四方に、この画像の 4 つのコピーをタイル状に配置したい（ぞっとするほど悪いサイトデザインを含むいくつかの理由で）場合、結果としてこうなります。

- -

screenshot1.png

- -

これは以下の CSS を使うことで達成されます。

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

もし、とても古いブラウザをターゲットにするのであれば、いくつかの接頭辞を付したバージョンを加えることを考えるかもしれませんが、もう {{cssxref("background-size")}} に接頭辞を付すことは必要ありません。

- -

画像を引き伸ばす

- -

以下のように、画像の水平方向と垂直方向の両方のサイズを記述することもできます。

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

その結果はこのようになります。

- -

screenshot3.png

- -

画像を拡大する

- -

この範囲のもう 1 つの終端では、画像を背景の中で拡大することができます。 ここで、300 × 300 ピクセルに 16 × 16 ピクセルの favicon を拡大します。

- -

screenshot2.png

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

ご覧のとおり、 CSS は実際には本質的に同一で、画像ファイル名は安全です。

- -

特別な値の「contain」と「cover」

- -

CSS の {{cssxref("background-size")}} には、 {{cssxref("<length>")}} の値の他に、 contain と cover の 2 つの特別なサイズの値が提示されています。これらについて見てみましょう。

- -

contain

- -

contain は、コンテナとなるボックスのサイズにかかわらず、背景画像は　コンテナの対応する辺の長さを超えないように、可能な限り大きくなるようにそれぞれの辺を拡大縮小されるべきことを指定します。下記の実演中の例からこのことを確認するため、 Firefox 3.6 以降のような、背景画像の拡大縮小に対応したブラウザを使って、ウィンドウのサイズを変えてみて下さい。

- -
-

このウィンドウのサイズを変えて、何が起こるかを見て下さい。

-
- -

上の例の CSS は以下のようなものです。

- -
width: 100%;
-height: 200px;
-background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
-background-size: contain;
-border: solid 2px;
-
- -

cover

- -

cover は、背景画像の両方の寸法が、コンテナの対応するサイズより大きくなる、または同じになることを確保しつつ、背景画像を可能な限り小さい大きさになるべきことを指定します。

- -
-

このウィンドウのサイズを変えて、何が起こるかを見て下さい。

-
- -

この例では以下の CSS を使用しています。

- -
width: 100%;
-height: 200px;
-background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
-background-size: cover;
-border: solid 2px;
-
- -

関連情報

- - diff --git a/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html deleted file mode 100644 index 863b8661e9..0000000000 --- a/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: CSS での複数の背景の利用方法 -slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -original_slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -

{{CSSRef}}

- -

CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。

- -

複数の背景は、以下の様に各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。

- -
.myclass {
-  background: 背景1, 背景2, ..., 背景N;
-}
- -

この方法は、ショートハンドプロパティの {{cssxref("background")}} でも、{{cssxref("background-color")}} 以外の個別のプロパティ（※{{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}） のどちらでも利用可能です。

- -

例

- -

次の例では、上位レイヤーから

- -
    -
  1. Firefox のロゴ
    2. -
  2. 線形グラデーション
    3. -
  3. 花の画像
    4. -
- -

の順で、3 つの背景が重ねられています。記述量が多くなる場合は、例の様にカンマ毎に改行するとコードが読みやすくなるかもしれません。

- -
.multi_bg_example {
-  background-image:
-    url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */
-    linear-gradient( to right, rgba(255,255,255,0),  #fff ),
-    url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg");
-
-  background-repeat:
-    no-repeat, /* 最前面の背景レイヤーに対応 */
-	no-repeat,
-	repeat;
-
-  background-position:
-    bottom right, /* 最前面の背景レイヤーに対応 */
-	left,
-	right;
-}
- - - - - - - - - - -
スクリーンショット
css_multibg.png
- -

スクリーンショットで表示されているとおり、最初に記述した Firefox のアイコン画像が最前面、次にグラデーション、最後に花の画像が重ねて描画されます。 {{cssxref("background-repeat")}} と {{cssxref("background-position")}} に指定した複数の値は、それぞれ background-image で記述した各値に対し、同じ順番で適用されます。つまり、background-image の最初の値として指定した FireFox のアイコンの画像に対し、
- {{cssxref("background-repeat")}} は "bottom left"、
- {{cssxref("background-position")}} は "no-repeat"
- が適用され、その結果、Firefox のアイコンの画像は、最前面のレイヤーの右下に、ひとつだけ 表示されるのです。

- -

関連記事

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