diff options
Diffstat (limited to 'files/ja/web/css/image-orientation')
| -rw-r--r-- | files/ja/web/css/image-orientation/index.md | 142 | ||||
| -rw-r--r-- | files/ja/web/css/image-orientation/mdn.svg | 1 |
2 files changed, 64 insertions, 79 deletions
diff --git a/files/ja/web/css/image-orientation/index.md b/files/ja/web/css/image-orientation/index.md index 7366e9755b..bbb8eb4009 100644 --- a/files/ja/web/css/image-orientation/index.md +++ b/files/ja/web/css/image-orientation/index.md @@ -3,127 +3,111 @@ title: image-orientation slug: Web/CSS/image-orientation tags: - CSS - - CSS Image - - CSS Property - - CSS プロパティ - CSS 画像 + - CSS プロパティ - EXIF - - Experimental + - 実験的 + - 画像補正 + - 画像の向き + - Deprecated + - 向き - Reference - image-orientation - - リファレンス - - 画像の向き - - 画像補正 + - recipe:css-property +browser-compat: css.properties.image-orientation translation_of: Web/CSS/image-orientation --- -<p><span class="seoSummary"><strong><code>image-orientation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。</span>向きの調整以外に使用しては<em>いけません</em>。そのような場合は、 {{cssxref("transform")}} プロパティで <code>rotate</code> {{cssxref("<transform-function>")}} の値を使用してください。</p> +**`image-orientation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。 -<div class="warning"> -<p><strong>警告:</strong> このプロパティは仕様書で非推奨となっています。この機能は {{HTMLElement("img")}} や {{HTMLElement("picture")}} 要素のプロパティに、おそらく <code>from-image</code> の例外を除いて移行する可能性があります。 <code>flip</code> および <code><angle></code> の値は Firefox 63 で廃止されました。</p> -</div> +> **Note:** `from-image` と `none` 以外の値は、仕様書では非推奨とされています。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ image-orientation: none; image-orientation: from-image; /* 画像の EXIF データを使用 */ /* グローバル値 */ image-orientation: inherit; image-orientation: initial; +image-orientation: revert; image-orientation: unset; /* 廃止された値 {{obsolete_inline(63)}} */ image-orientation: 90deg; /* 90度回転 */ image-orientation: 90deg flip; /* 90度回転して、水平方向に反転 */ -image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */</pre> - -<p>{{cssinfo}}</p> +image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */ +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>none</code></dt> - <dd>既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。</dd> - <dt><code>from-image</code></dt> - <dd>画像に含まれている {{interwiki("wikipedia", "EXIF")}} 情報を使用して、画像の向きを適切にします。</dd> - <dt>{{cssxref("<angle>")}} {{non-standard_inline}}{{obsolete_inline(63)}}</dt> - <dd>画像を回転させる {{cssxref("<angle>")}}。 もっとも近い <code>90deg</code> (<code>0.25turn</code>) 単位の値に丸められます。</dd> - <dt><code>flip</code> {{non-standard_inline}}{{obsolete_inline(63)}}</dt> - <dd>{{cssxref("<angle>")}} 値に従って回転した後に、画像を水平方向に反転します (つまり鏡像にします)。 {{cssxref("<angle>")}} を指定しない場合は、 <code>0deg</code> を使用します。</dd> -</dl> +- `none` + - : 既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。 +- `from-image` + - : 画像に含まれている {{interwiki("wikipedia", "EXIF")}} 情報を使用して、画像の向きを適切にします。 +- {{cssxref("<angle>")}}{{deprecated_inline}} + - : 画像を回転させる {{cssxref("<angle>")}}。 もっとも近い `90deg` (`0.25turn`) 単位の値に丸められます。 +- `flip`{{deprecated_inline}} + - : {{cssxref("<angle>")}} 値に従って回転した後に、画像を水平方向に反転します (つまり鏡像にします)。{{cssxref("<angle>")}} を指定しない場合は、 `0deg` が使用されます。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 解説 -{{csssyntax}} - -<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> +このプロパティは、回転したカメラで撮影された画像の方向を修正するため*だけ*を目的としています。自由に回転させるために使用するべきでは*ありません*。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、{{cssxref("transform")}} プロパティに `rotate` キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。 -<p>このプロパティは、回転したカメラで撮影された画像の方向を修正するため<em>だけ</em>を目的としています。自由に回転させるために使用するべきでは<em>ありません</em>。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、 {{cssxref("transform")}} プロパティに <code>rotate</code> キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。</p> +{{cssxref("<transform-function>")}} などの他の CSS プロパティとの組み合わせで使用された場合、 `image-orientation` による回転は、常に他の変形が行われる前に適用されます。 -<p>{{cssxref("<transform-function>")}} などの他の CSS プロパティとの組み合わせで使用された場合、 <code>image-orientation</code> による回転は、常に他の変形が行われる前に適用されます。</p> +## Formal definition -<h2 id="Example" name="Example">例</h2> +{{cssinfo}} -<h3 id="CSS">CSS</h3> +## Formal syntax -<pre class="brush: css">#image { - image-orientation: from-image; /* ライブ例の中で変更することができます */ -} -</pre> +{{csssyntax}} -<div class="hidden"> -<h3 id="HTML">HTML</h3> +## Examples -<pre class="brush: html"><img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg" - alt="Orientation taken from the image"> -<select id="imageOrientation"> - <option value="from-image">from-image</option> - <option value="none">none</option> -</select> -</pre> +<h3 id="Orienting_image_from_image_data">画像データから画像の向きを変更</h3> -<h3 id="JavaScript">JavaScript</h3> +#### CSS -<pre class="brush: js">var imageOrientation = document.getElementById("imageOrientation"); +```css +#image { + image-orientation: from-image; /* ライブ例の中で変更することができます */ +} +``` + +```html hidden +<img id="image" src="mdn.svg" + alt="Orientation taken from the image"> +<select id="imageOrientation"> + <option value="from-image">from-image</option> + <option value="none">none</option> +</select> +``` + +```js hidden +var imageOrientation = document.getElementById("imageOrientation"); imageOrientation.addEventListener("change", function (evt) { document.getElementById("image").style.imageOrientation = evt.target.value; }); -</pre> -</div> +``` -<h3 id="Result" name="Result">結果</h3> +#### 結果 -<p>{{EmbedLiveSample("Example", "100%", 240)}}</p> +{{EmbedLiveSample("Orienting_image_from_image_data", "100%", 240)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## Specifications -<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 Images', '#the-image-orientation', 'image-orientation')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## Browser compatibility -<p>{{Compat("css.properties.image-orientation")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## See also -<ul> - <li>ほかの画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}</li> - <li>{{cssxref("transform")}} および {{cssxref("rotate")}}</li> -</ul> +- その他の画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}} +- {{cssxref("transform")}} および {{cssxref("rotate")}} -<div>{{CSSRef}}</div> +{{CSSRef}} diff --git a/files/ja/web/css/image-orientation/mdn.svg b/files/ja/web/css/image-orientation/mdn.svg new file mode 100644 index 0000000000..bbdbacc6fc --- /dev/null +++ b/files/ja/web/css/image-orientation/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 |
