メディアクエリの基礎

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

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

Media Queries の基本構文:

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

condition: スタイルを適用するきっかけとなるルール（例: max-width: 600px）。
selector: スタイルを適用する HTML 要素。

property：設定するCSSプロパティ（例：width、font-size）。
値：propertyに割り当てられる値。メディアクエリの条件に応じて変化します。

media queryでは、conditionは画面のサイズや解像度など、さまざまな要素に基づいて指定できます。一般的なconditionには次のようなものがあります。

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;}

画面の width が 600px 以下の場合、background color はlightblueに変わります。601px から 1024pxの画面では、background color はlightgreenになります。

チャレンジ

簡単

<h1>見出し、<p>段落、<div>を含むHTMLドキュメントが与えられています。あなたの課題は、ページをレスポンシブにするためにMedia Queriesを追加することです。以下の手順に従ってください：

最大幅が600pxの画面に対する@mediaクエリを追加します：
- bodyのbackground colorをlightblueに設定します。
- 見出し（<h1>）のfont sizeを5vw（ビューポート幅の5%）に設定します。
最小幅が601px、最大幅が1024pxの画面に対する@mediaクエリを追加します：
- bodyのbackground colorをlightgreenに設定します。
- 見出し（<h1>）のfont sizeを3vw（ビューポート幅の3%）に設定します。

ブラウザーウィンドウのサイズを変更して、Media Queriesがレイアウトを動的に調整する様子を確認してください。

自分で試してみよう

<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>