[CSS]スマートフォンの横向き用のCSSを追加した話[メディアクエリ]

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

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

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

横向きのコード
縦向きのコード
orientationとは
まとめ
参考

横向きのコード

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

@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)を使用することで、デバイスの向きに応じてスタイルを適用することができます。これにより、レスポンシブなデザインを実現し、ユーザーにとってより快適な閲覧環境を提供することができます。