メディアクエリの基礎

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 65/76。

CSSのメディアクエリを使用すると、デバイスの幅、高さ、またはその他のプロパティに基づいてスタイルを適用することで、ウェブサイトをさまざまな画面サイズに適応させることができます。

メディアクエリの基本構文:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

condition: スタイルをトリガーするルール（例：max-width: 600px）。
selector: スタイルを適用する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 の背景色を "lightblue" に設定します。
- 見出し（<h1>）のフォントサイズを 5vw（ビューポート幅の5%）に設定します。
最小幅が 601px かつ最大幅が 1024px の画面に対する @media クエリを追加します：
- body の背景色を "lightgreen" に設定します。
- 見出し（<h1>）のフォントサイズを 3vw（ビューポート幅の3%）に設定します。

ブラウザのウィンドウサイズを変更して、メディアクエリによってレイアウトが動的に調整されることを確認してください。

チートシート

基本的な構文：

@media (condition) {  
    selector {  
        property: value;  
    }  
}

一般的な条件：

max-width: 最大幅を持つ画面にスタイルを制限します
min-width: 最小幅を持つ画面にスタイルを適用します
max-height: 最大の高さを持つ画面にスタイルを制限します
min-height: 最小の高さを持つ画面にスタイルを適用します

例：

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}
}

自分で試してみよう

<html>
<head>
    <title>Media Queries Basics</title>
    <!--ここにコードを記述してください-->
    <style>
        
        
    </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>