全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
デバイスの向きによってCSSを変更する方法
2020.04.08
※この記事は2020年04月08日時点の情報をもとに作成されました。
こんにちは。
コーダーの兼山です。
メディアクエリは、画面の幅だけでなく、デバイスの向きも検知できるのをご存知ですか？
スマホや、タブレットを縦向き、横向きにした際のスタイルを変更することができます。
デバイスの”この時だけ”の指定を可能にするテクニックを紹介します。
- 1. デバイスが横向きの場合
- 2. デバイスが縦向きの場合
- 3. 条件に画面サイズを追加する場合
- 4. 【参考】ipadのみを指定する方法
デバイスが横向きの場合
デバイスが横向きの時に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が横向きのみの記述
}
まとめ
レスポンシブコーディングが増えてきた最近では、メディアクエリを使うことが当たり前になっています。
これらのテクニックは、思い掛けないレイアウト崩れの対策や、他の表示に影響を与えたくない場合などに有効です。
メディアクエリの中でも、デバイスの向きで指定できるパターンを紹介しました。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…
