メディアクエリの基礎
CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 65/76。
CSSのメディアクエリを使うと、デバイスの幅や高さ、その他のプロパティに基づいてスタイルを適用し、ウェブサイトをさまざまな画面サイズに対応させることができます。
メディアクエリの基本構文：
@media (condition) {
selector {
property: value;
}
}- 条件：スタイルを適用するきっかけとなるルール（例：
max-width: 600px）。 - セレクター：スタイルを適用するHTML要素。
- property: 設定するCSSプロパティ（例:
width、font-size）。 - value: プロパティに割り当てる値。メディアクエリの条件に応じて変わります。
メディアクエリでは、条件は画面サイズや解像度など、さまざまな要素に基づいて設定できます。一般的な条件には、次のようなものがあります。
- max-width：最大幅（例：
max-width: 600px）までの画面にスタイルを適用します。 - min-width：最小幅（例：
min-width: 768px）以上の画面にスタイルを適用します。
- max-height: 最大高さが指定された画面にスタイルを制限します（例:
max-height: 400px）。 - min-height: 最小高さが指定された画面にスタイルを適用します（例:
min-height: 500px）。
これらの条件を使うと、デバイスや画面の向きに応じてウェブサイトの見た目を制御できます。
例：
@media (max-width: 600px) {
body { background-color: lightblue; }
}
@media (min-width: 601px) and (max-width: 1024px) {
body {background-color: lightgreen;}画面の幅が600px以下の場合、背景色をlightblueに変更します。画面の幅が601pxから1024pxの間の場合、背景色はlightgreenになります。
チャレンジ
簡単<h1>見出し、<p>段落、<div>を含むHTMLドキュメントが与えられています。ページをレスポンシブにするため、メディアクエリを追加してください。以下の手順に従ってください。
- 最大幅が600pxの画面に対する
@mediaクエリを追加します。- bodyの背景色をライトブルーに設定します。
- 見出し（
<h1>）のフォントサイズを5vw（ビューポート幅の5%）に設定します。
- 最小幅が601px、最大幅が1024pxの画面に対する
@mediaクエリを追加します。- bodyの背景色をライトグリーンに設定します。
- 見出し（
<h1>）のフォントサイズを3vw（ビューポート幅の3%）に設定します。
ブラウザーウィンドウのサイズを変更して、メディアクエリによってレイアウトが動的に調整される様子を確認してください。
自分で試してみよう
<html>
<head>
<title>Media Queries Basics</title>
<style>
/* Write your code here */
</style>
</head>
<body>
<h1>Whales: The Ocean Giants</h1>
<p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>
<div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
CSSによるスタイリングのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド