IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / CSSでデバイスの縦長横長を判別 @media(orientation)

CSSでデバイスの縦長横長を判別 @media(orientation)

2019/12/27 CSS

デバイスの表示領域が縦長か横長かで CSS を変更したいと思ったことはありませんか?

  • CSS メディア特性 orientation
  • 具体例

CSS メディア特性 orientation

メディアクエリのメディア特性に orientation というものがあることを知りませんでした(涙)。

これまでは javascript で

    if (window.innerHeight > window.innerWidth) {
        document.body.classList.remove('landscape');
        document.body.classList.add('portrait');
    } else {
        document.body.classList.remove('portrait');
        document.body.classList.add('landscape');
    }

などと、body タグにクラスを付加して切り分けていましたが、この orientation を使えばメディアクエリで振り分けられます。

orientation – CSS: カスケーディングスタイルシート | MDN

構文

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

キーワード値

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

注意すべきは端末の向きではなく、あくまでもビューポートの幅と高さの比較だということです。

具体例

www.movieimpressions.com

このサイトのトップページで使っています。

.listingNavi {
    display: flex;
    flex-direction: column;
}
@media (orientation: landscape){
    .listingNavi {
        flex-direction: row;
    }
}

クラス名の listingNavi は3つの画像の親要素に設定されているクラスです。

たとえば、@media (min-width: 768px) {} ですと、スマホを横向きにしても画像が縦並びのままになりますが、@media (orientation: landscape){} を使いますと横並びに変わります。

これは便利です!

モバイル ユーザビリティ検査、おかしくないか!?
2020年はモバイル ユーザビリティエラー対策で始まる
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/09/26

IntersectionObserverで要素の位置を知る

2023/09/14

GDPRを設定する

2023/08/30

scroll-behavior:smoothは履歴に残る

2023/08/22

要素がトップにきたことを感知する-IntersectionObserver

2023/08/8

ホームページとは別に投稿一覧ページをつくる方法-WordPress

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips110
  • javascript101
  • Joomla!88
  • Wordpress79
  • Windows68
  • CSS64
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google36
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com