以下は、指定された英文文本を日本語に翻訳したものです。

CSS - Media Queries

CSS - メディアクエリ：入門ガイド

こんにちは、未来のウェブ開発者さんたち！今日は、CSSメディアクエリのエキサイティングな世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、私はこの旅をステップバイステップでガイドします。コードを書いたことがない方も心配しないでください。基本から始めて、少しずつ進んでいきます。コーヒー（またはあなたが好きなお茶）を飲みながら、始めましょう！

メディアクエリとは？

本題に進む前に、メディアクエリとは何かを理解しましょう。あなたがコンピュータ上で素晴らしいウェブサイトをデザインしたとします。しかし、スマートフォンで見たときはどうなるでしょうか？それがメディアクエリが役に立つところです！メディアクエリを使用することで、ウェブサイトが異なるスクリーンサイズやデバイスに適応することができます。環境に応じて外見を変えるカメレオンのようなウェブサイトですね。

シNTAX

まず、メディアクエリの基本構文を見てみましょう：

@media mediatype and (condition) {
  /* CSSルールはここに記述します */
}

これは脅かされることなく、以下のように分解できます：

@media：ブラウザに「conditionsを設定する準備ができた」と伝えます。
mediatype：どのようなメディアをターゲットにしているかを指定します（すぐに説明します）。
and：conditionsを結合するためのものです。
(condition)：具体的なconditionsを設定します。

メディアタイプ

メディアタイプは、どのようなデバイスをターゲットにしているかをブラウザに伝えます。以下は主要なものです：

メディアタイプ	説明
all	すべてのデバイスに適用
print	プリンター用
screen	コンピューターのスクリーン、タブレット、スマートフォン用

論理演算子

論理演算子を使用して、より複雑なクエリを作成できます：

演算子	説明
and	複数のメディア機能を結合
not	メディアクエリを否定
only	クエリ全体が一致する場合にのみスタイルを適用
,	複数のメディアクエリを結合

CSS メディアタイプ - all

allメディアタイプは、スイスアーミーナイフのように、すべてのデバイスで動作します。以下は例です：

@media all {
  body {
    background-color: lightblue;
  }
}

これはすべてのデバイスで背景色をライトブルーに設定します。シンプルですね？

CSS メディアタイプ - print

printメディアタイプは、誰かが印刷したいときにウェブページをスタイル化するのに最適です。以下に例を示します：

@media print {
  body {
    font-size: 12pt;
  }
  .no-print {
    display: none;
  }
}

これはフォントサイズを大きくして読みやすくし、印刷時にno-printクラスを持つ要素を非表示にします。

CSS メディアタイプ - screen

screenメディアタイプは、スクリーンに基づくどのデバイスでも使用されるでしょう。以下は例です：

@media screen and (max-width: 600px) {
  .menu {
    width: 100%;
  }
}

これはスクリーン幅が600ピクセル以下の場合、メニューを画面全体に広げます。

CSS メディアタイプ - コンマを使用

複数のメディアタイプをターゲットにするには、コンマを使用します。パーティに複数の友達を招待するようなものです：

@media screen, print {
  body {
    line-height: 1.5;
  }
}

これはスクリーンおよび印刷メディアの両方にラインハイトを設定します。

CSS メディアタイプ - onlyを使用

onlyキーワードは、クラブのボーイのように、古いブラウザがメディアクエリをサポートしていない場合にスタイルを適用しないようにします：

@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
  }
}

CSS メディアクエリ - 範囲

conditionsに範囲を指定することもできます：

@media screen and (min-width: 600px) and (max-width: 900px) {
  .sidebar {
    display: none;
  }
}

これはスクリーン幅が600ピクセルから900ピクセルの範囲にある場合、サイドバーを非表示にします。

メディア機能

メディア機能を使用して、ユーザーのデバイスやブラウザの特定の特性をテストできます。以下は一般的なものです：

機能	説明
width	ビューポートの幅
height	ビューポートの高さ
aspect-ratio	幅と高さの比率
orientation	ランドスケープまたはポートレート
resolution	デバイスのピクセル密度

複雑なメディアクエリの作成

より複雑な例ですべてをまとめます：

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
  .grid-item {
    width: 50%;
  }
}

これはランドスケープ向きのスクリーンで600ピクセルから900ピクセルの幅にある場合に、2カラムのレイアウトを作成します。

複数のタイプまたは機能を結合

and演算子を使用して、複数のタイプまたは機能を結合できます：

@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
  .content {
    font-size: 14px;
  }
}

これはスクリーン幅が600ピクセルから900ピクセルの範囲にある場合、または印刷時の幅が600ピクセル以下の場合にスタイルを適用します。

複数のクエリのテスト

複数のクエリが真である場合にスタイルを適用したいときは、コンマを使用します：

@media (min-width: 600px), (orientation: landscape) {
  .header {
    position: sticky;
    top: 0;
  }
}

これはスクリーンが600ピクセル以上の幅またはランドスケープ向きの場合にヘッダーを固定します。

クエリの意味を反転

notキーワードを使用して、クエリの意味を反転させます：

@media not all and (orientation: landscape) {
  .sidebar {
    float: left;
  }
}

これはデバイスがランドスケープ向きでない場合にサイドバーを左に浮動させます。

古いブラウザとの互換性向上

古いブラウザがメディアクエリをサポートしていない場合に、フォールバックスタイルを提供できます：

.container {
  width: 100%; /* 古いブラウザのためのフォールバック */
}

@media screen and (min-width: 600px) {
  .container {
    width: 80%;
  }
}

これはメディアクエリを理解しないブラウザでも適切なレイアウトを確保します。

そして、これで終わりです！あなたは刚刚、CSSメディアクエリの世界に最初の一歩を踏み出しました。練習が成功の鍵ですので、これらの概念を試してみてください。ハッピーコーディング！

Credits: Image by storyset