From 69de90014cbebf425786e59bc3b125a860d463e8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 7 Dec 2021 11:33:37 +0900 Subject: CSS メディアクエリーに関する記事を修正 (#3220) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Glossary/Forbidden_header_name の変換準備 * Glossary/Forbidden_header_name を更新 - 2021/10/18 時点の英語版に同期 * Web/CSS/font-smooth を新規翻訳 - 2021/08/13 時点の英語版に同期 * Glossary/Forbidden_header_name の変換準備 * Glossary/Forbidden_header_name を更新 - 2021/10/18 時点の英語版に同期 * メディアクエリーのトップページを更新準備 * 2021/08/13 時点の英語版に同期 リダイレクトを修正 * 2021/10/22 時点の英語版に同期 * メディアクエリー関係のガイドを変換準備 * 2021/10/22 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * メディア特性の文書の変換準備 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/09/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 -webkit-device-pixel-ratio の追加修正 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * メディアクエリー関係の文書へのリンクを修正 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/11/16 時点の英語版に同期 * 2021/10/04 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 * 2021/08/13 時点の英語版に同期 --- files/ja/web/css/@media/aspect-ratio/index.html | 124 ------------------------ files/ja/web/css/@media/aspect-ratio/index.md | 105 ++++++++++++++++++++ 2 files changed, 105 insertions(+), 124 deletions(-) delete mode 100644 files/ja/web/css/@media/aspect-ratio/index.html create mode 100644 files/ja/web/css/@media/aspect-ratio/index.md (limited to 'files/ja/web/css/@media/aspect-ratio') diff --git a/files/ja/web/css/@media/aspect-ratio/index.html b/files/ja/web/css/@media/aspect-ratio/index.html deleted file mode 100644 index b0cb3236f8..0000000000 --- a/files/ja/web/css/@media/aspect-ratio/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: aspect-ratio -slug: Web/CSS/@media/aspect-ratio -tags: - - '@media' - - CSS - - Reference - - メディアクエリ - - メディア特性 -translation_of: Web/CSS/@media/aspect-ratio ---- -
{{cssref}}
- -

CSS の aspect-ratio メディア特性は、{{glossary("viewport", "ビューポート")}}のアスペクト比を調べるために使用します。

- -

構文

- -

aspect-ratio 特性は、ビューポートの幅対高さのアスペクト比を表現する {{cssxref("<ratio>")}} 値で指定します。これは範囲の特性であり、つまり接頭辞の付いた min-aspect-ratio および max-aspect-ratio の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

- -

例

- -

以下の例は独自のビューポートを生成する {{htmlElement("iframe")}} に含まれています。 <iframe> の大きさを変更して aspect-ratio の変化を確認してください。

- -

HTML

- -
<div id='inner'>
-  ビューポートの幅と高さを変更しながら、この要素を見ていてください。
-</div>
-
- -

CSS

- -
/* 最小アスペクト比 */
-@media (min-aspect-ratio: 8/5) {
-  div {
-    background: #9af; /* blue */
-  }
-}
-
-/* 最大アスペクト比 */
-@media (max-aspect-ratio: 3/2) {
-  div {
-    background: #9ff;  /* cyan */
-  }
-}
-
-/* 正確なアスペクト比。上書きを防ぐために最下部に配置 */
-@media (aspect-ratio: 1/1) {
-  div {
-    background: #f9a; /* red */
-  }
-}
-
- - - -

結果

- -
-

{{ EmbedLiveSample('_Example', '300px', '400px') }}

-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}変更なし
{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.at-rules.media.aspect-ratio")}}

diff --git a/files/ja/web/css/@media/aspect-ratio/index.md b/files/ja/web/css/@media/aspect-ratio/index.md new file mode 100644 index 0000000000..db53a50b50 --- /dev/null +++ b/files/ja/web/css/@media/aspect-ratio/index.md @@ -0,0 +1,105 @@ +--- +title: aspect-ratio +slug: Web/CSS/@media/aspect-ratio +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.aspect-ratio +translation_of: Web/CSS/@media/aspect-ratio +--- +{{CSSRef}} + +**`aspect-ratio`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、{{glossary("viewport", "ビューポート")}}のアスペクト比を調べるために使用します。 + +## 構文 + +`aspect-ratio` 特性は、ビューポートの幅対高さのアスペクト比を表現する {{cssxref("<ratio>")}} 値で指定します。これは範囲の特性であり、接頭辞の付いた **`min-aspect-ratio`** および **`max-aspect-ratio`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。 + +## 例 + +以下の例は独自のビューポートを生成する {{htmlElement("iframe")}} に含まれています。 ` +``` + +```css hidden +iframe{ +  display:block; +} +``` + +```js hidden +outer.style.width=outer.style.height="165px" + +w.onchange=w.oninput=function(){ + outer.style.width=w.value+"px" + wf.textContent="width:"+w.value +} +h.onchange=h.oninput=function(){ + outer.style.height=h.value+"px" + hf.textContent="height:"+h.value +} +``` + +{{ EmbedLiveSample('Result', '300px', '350px') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) -- cgit v1.2.3-54-g00ecf