CSS 画像の文書を更新

- 2021/10/16 時点の英語版に同期

2 files changed, 59 insertions, 70 deletions

diff --git a/files/ja/web/css/object-position/index.md b/files/ja/web/css/object-position/index.md
index 81b998bbc8..51d6f63a95 100644
--- a/files/ja/web/css/object-position/index.md
+++ b/files/ja/web/css/object-position/index.md
@@ -3,66 +3,80 @@ title: object-position
 slug: Web/CSS/object-position
 tags:
   - CSS
-  - CSS Image
-  - CSS Property
+  - CSS 画像
+  - CSS プロパティ
+  - レイアウト
+  - 位置
   - Reference
+  - 置換要素
+  - css レイアウト
+  - object-position
+  - recipe:css-property
+browser-compat: css.properties.object-position
 translation_of: Web/CSS/object-position
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>object-position</code></strong> プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.</p>
+**`object-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックス内における[置換要素](/ja/docs/Web/CSS/Replaced_element)の中身の配置を指定します。ボックスの領域内で置換要素のオブジェクトに覆われていない部分は、要素の背景が表示されます。
 
-<p>You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the {{cssxref("object-fit")}} property.</p>
+置換要素の本来のサイズ (すなわち、自然なサイズ) を、その要素のボックス内に合わせる方法を調整するには、{{cssxref("object-fit")}} プロパティを使用することができます。
 
-<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div>
+{{EmbedInteractiveExample("pages/css/object-position.html")}}
 
+## 構文
 
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css">/* &lt;position&gt; 値 */
+```css
+/* <position> 値 */
 object-position: center top;
 object-position: 100px 50px;
 
 /* グローバル値 */
 object-position: inherit;
 object-position: initial;
+object-position: revert;
 object-position: unset;
-</pre>
+```
+
+### 値
+
+- {{cssxref("&lt;position&gt;")}}
+  - : 要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値です。相対値または絶対値のオフセットを指定できます。
 
-<h3 id="Values" name="Values">値</h3>
+> **Note:** 置換要素がボックス外にはみ出る位置も指定できます。
 
-<dl>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値による {{cssxref("&lt;position&gt;")}} です。相対値または絶対値のオフセットを指定できます。また、要素のボックスの外側の位置も指定できます。</dd>
-</dl>
+## Formal definition
 
-<div class="blockIndicator note">
-<p><strong>注:</strong> 要素がボックス外にはみ出る位置も指定できます。</p>
-</div>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## Formal syntax
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## Examples
 
-<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
+<h3 id="Positioning_image_content">画像の内容の配置を設定</h3>
 
-<pre class="brush: html">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/&gt;
-&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/&gt;
-</pre>
+#### HTML
 
-<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+それぞれ MDN のロゴを表示する 2 つの {{HTMLElement("img")}} 要素があります。
 
-<pre class="brush: css">img {
-  width: 150px;
-  height: 100px;
-  border: 1px solid #000;
-  background-color: yellow;
+```html
+<img id="object-position-1" src="mdn.svg" alt="MDN Logo"/>
+<img id="object-position-2" src="mdn.svg" alt="MDN Logo"/>
+```
+
+#### CSS
+
+この CSS には、`<img>` 要素自体の既定のスタイルと、2 つの画像それぞれに個別のスタイルが含まれています。
+
+```css
+img {
+  width: 300px;
+  height: 250px;
+  border: 1px solid black;
+  background-color: silver;
   margin-right: 1em;
+  object-fit: none;
 }
 
 #object-position-1 {
@@ -70,50 +84,24 @@ object-position: unset;
 }
 
 #object-position-2 {
-  object-position: 20% 10%;
+  object-position: 100% 10%;
 }
-</pre>
-
-<p>The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.</p>
-
-<h3 id="Output" name="Output">出力</h3>
+```
 
-<p>{{EmbedLiveSample('Example', '100%','300px' )}}</p>
+1 枚目の画像は、その左端が要素のボックスの左端から 10 ピクセルはみ出して配置されています。2 番目の画像は、その右端が要素のボックスの右端と同じ位置にあり、要素のボックスの高さの 10% の位置にあります。
 
-<h2 id="Specifications" name="Specifications">仕様</h2>
+#### Result
 
-<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 Images', '#the-object-position', 'object-position')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>最初期の定義</td>
-  </tr>
- </tbody>
-</table>
+{{ EmbedLiveSample('Positioning_image_content', '100%','600px') }}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+## Specifications
 
-<div>
+{{Specifications}}
 
+## Browser compatibility
 
-<p>{{Compat("css.properties.object-position")}}</p>
-</div>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## See also
 
-<ul>
- <li>ほかの画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
-</ul>
+- その他の画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}
diff --git a/files/ja/web/css/object-position/mdn.svg b/files/ja/web/css/object-position/mdn.svg
new file mode 100644
index 0000000000..bbdbacc6fc
--- /dev/null
+++ b/files/ja/web/css/object-position/mdn.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="200" width="226.855"><defs><linearGradient gradientTransform="translate(-353.18 -4908.622) scale(6.99647)" gradientUnits="userSpaceOnUse" id="a" y2="701.6" x2="66.7" y1="730.2" x1="66.7"><stop offset="0" style="stop-color:#2075bc;stop-opacity:1"/><stop offset="1" style="stop-color:#29aae1;stop-opacity:1"/></linearGradient><linearGradient gradientTransform="translate(-353.18 -4908.622) scale(6.99647)" gradientUnits="userSpaceOnUse" id="b" y2="701.6" x2="54.6" y1="730.2" x1="54.6"><stop offset="0" style="stop-color:#0a6aa8;stop-opacity:1"/><stop offset="1" style="stop-color:#1699c8;stop-opacity:1"/></linearGradient><linearGradient gradientTransform="translate(-353.18 -4908.622) scale(6.99647)" gradientUnits="userSpaceOnUse" id="c" y2="701.6" x2="70.7" y1="730.2" x1="70.7"><stop offset="0" style="stop-color:#0a6aa8;stop-opacity:1"/><stop offset="1" style="stop-color:#1699c8;stop-opacity:1"/></linearGradient></defs><path style="fill:url(#a)" d="m56.89 0-.353.354L0 22.969V200l56.537-21.555L113.427 200l56.538-21.555L226.855 200V22.969L169.965.354 169.61 0v.354l-56.183 22.261L56.89.354V0zm43.026 42.215c.968.017 1.938.077 2.91.187 7.067 1.767 13.783 4.595 20.85 6.008 6.36-1.767 14.487-3.533 20.494.707 3.887 3.887 7.773 8.48 6.006 14.487 10.954 12.014 34.983 13.427 41.697 22.615 1.06 1.413.353 11.66 2.473 17.668l.707 2.828c-2.12 4.24-7.068 15.9-5.301 13.426-1.767 2.473-3.534 3.18-8.48 2.12-4.24 2.828-6.714 4.24-11.307 6.714-4.947 1.06-15.9-2.474-20.848-3.534-9.187-1.766-9.894.354-18.021 4.594-12.014 6.007-9.541 20.85-14.135 29.33 0 1.06.354 1.766.707 2.826s.707 1.766.707 2.473c-13.78 1.767-27.209-.352-39.576-6.36-9.54-4.593-17.667-11.661-24.381-20.142 1.413-.707 3.178-1.766 4.592-2.473 1.06-.353 2.121-1.06 2.828-1.414H60.07c-3.18-.706-1.413-.353-3.886-.353 2.826-3.18 6.715-6.006 7.068-6.36l.352-.353c-3.534 1.06-8.834 2.474-11.66 5.3 1.06-4.946 4.594-8.128 6.36-12.015-4.24 2.12-8.481 4.949-12.015 8.13 0-3.888 4.595-7.776 6.715-10.956 1.413-2.12 3.534-3.886 4.594-6.36-4.24 1.414-14.135 6.713-18.022 9.186 1.767-6.007 9.895-15.193 14.488-19.787-4.593.353-14.134 6.007-18.021 8.127 0-.353.353-.707 0-1.06 3.18-4.948 12.72-12.721 17.314-16.608-5.3.707-15.9 6.36-20.847 8.127 4.24-7.774 18.374-17.313 25.088-22.967l-16.254 4.24c-2.474 0-4.595 1.766-6.715 1.413 8.48-8.481 25.796-23.322 37.103-30.39 0 0 13.665-9.626 28.184-9.374z"/><path style="fill:url(#b)" d="M56.89 0 0 22.969V200l56.89-21.555v-37.304a85.988 85.988 0 0 1-2.472-2.979 68.24 68.24 0 0 0 2.473-1.33v-2.936c-.21.011-.344.026-.707.026.226-.255.469-.503.707-.752v-3.707c-1.89.797-3.674 1.773-4.948 3.047.823-3.838 3.128-6.615 4.948-9.48v-1.8c-3.761 2.02-7.461 4.566-10.602 7.393 0-3.887 4.595-7.775 6.715-10.955 1.148-1.722 2.753-3.216 3.887-5.04v-1.05c-4.53 1.687-13.615 6.562-17.315 8.916 1.767-6.007 9.895-15.193 14.488-19.787-4.593.353-14.134 6.007-18.021 8.127 0-.353.353-.707 0-1.06 3.18-4.948 12.72-12.721 17.314-16.608-5.3.707-15.9 6.36-20.847 8.127 4.108-7.531 17.444-16.688 24.38-22.395v-.388l-15.546 4.056c-2.474 0-4.595 1.766-6.715 1.413 5.224-5.225 13.802-12.857 22.262-19.604V0z"/><path style="fill:url(#c)" d="m169.965 0-56.537 22.969v22.627c3.386 1.083 6.775 2.12 10.248 2.814 6.36-1.767 14.487-3.533 20.494.707 3.887 3.887 7.773 8.48 6.006 14.487 4.891 5.364 12.39 8.613 19.789 11.386V0zm-26.397 124.818c-4.455.05-6.377 2.037-12.472 5.217-12.014 6.007-9.541 20.85-14.135 29.33 0 1.06.354 1.766.707 2.826s.707 1.766.707 2.473a74.51 74.51 0 0 1-4.947.465V200l56.537-21.555v-49.47c-4.947 1.06-15.9-2.474-20.848-3.534-2.297-.441-4.063-.64-5.549-.623z"/></svg>
\ No newline at end of file