CSSメディアクエリ入門

特別なコマンド @media があり、画面の幅に応じて異なるコードを実行することができます。

次の例では、画面の幅が 300px から 1200px までの場合にコードが動作します：

css@media (min-width: 300px) and (max-width: 1200px) {
  /* 何らかのコード */
}

次の例では、画面の幅が 300px より大きい場合にコードが動作します：

css@media (min-width: 300px) {
  /* 何らかのコード */
}

次の例では、画面の幅が 1200px より小さい場合にコードが動作します：

css@media (max-width: 1200px) {
  /* 何らかのコード */
}

メディアクエリの中に何かコードを書いてみましょう。例えば、特定の画面サイズで段落を赤色にします：

css@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

今度は、画面の幅に応じて段落を異なる色にしてみましょう：

css@media (max-width: 300px) {
  p {
    color: red;
  }
}
@media (min-width: 300px) and (max-width: 900px) {
  p {
    color: green;
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  p {
    color: blue;
  }
}
@media (min-width: 1200px) {
  p {
    color: orange;
  }
}

Задание 1

次のコードを、幅 0 から 800px の画面に適用させてください：

cssp {
  font-size: 20px;
}

次のコードを、幅 800px 以上の画面に適用させてください：

cssp {
  font-size: 30px;
}

Задание 2

次のコードを、幅 0 から 500px の画面に適用させてください：

cssp {
  font-size: 15px;
}

次のコードを、幅 500px から 900px の画面に適用させてください：

cssp {
  font-size: 20px;
}

次のコードを、幅 900px 以上の画面に適用させてください：

cssp {
  font-size: 30px;
}