orientation

構文

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

キーワード値

portrait

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

landscape

ビューポートは横長です。つまり、幅が高さよりも大きい状態です。

例

縦長の向き

この例では、HTML に 3 つのボックスが存在し、orientation メディア特性を使用して、行のレイアウト（横向き）と列のレイアウト（縦向き）を切り替えています。

出力の例は、高さが幅よりも大きい <iframe> に埋め込まれているため、ボックスは列のレイアウトになります。

HTML

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

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

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

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;
  }
}

仕様書

ブラウザーの互換性