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/orientation/index.html | 94 -------------------------- files/ja/web/css/@media/orientation/index.md | 74 ++++++++++++++++++++ 2 files changed, 74 insertions(+), 94 deletions(-) delete mode 100644 files/ja/web/css/@media/orientation/index.html create mode 100644 files/ja/web/css/@media/orientation/index.md (limited to 'files/ja/web/css/@media/orientation') diff --git a/files/ja/web/css/@media/orientation/index.html b/files/ja/web/css/@media/orientation/index.html deleted file mode 100644 index 1781ac5aa0..0000000000 --- a/files/ja/web/css/@media/orientation/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: orientation -slug: Web/CSS/@media/orientation -tags: - - '@media' - - CSS - - Reference - - メディアクエリ - - メディア特性 -translation_of: Web/CSS/@media/orientation ---- -
{{cssref}}
- -

orientation は CSS のメディア特性で、{{glossary("viewport", "ビューポート")}} (またはページ付きメディアではページボックス) の向きを調べるために使用することができます。

- -
-

メモ: この特性は端末の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。

-
- -

構文

- -

orientation 特性は以下の一覧のうち一つのキーワード値で指定します。

- -

キーワード値

- -
-
portrait
-
ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。
-
landscape
-
ビューポートは横長です。つまり、幅が高さよりも大きい状態です。
-
- -

例

- -

HTML

- -
<div>Box 1</div>
-<div>Box 2</div>
-<div>Box 3</div>
-
- -

CSS

- -
body {
-  display: flex;
-}
-
-div {
-  background: yellow;
-}
-
-@media (orientation: landscape) {
-  body {
-    flex-direction: row;
-  }
-}
-
-@media (orientation: portrait) {
-  body {
-    flex-direction: column;
-  }
-}
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様書

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

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/@media/orientation/index.md b/files/ja/web/css/@media/orientation/index.md new file mode 100644 index 0000000000..de8eb2a077 --- /dev/null +++ b/files/ja/web/css/@media/orientation/index.md @@ -0,0 +1,74 @@ +--- +title: orientation +slug: Web/CSS/@media/orientation +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.orientation +translation_of: Web/CSS/@media/orientation +--- +{{CSSRef}} + +**`orientation`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、{{glossary("viewport", "ビューポート")}} (または[ページ付きメディア](/ja/docs/Web/CSS/Paged_media)ではページボックス) の向きを調べるために使用することができます。 + +> **Note:** この特性は*端末*の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。 + +## 構文 + +`orientation` 特性は以下の一覧のうち一つのキーワード値で指定します。 + +### キーワード値 + +- `portrait` + - : ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。 +- `landscape` + - : ビューポートは横長です。つまり、幅が高さよりも大きい状態です。 + +## 例 + +### HTML + +```html +
Box 1
+
Box 2
+
Box 3
+``` + +### CSS + +```css +body { + display: flex; +} + +div { +  background: yellow; +} + +@media (orientation: landscape) { + body { + flex-direction: row; + } +} + +@media (orientation: portrait) { + body { + flex-direction: column; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -- cgit v1.2.3-54-g00ecf