あなたのサイトを次のレベルへ！CSSメディアクエリでランドスケープ・ポートレート対応をマスターしよう

目次

1. はじめに
2. ランドスケープモードの対応
3. ポートレートモードの対応
4. 組み合わせて使う
5. まとめ

1. はじめに

レスポンシブデザインは今やWeb開発の必須スキルです。この記事では、CSSのメディアクエリを使用して、デバイスのランドスケープモードとポートレートモードに対応する方法を解説します。

2. ランドスケープモードの対応

ランドスケープモード（横向き）に対応するデザインは以下のように実装できます。

サンプルコード

/* ランドスケープモードのスタイル */
@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
  /* 他のランドスケープモード用のスタイルをここに追加 */
}

3. ポートレートモードの対応

ポートレートモード（縦向き）の場合は、以下のように実装します。

サンプルコード

/* ポートレートモードのスタイル */
@media only screen and (orientation: portrait) {
  body {
    background-color: lightpink;
  }
  /* 他のポートレートモード用のスタイルをここに追加 */
}

4. 組み合わせて使う

ランドスケープとポートレートを組み合わせ、特定のデバイスサイズに対応することも可能です。

サンプルコード

@media only screen and (orientation: portrait) and (min-width: 400px) {
  /* 400px 以上の幅のポートレートモード用のスタイル */
}

5. まとめ

CSSのメディアクエリを使ったランドスケープ・ポートレート対応は、レスポンシブデザインの強力なツールです。これを使えば、さまざまなデバイスや画面サイズに対応した美しいデザインを実装できます。

いいねとフォローをお忘れなく！