From c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 22:08:32 +0900 Subject: CSS 画像の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/16 時点の英語版に同期 --- files/ja/web/css/object-position/index.md | 128 ++++++++++++++---------------- files/ja/web/css/object-position/mdn.svg | 1 + 2 files changed, 59 insertions(+), 70 deletions(-) create mode 100644 files/ja/web/css/object-position/mdn.svg (limited to 'files/ja/web/css/object-position') 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 --- -
{{CSSRef}}
+{{CSSRef}} -

object-position プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.

+**`object-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックス内における[置換要素](/ja/docs/Web/CSS/Replaced_element)の中身の配置を指定します。ボックスの領域内で置換要素のオブジェクトに覆われていない部分は、要素の背景が表示されます。 -

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.

+置換要素の本来のサイズ (すなわち、自然なサイズ) を、その要素のボックス内に合わせる方法を調整するには、{{cssxref("object-fit")}} プロパティを使用することができます。 -
{{EmbedInteractiveExample("pages/css/object-position.html")}}
+{{EmbedInteractiveExample("pages/css/object-position.html")}} +## 構文 - -

{{cssinfo}}

- -

構文

- -
/* <position> 値 */
+```css
+/*  値 */
 object-position: center top;
 object-position: 100px 50px;
 
 /* グローバル値 */
 object-position: inherit;
 object-position: initial;
+object-position: revert;
 object-position: unset;
-
+``` + +### 値 + +- {{cssxref("<position>")}} + - : 要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値です。相対値または絶対値のオフセットを指定できます。 -

値

+> **Note:** 置換要素がボックス外にはみ出る位置も指定できます。 -
-
<position>
-
要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値による {{cssxref("<position>")}} です。相対値または絶対値のオフセットを指定できます。また、要素のボックスの外側の位置も指定できます。
-
+## Formal definition -
-

注: 要素がボックス外にはみ出る位置も指定できます。

-
+{{cssinfo}} -

形式文法

+## Formal syntax {{csssyntax}} -

例

+## Examples -

HTML コンテンツ

+

画像の内容の配置を設定

-
<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
-<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
-
+#### HTML -

CSS コンテンツ

+それぞれ MDN のロゴを表示する 2 つの {{HTMLElement("img")}} 要素があります。 -
img {
-  width: 150px;
-  height: 100px;
-  border: 1px solid #000;
-  background-color: yellow;
+```html
+MDN Logo
+MDN Logo
+```
+
+#### CSS
+
+この CSS には、`` 要素自体の既定のスタイルと、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%;
 }
-
- -

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.

- -

出力

+``` -

{{EmbedLiveSample('Example', '100%','300px' )}}

+1 枚目の画像は、その左端が要素のボックスの左端から 10 ピクセルはみ出して配置されています。2 番目の画像は、その右端が要素のボックスの右端と同じ位置にあり、要素のボックスの高さの 10% の位置にあります。 -

仕様

+#### Result - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}最初期の定義
+{{ EmbedLiveSample('Positioning_image_content', '100%','600px') }} -

ブラウザ実装状況

+## Specifications -
+{{Specifications}} +## Browser compatibility -

{{Compat("css.properties.object-position")}}

-
+{{Compat}} -

関連情報

+## See also - +- その他の画像関連 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 @@ + \ No newline at end of file -- cgit v1.2.3-54-g00ecf