[CSS]スマートフォンの横向き用のCSSを追加した話

CSS、JavaScript

最近のスマホって大きいですよね…下手すればポケットに入らないくらいに。

そんなスマホ。横向きでwebサイトって見ますか?
ほとんどの人が横向きっで利用するのはゲームなんかのアプリやYou Tubeなんかの動画サイトかと思います。

今回、クライアント様から、スマホで横で見た時にも一部対応してほしいとの要望がありましたのでそちらの備忘録を。

横向きのコード

スマホが横向きの時に読み込ませたい場合はメディアクエリで対応してしまいましょう。

@media screen and (orientation: landscape) {
	/*横向きのコードを入力*/
}

これで横向きに対応させることが出来ます。
※タブレットの横向きでもこちらのコードが反映させてしまうので注意してください。

縦向きのコード

ちなみに縦向きの際は下記のコードとなります。

@media screen and (orientation: portrait) {
	/*縦向きのコードを入力*/
}

orientationとは

CSS orientationは、HTML要素の配置や方向性を指定するためのCSSプロパティです。具体的には、要素の縦方向(portrait)または横方向(landscape)の向きを指定することができます。
※ただし、このプロパティは現在、一部のブラウザでのみサポートされています。

.container {
  width: 300px;
  height: 200px;
  background-color: #eee;
}

p {
  font-size: 24px;
  text-align: center;
}

@media (orientation: landscape) {
  .container {
    width: 600px;
    height: 400px;
  }
}

この場合、.container要素の初期の幅と高さはそれぞれ300pxと200pxに設定されています。しかし、@media (orientation: landscape)を使用することで、デバイスの向きが横向きの場合に、.container要素の幅と高さを600pxと400pxに変更することができます。

このように、@media (orientation: landscape)を使用することで、デバイスの向きに応じてスタイルを適用することができます。これにより、レスポンシブなデザインを実現し、ユーザーにとってより快適な閲覧環境を提供することができます。

まとめ

いかがでしたか?今回はメディアクエリの中でも、デバイスの向きで指定できるパターンを紹介しました。

レスポンシブデザインでは画面幅が変わるので、メディアクエリは必須のコードです。
デバイスの向きでもレイアウトを変更することができるので、デバイスの向きでレイアウトが崩れてしまう。横向きのときはスマホのメニューにしたい…などと考えている方は試して見てはいかがでしょうか?

参考

画像入りで詳しく紹介しているサイト様がありましたので詳しく知りたい方はご参考ください。

タイトルとURLをコピーしました