CSSメディアクエリ：max-widthまたはmax-height

2024-04-02

CSSメディアクエリ：max-widthまたはmax-height

OR演算子をこれらのプロパティと一緒に使用することで、画面の幅または高さが指定した値以下の場合にスタイルを適用することができます。

例

以下の例では、画面幅が995px以下または画面高さが700px以下の場合、#container要素にpadding: 20px;というスタイルが適用されます。

@media screen and (max-width: 995px or max-height: 700px) {
  #container {
    padding: 20px;
  }
}

ポイント

OR演算子は、複数の条件を同時に指定する際に使用できます。
メディアクエリは、レスポンシブデザインを実現するために非常に重要です。
さまざまなデバイスでウェブサイトを快適に閲覧できるように、メディアクエリを使いこなしましょう。

その他のメディアクエリのプロパティ

min-width：要素の最小幅
orientation：デバイスの向き（portrait：縦向き、landscape：横向き）
device-pixel-ratio：デバイスのピクセル密度
resolution：画面の解像度

これらのプロパティを組み合わせて、より複雑なメディアクエリを作成することができます。

メディアクエリについてより詳しく知りたい場合は、以下のリソースを参照してください。

max-widthやmax-heightとOR演算子を使って、デバイスの画面サイズや高に応じてスタイルを適用することができます。メディアクエリを使いこなして、さまざまなデバイスで快適に閲覧できるウェブサイトを作りましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <h1>これは見出しです</h1>
    <p>これは文章です</p>
  </div>
</body>
</html>

CSS

/* デフォルトスタイル */
#container {
  padding: 10px;
}

/* スマートフォン用スタイル */
@media screen and (max-width: 575px) {
  #container {
    padding: 20px;
  }
}

/* タブレット用スタイル */
@media screen and (min-width: 576px) and (max-width: 995px) {
  #container {
    padding: 30px;
  }
}

/* PC用スタイル */
@media screen and (min-width: 996px) {
  #container {
    padding: 40px;
  }
}

/* 横向きスマートフォン用スタイル */
@media screen and (max-width: 575px) and (orientation: landscape) {
  #container {
    padding: 50px;
  }
}

このコードでは、以下のスタイルが適用されます。

上記はあくまで一例です。デバイスや目的に合わせて、さまざまなメディアクエリを作成することができます。

メディアクエリは、CSSファイルだけでなく、HTMLファイル内に直接記述することもできます。

max-widthまたはmax-heightを指定する他の方法

メディアクエリを複数記述する

@media screen and (max-width: 995px) {
  #container {
    padding: 20px;
  }
}

@media screen and (max-height: 700px) {
  #container {
    padding: 20px;
  }
}

上記のように、メディアクエリを複数記述することで、同じスタイルを適用することができます。

min-widthとmax-widthを組み合わせて使用する

@media screen and (min-width: 0px) and (max-width: 995px) {
  #container {
    padding: 20px;
  }
}

上記のように、min-widthとmax-widthを組み合わせて使用することで、特定の範囲の画面サイズにスタイルを適用することができます。

calc()関数を使用する

@media screen and (max-width: calc(50vw - 20px)) {
  #container {
    padding: 20px;
  }
}

上記のように、calc()関数を使用することで、より複雑な条件を設定することができます。

シンプルな条件の場合は、OR演算子を使うのが最も簡単です。
複数の条件を組み合わせる場合は、メディアクエリを複数記述するか、min-widthとmax-widthを組み合わせて使用するのが良いでしょう。
より複雑な条件を設定する場合は、calc()関数を使用することができます。

max-widthまたはmax-heightを指定する方法はいくつかあります。状況に合わせて、最適な方法を選択してください。

css media-queries

CSSメディアクエリ：max-widthまたはmax-height