Web blog WEBブログ

デバイスの向きによってCSSを変更する方法

2020.04.08

こんにちは。
コーダーの兼山です。

メディアクエリは、画面の幅だけでなく、デバイスの向きも検知できるのをご存知ですか?
スマホや、タブレットを縦向き、横向きにした際のスタイルを変更することができます。

デバイスの”この時だけ”の指定を可能にするテクニックを紹介します。

デバイスが横向きの場合

デバイスが横向きの時にCSSを適用させたい場合は、
メディアクエリの orientation を使用し、値に landscape を指定します。

@media (orientation: landscape){
  デバイスが横向きの場合の記述
}

デバイスが縦向きの場合

デバイスが縦向きの時にCSSを適用させたい場合は、
メディアクエリの orientation を使用し、値に portrait を指定します。

@media (orientation: portrait){
デバイスが縦向きの場合の記述
}

条件に画面サイズを追加する場合

例:画面が横向きで画面の横幅が767px以下の場合

and でつないで条件を追加します。

@media (orientation: landscape) and (max-width: 767px){
デバイスが横向き、画面の横幅が 767px 以下の場合の記述
}

【参考】ipadのみを指定する方法

iPadのみを指定したい場合、以下のメディアクエリで指定をすることができます。

【iPad 縦横両方】
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
iPadの縦横両方の記述
}

【iPad 縦向きのみ】
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
iPadが縦向きのみの記述
}

【iPad 横向きのみ】
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
iPadが横向きのみの記述
}

まとめ

レスポンシブコーディングが増えてきた最近では、メディアクエリを使うことが当たり前になっています。
これらのテクニックは、思い掛けないレイアウト崩れの対策や、他の表示に影響を与えたくない場合などに有効です。
メディアクエリの中でも、デバイスの向きで指定できるパターンを紹介しました。

ご相談・カスタマイズご依頼

弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口