スマホなどデバイスの向きによってCSSのスタイルを変更したいと思ったことはありませんか？
CSSにはデバイスの向きを感知するメディアクエリが用意されています。
今回の記事ではスマホなどデバイスの向きによってCSSのスタイルを変更する方法をご紹介したいと思います。

縦向きと横向きでスタイルを変更する方法

縦向きの場合

スマホやタブレットなどのデバイスが縦向きの時の指定方法はこちら。

/* 縦向き */
@media screen and (orientation: portrait) {

}

以下の実装例では、縦向きの時のみ文字が表示されるようになっています。

p{
    color: #fff;
}
@media screen and (orientation: portrait) {
    p{
        color: #000;
    }
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

横向きの場合

スマホやタブレットなどのデバイスが横向きの時の指定方法はこちら。

/* 横向き */
@media screen and (orientation: landscape) {

}

以下の実装例では、縦向きの時のみ文字が表示されるようになっています。

p{
    color: #fff;
}
@media screen and (orientation: landscape) {
    p{
        color: #000;
    }
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

使用する場面とは

スマホの縦向き・横向きを検知してCSSを切り変える具体的な使用する場面はどんな時でしょうか。

レイアウトの制御が必要な場合

スマホの向きによってレイアウトが崩れてしまう場面では微調整するためにスマホの縦向き・横向きを検知してCSSを指定する必要があります。

閲覧する向きを限定したい場合

WEBサイトによってはスマホの向きを限定したいという場面があるかもしれません。
WEBアプリなどの場合、スマホの向きを片方に限定したいというような場面で以下のようにCSSを指定して、スマホの向きの変更を促すことが出来ます。

<!-- アプリの内容を記述 -->
<div class="app">
    <p>アプリをお楽しみください！</p>
</div>
<!-- アプリの内容を記述 -->

<!-- 警告テキスト -->
<p class="error">このサービスはデバイスを縦向き限定のサービスです。</p>
<!-- 警告テキスト -->

@media screen and (orientation: portrait) {
    .app{
        display: block;
    }
    .error{
        display: none;
    }
}
@media screen and (orientation: landscape) {
    .app{
        display: none;
    }
    .error{
        display: block;
    }
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
スマホなどデバイスの向きでCSSを指定出来ると知っているとわざわざjsで処理をしなくても対応することが出来るようになります。
使用する機会は限られますが知っておいて損はない内容ですね