| CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3LQGYHdtC-dHBDLycRzM3sxrCt9HbtACPePndzCFqTt0Voj9aEKbvluRd4vFrDGO4B1
cache-control: public, max-age=3600
expires: Wed, 08 Oct 2025 04:08:02 GMT
last-modified: Wed, 08 Oct 2025 01:13:25 GMT
etag: W/"c3d86e5710e9298b9104efcaf0fe2ae6"
x-goog-generation: 1759886005656429
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 272581
x-goog-meta-goog-reserved-file-mtime: 1759884128
x-goog-hash: crc32c=M/iFWQ==, md5=w9huVxDpKYuRBO/K8P4q5g==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: a4b79306fe6d0d79d6defa5949f428ff
date: Wed, 08 Oct 2025 03:08:03 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
orientation - CSS: カスケーディングスタイルシート | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
orientation
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
orientation は CSS のメディア特性で、ビューポート (またはページメディアではページボックス) の向きを調べるために使用することができます。
メモ: この特性は端末の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。
構文
orientation 特性は以下の一覧のうち一つのキーワード値で指定します。
キーワード値
例
縦長の向き
この例では、HTML に 3 つのボックスが存在し、orientation メディア特性を使用して、行のレイアウト（横向き）と列のレイアウト（縦向き）を切り替えています。
出力の例は、高さが幅よりも大きい <iframe> に埋め込まれているため、ボックスは列のレイアウトになります。
HTML
html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
CSS
css
body {
display: flex;
}
div {
background: yellow;
width: 200px;
height: 200px;
margin: 0.5rem;
padding: 0.5rem;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
結果
横長の向き
この例は、前回の例とまったく同じコードです。 HTML には 3 つのボックスがあり、orientation メディア機能を使用して、行レイアウト（横向き）と列のレイアウト（縦向き）を切り替えています。
ただし、この例では、出力例は、高さが幅よりも小さい <iframe> に埋め込まれているため、ボックスは 1 行のレイアウトになります。
HTML
html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
CSS
css
body {
display: flex;
}
div {
background: yellow;
width: 200px;
height: 200px;
margin: 0.5rem;
padding: 0.5rem;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
仕様書
| Specification |
|---|
| Media Queries Level 4 # orientation |
ブラウザーの互換性
Loading…