diff options
Diffstat (limited to 'files/ja/web/css/background-position-x/index.md')
| -rw-r--r-- | files/ja/web/css/background-position-x/index.md | 138 |
1 files changed, 77 insertions, 61 deletions
diff --git a/files/ja/web/css/background-position-x/index.md b/files/ja/web/css/background-position-x/index.md index b277e8f79f..4fcc1b79f9 100644 --- a/files/ja/web/css/background-position-x/index.md +++ b/files/ja/web/css/background-position-x/index.md @@ -3,33 +3,35 @@ title: background-position-x slug: Web/CSS/background-position-x tags: - CSS + - CSS 背景 - CSS プロパティ - - CSS 背景と境界 - Experimental - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.background-position-x translation_of: Web/CSS/background-position-x --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-position-x</code></strong> プロパティは、各背景画像における水平の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。</p> +**`background-position-x`** は [CSS](/ja/docs/Web/CSS) のプロパティで、各背景画像における水平の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。 -<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-position-x.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> -<p>このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。</p> +このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ background-position-x: left; background-position-x: center; background-position-x: right; -/* <percentage> 値 */ +/* <percentage> 値 */ background-position-x: 25%; -/* <length> 値 */ +/* <length> 値 */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; @@ -44,61 +46,75 @@ background-position-x: 0px, center; /* グローバル値 */ background-position-x: inherit; background-position-x: initial; +background-position-x: revert; background-position-x: unset; -</pre> +``` -<p><code>background-position-x</code> プロパティは、1つ以上の値をカンマで区切って指定します。</p> +`background-position-x` プロパティは、1 つ以上の値をカンマで区切って指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>left</code></dt> - <dd>背景画像の左端を、背景位置レイヤーの左端に配置します。</dd> - <dt><code>center</code></dt> - <dd>背景画像を背景位置レイヤーの方向の中央に配置します。</dd> - <dt><code>right</code></dt> - <dd>背景画像の右端を、背景位置レイヤーの右端に配置します。</dd> - <dt>{{cssxref("<length>")}}</dt> - <dt>指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。</dt> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の<em>右端</em>が、コンテナーの<em>右端</em>の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。</dd> -</dl> +- `left` + - : 背景画像の左端を、背景位置レイヤーの左端に配置します。 +- `center` + - : 背景画像を背景位置レイヤーの方向の中央に配置します。 +- `right` + - : 背景画像の右端を、背景位置レイヤーの右端に配置します。 +- {{cssxref("<length>")}} + - : 指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。 +- {{cssxref("<percentage>")}} + - : 指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の*右端*が、コンテナーの*右端*の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<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('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td> - <td>{{Spec2('CSS4 Backgrounds')}}</td> - <td>長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.background-position-x")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-position-y")}}</li> - <li>{{cssxref("background-position-inline")}}</li> - <li>{{cssxref("background-position-block")}}</li> - <li><a href="/ja/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景の使用</a></li> -</ul> +## 例 + +<h3 id="Basic_example">基本的な例</h3> + +次の例は、シンプルな背景画像の実装で、background-position-x と background-position-y を使って、画像の水平方向と垂直方向の位置を別々に定義しています。 + +#### HTML + +```html +<div></div> +``` + +#### CSS + +```css +div { + width: 300px; + height: 300px; + background-color: skyblue; + background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom 10px; +} +``` + +#### 結果 + +{{EmbedLiveSample('Basic_example', '100%', 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("background-position")}} +- {{cssxref("background-position-y")}} +- {{cssxref("background-position-inline")}} +- {{cssxref("background-position-block")}} +- [複数の背景の使用](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) |