@media (orientation: ...)

アットメディアオリエンテーション（メディアクエリ）

意味デバイスの画面の向きが一致する場合に適用

@media (orientation: ...)とは？

@media (orientation: ...)は、メディアクエリの一部で、デバイスの画面が横向き（landscape）か縦向き（portrait）かに基づいて、異なるスタイルを適用するために使用します。これにより、デバイスの向きが変わったときに、ページのレイアウトが適切に調整されるようにすることができます。

@media (orientation: ...)の具体的な使い方

横向き画面での背景色設定の例

@media (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

デバイスの画面が横向きのときに、body要素の背景色を薄い青色に設定しています。画面が縦向きの場合はこのスタイルは適用されません。

縦向き画面でのサイドバー非表示の例

@media (orientation: portrait) {
  .sidebar {
    display: none;
  }
}

デバイスの画面が縦向きのときに、クラス名'.sidebar'の要素を非表示にします。

@media (orientation: ...)に関するよくある質問

Q. orientationの値は何がある？

A. orientationには「landscape」（横向き）と「portrait」（縦向き）の2つの値があります。

Q. 向きの判定基準は？

A. 通常、幅が高さより大きい場合はlandscape、高さが幅より大きい場合はportraitと判定されます。

Q. デスクトップでも使える？

A. はい、デスクトップでも使用できます。ブラウザウィンドウのサイズ変更に応じて適用されるスタイルが変わります。

Q. 他のメディアクエリと併用可能？

A. はい、他のメディアクエリと組み合わせて使用できます。例：@media (orientation: landscape) and (min-width: 800px) { ... }

@media (orientation: ...)が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの@media (orientation: ...)や@media (color: ...)、@media (height: ...)、@media (width: ...)、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。