【CSS入門】iPadやタブレットの縦向き・横向きにだけスタイルを適用する方法

Web制作をしていると、「iPadの横向きだけCSSを変えたい」
「タブレットの縦向きだけデザインを調整したい」といったニーズが出てきます。
今回は、CSSのメディアクエリを使って、デバイスの向き（縦 or 横）と
画面サイズを組み合わせてスタイルを適用する方法を詳しく解説します。

orientation とは？

CSSのメディアクエリで orientation を使うと、画面の向きを条件にスタイルを切り替えることができます。

@media screen and (orientation: portrait) {
  /* 縦向き用スタイル */
}

@media screen and (orientation: landscape) {
  /* 横向き用スタイル */
}

このように、画面が縦（portrait）か横（landscape）かを判断して、別々のCSSを記述できます。

iPadの横向きだけにスタイルを適用する方法

iPad（特に無印・Airシリーズ）の解像度は768px × 1024pxが基準です。
これをもとに、横向き（landscape）のときだけCSSを適用したい場合は、以下のように書きます。

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
  
  /* iPad 横向き用スタイル */
  body {
    background-color: lightblue;
  }
}

ポイント

• min-device-width と max-device-width でiPadサイズを絞り込む
• orientation: landscape で横向きだけに限定

iPadの縦向きだけにスタイルを適用する方法

同様に、iPadを縦向き（portrait）にしたときだけスタイルを適用したい場合は、以下のように記述します。

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
  
  /* iPad 縦向き用スタイル */
  body {
    background-color: lightgreen;
  }
}

タブレット全般（iPad以外も含む）の縦向きだけにCSSを当てるには？

iPad以外のAndroidタブレットなども含めた「タブレット縦向き用」のスタイルは、
解像度の範囲を少し広めに指定するのがポイントです。

@media screen 
  and (min-width: 600px) 
  and (max-width: 1024px) 
  and (orientation: portrait) {
  
  /* タブレット全般（縦向き）スタイル */
  body {
    background-color: #e0f7fa;
  }
}

よく使われるタブレット解像度目安

デバイス	解像度（縦 × 横）
iPad	768 × 1024
iPad mini	768 × 1024
iPad Pro	834 × 1112〜
Androidタブレット	600〜900px 幅程度

上記のようなサイズ感に対応するには、600px〜1024px を目安にするのが安全です。

横向き以外（= 縦向き）の時にだけCSSを適用するには？

「横向きではない時＝縦向きの時」に限定してスタイルを当てたい場合は、単純に orientation: portrait を使えばOKです。

@media screen and (orientation: portrait) {
  /* 縦向きのみ有効なスタイル */
}

この書き方はスマホ・タブレット・PC全ての縦向きに適用されるため、必要であれば幅やデバイスピクセル比なども追加して条件を絞ると良いでしょう。

縦向き・横向きでスタイルを完全に切り替える方法（レスポンシブ対応）

/* 縦向きのとき */
@media screen and (orientation: portrait) {
  body {
    background-color: #ccffcc;
  }
}

/* 横向きのとき */
@media screen and (orientation: landscape) {
  body {
    background-color: #ffcccc;
  }
}

このように書けば、向きによってデザインがガラッと変わる演出も可能です。

Chromeの検証ツールで向きの確認はできる？

検証ツールでもある程度の確認は可能です：

手順（Google Chromeの場合）

1. 対象ページを開く
2. デベロッパーツール（右クリック→「検証」or F12）を開く
3. 左上のデバイスアイコンをクリック
4. デバイスを「iPad」や「iPad Pro」に設定
5. 回転アイコンで「縦→横」へ切り替え
6. CSSが効いているかチェック（テスト用に body { background: red; } などを入れると便利）

ただし注意！

Chromeの検証モードは完全なシミュレーションではなく、
device-widthやpixel-ratioなど一部の条件が実機と異なる場合があります。
正確に確認したい場合は、実機のiPadやAndroidタブレットでテストするのがベストです。

よくある間違いと注意点

よくあるミス	解説
width と device-width の混同	width はビューポート、device-width は物理デバイスのサイズです。 条件がズレる原因になります。
orientationだけで指定してしまう	向きだけでなく、幅も組み合わせて条件を絞るのがベストです。
PCやスマホにも反映されてしまう	画面幅の条件を入れてないと他のデバイスにも適用されてしまいます。

まとめ：タブレットの縦・横向きをCSSで制御するなら？

• orientation で向き（縦 or 横）を判定
• min-width や max-width でタブレットサイズを絞る
• Chromeである程度確認できるが、実機テストも忘れずに！

CSSのメディアクエリをうまく使えば、
ユーザーの操作性や表示環境に応じた柔軟なレイアウトが実現できます。
iPadやAndroidタブレットを含めた、
「画面向き」に対応したレスポンシブデザインをぜひ活用してみてください！

Favorite