diff options
Diffstat (limited to 'files/ja/web/css/background-size/index.html')
| -rw-r--r-- | files/ja/web/css/background-size/index.html | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/files/ja/web/css/background-size/index.html b/files/ja/web/css/background-size/index.html new file mode 100644 index 0000000000..377a64e800 --- /dev/null +++ b/files/ja/web/css/background-size/index.html @@ -0,0 +1,196 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - Background + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - background-size +translation_of: Web/CSS/background-size +--- +<div>{{CSSRef}}</div> + +<p><strong><code>background-size</code></strong> は <a href="/ja/docs/CSS">CSS</a> のプロパティで、要素の背景画像の寸法を設定します。画像は自然な寸法になったり、引き伸ばされたり、利用可能な領域に収まるように縮小されたりします。</p> + +<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>背景画像に覆われていない領域は {{cssxref("background-color")}} プロパティで埋められ、背景画像の後ろに見える背景色は透過性があります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +background-size: cover; +background-size: contain; + +/* 値1つの構文 */ +/* 画像の幅 (高さは 'auto' になる) */ +background-size: 50%; +background-size: 3.2em; +background-size: 12px; +background-size: auto; + +/* 値2つの構文 */ +/* 1番目の値は画像の幅、2番目の値は高さ */ +background-size: 50% auto; +background-size: 3em 25%; +background-size: auto 6px; +background-size: auto auto; + +/* 複数の背景 */ +background-size: auto, auto; /* 'auto auto' と混同しないでください */ +background-size: 50%, 25%, 25%; +background-size: 6px, auto, contain; + +/* グローバル値 */ +background-size: inherit; +background-size: initial; +background-size: unset; +</pre> + +<p><code>background-size</code> プロパティは以下のいずれか1つの方法で指定します。</p> + +<ul> + <li><code><a href="#contain">contain</a></code> または <code><a href="#cover">cover</a></code> のキーワード値を使用</li> + <li>幅の値のみを使用、この場合の高さは既定の <code><a href="#auto">auto</a></code> になります。</li> + <li>幅と高さの値の両方を使用、この場合は1番目の値で幅を、2番目の値で高さを設定します。どちらの値も {{cssxref("<length>")}}、 {{cssxref("<percentage>")}} または <code><a href="#auto">auto</a></code> のいずれかになります。</li> +</ul> + +<p>複数の背景画像の寸法を指定するには、それぞれの値をカンマで区切ってください。</p> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt id="contain"><code>contain</code></dt> + <dd>画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。</dd> + <dt id="cover"><code>cover</code></dt> + <dd>画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。</dd> + <dt id="auto"><code>auto</code></dt> + <dd>縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。</dd> + <dt id="length">{{cssxref("<length>")}}</dt> + <dd>その軸が指定された長さになるよう画像を拡大縮小します。負の値は使用できません。</dd> + <dt id="percentage">{{cssxref("<percentage>")}}</dt> + <dd>その軸が<em>背景配置領域</em>の指定された割合になるよう拡大縮小します。背景配置領域とは、 {{cssxref("background-origin")}} の値（既定ではパディングボックス）によって定められます。しかし、背景の {{cssxref("background-attachment")}} の値が <code>fixed</code> の場合、配置領域は{{glossary("viewport", "ビューポート")}}全体となります。負の値は使用できません。</dd> +</dl> + +<h3 id="Intrinsic_dimensions_and_proportions" name="Intrinsic_dimensions_and_proportions">固有の軸と比率</h3> + +<p>値の計算は画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。属性は以下の通りです。</p> + +<ul> + <li>ビットマップ画像 (JPG など) には、常に固有の寸法と比率があります。</li> + <li>ベクター画像 (SVG など) には固有の寸法がないことがあります。水平と垂直の両方に固有の寸法がある場合は、固有の比率もあります。固有の寸法がなかったり、一方しかなかったりする場合は、固有の比率がある場合もあるしない場合もあります。</li> + <li>CSS の {{cssxref("<gradient>")}} には固有の寸法も固有の比率もありません。</li> + <li>{{cssxref("element()")}} 関数によって作成された背景画像では、それを作成する要素の固有の寸法と比率を使用します。</li> +</ul> + +<div class="note"> +<p><strong>メモ:</strong> <code><gradient></code> の振る舞いは Gecko 8.0 {{geckoRelease("8.0")}} で変更されました。それより前は、固有の寸法がないものの、背景配置領域と同じ比率の画像として扱われていました。</p> +</div> + +<div class="note"> +<p><strong>メモ:</strong> Gecko では、 {{cssxref("element()")}} 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な固有の比率を持ちます。これは非標準の振る舞いです。</p> +</div> + +<p>固有の寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。</p> + +<dl> + <dt><code>background-size</code> の幅と高さがともに定義されていて <code>auto</code> でない場合</dt> + <dd>背景画像は指定の寸法で描画されます。</dd> + <dt><code>background-size</code> が <code>contain</code> または <code>cover</code> の場合</dt> + <dd>固有の比率を維持するため、画像は背景配置領域の中に収まるか、背景配置領域を覆うように描画されます。画像が固有の比率を持たない場合は、背景配置領域の寸法で描画されます。</dd> + <dt><code>background-size</code> が <code>auto</code> または <code>auto auto</code> の場合</dt> + <dd> + <ul> + <li>画像に水平および垂直の固有の寸法がある場合は、その寸法で描画されます。</li> + <li>画像に固有の寸法も固有の比率もない場合は、背景配置領域の寸法で描画されます。</li> + <li>画像に固有の寸法はない物の固有の比率がある場合は、 <code>contain</code> が指定された場合のように描画されます。</li> + <li>画像に一方だけ固有の寸法があり、固有の比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と固有の比率を使用して計算されます。</li> + <li>画像に一方だけ固有の寸法があり、固有の比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。</li> + </ul> + </dd> + <dd> + <div class="note"><strong>メモ:</strong> SVG 画像には <code><a href="/ja/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> 属性があり、既定では <code>contain</code> と同等です。 Firefox 43 では、 Chrome 52 とは対照的に、明確に <code>background-size</code> が設定されると <code>preserveAspectRatio</code> が無視されます。</div> + </dd> + <dt><code>background-size</code> の一方が <code>auto</code> でもう一方が <code>auto</code> ではない場合</dt> + <dd> + <ul> + <li>画像に固有の比率がある場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は指定された寸法と固有の比率を使用して計算されます。</li> + <li>画像に固有の比率がない場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような固有の寸法がない場合、背景配置領域の適切な寸法になります。</li> + </ul> + </dd> +</dl> + +<div class="note"> +<p><strong>メモ:</strong> 固有の寸法や比率を持たないベクター画像の背景の拡大縮小は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。</p> +</div> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<p>例については <a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> を参照してください。</p> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>背景としてグラデーションを定義し、<code>background-size</code> をそれにあわせて定義した場合には、単独の auto を使うサイズを指定しないか、width 値だけを使って定義するのがよいでしょう (例えば <code>background-size: 50%</code>)。こういった場合のグラデーションの描画方法は Firefox 8 で変更され、現在のところ <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 の <code>background-size</code> 仕様</a> や <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">CSS3 の Image Values gradient 仕様</a> に完全準拠した描画方式をすべて実装していない他ブラウザと、たいていは一致しません。</p> + +<pre class="brush: css notranslate">.gradient-example { + width: 50px; + height: 100px; + background-image: linear-gradient(blue, red); + + /* 利用が安全ではない */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; + + /* 利用可能 */ + background-size: 25px 50px; + background-size: 50% 50%; +} +</pre> + +<p>なお、 <code><gradient></code> に対してピクセルの寸法と <code>auto</code> を利用することは推奨されません。 Firefox の 8 より前と、 Firefox 8 のレンダリングを実装していないブラウザーでは、背景が指定されている要素の正確な寸法が分からないと、レンダリングできないからです。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.properties.background-size")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">背景画像の拡大縮小</a></li> + <li><a href="/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds">背景 SVG の拡大縮小</a></li> + <li>{{cssxref("object-fit")}}</li> +</ul> |