2024/06/28 (更新日:2024/07/11)

【CSS】「メディア特性」の「orientation」の使い方の解説！【メディア特性】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事では「メディアクエリー」の「メディア特性」の「orientation」の使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

この記事の内容！

また、下の動画でも「メディアクエリー」の「メディア特性」の「orientation」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそも「メディアクエリー」とは何か？

そもそも「メディアクエリー」って何？？？という方はまず下記の記事からどうぞ！こちらで丁寧に解説しています！

【CSS】「メディアクエリー」とは何か？【分かりやすい】

「メディア特性」の「orientation」を使うと、ビューポートの「縦横比」によって条件分岐することができます。

画面が縦長なのか横長なのかでスタイルを分けたりする時に使います。

「orientation」に指定できる値は下記の２つがあります。

これらを使うことができます。

「orientation」の使い方をまとめますね！

@media (orientation: portrait) {
    body {
        background-color: purple;
    }
}

「portrait」を使うと、「ビューポート」が縦長、もしくは縦と横の長さが等しい場合に「true」になります。

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

「landscape」を使うと、「ビューポート」が横長の場合に「true」になります。

大学生が夏休みにweb制作で13万円稼ぐまでにやったこと。【経験談】

「メディア特性」の「orientation」を使うと、ビューポートの「縦横比」によって条件分岐することができる。

「orientation」に指定できる値は下記の２つがある。

「portrait」を使うと、「ビューポート」が縦長、もしくは縦と横の長さが等しい場合に「true」になる。

「landscape」を使うと、「ビューポート」が横長の場合に「true」になる。

こんな感じですかね！

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

それではこんな感じでこの記事を終わります！

ではまた！