基本のキ：ビューポートとメディアクエリ

レスポンシブデザインの魔法のタネあかし！

前のページで、レスポンシブデザインは「魔法の洋服」みたいに、画面の大きさに合わせてWebサイトの見た目が変わる技術だって話をしたよね。 じゃあ、その魔法はどうやって実現しているんだろう？

実は、レスポンシブデザインの魔法には、大きく分けて2つの重要な「呪文」があるんだ。 それが、これから学ぶ「ビューポート」と「メディアクエリ」だよ！ この2つを理解すれば、君もレスポンシブの魔法使いへの第一歩を踏み出せるぞ！

その１：ビューポート (Viewport) – ウェブサイトの「のぞき窓」を設定しよう！

まず一つ目の呪文は「ビューポート」。
ビューポートって言うのは、簡単に言うと、Webサイトがブラウザ（インターネットを見るソフト）の中で表示される「領域」のこと。まるで、君が部屋の中から外の景色を見る「窓」みたいなものだと考えてみて。

スマートフォンで見るときは小さな窓、パソコンで見るときは大きな窓になるよね。 この「窓の大きさ」をWebサイトに正しく教えてあげないと、Webサイトは自分がどれくらいの大きさで表示されているのか分からなくて、困っちゃうんだ。

なぜビューポート設定が必要なの？

昔のスマートフォンが出始めた頃、多くのWebサイトはパソコンの大きな画面用に作られていたんだ。 だから、スマホの小さな画面でそれらのサイトを見ようとすると、ブラウザは「えっ、こんな小さな画面じゃ全部表示できないよ！」となって、パソコン用のサイト全体をギューッと縮小して表示しようとしたんだ。

結果、文字は米粒みたいに小さくなって、指でピンチアウト（二本指で広げる操作）しないと読めない、なんてことがよくあった。これじゃ、とっても使いにくいよね。

そこで登場したのが、このビューポート設定！ これをHTMLの `` タグの中に書いてあげることで、「このWebサイトは、見ているデバイスの画面幅に合わせて表示してね！勝手に縮小しないでね！」とブラウザに伝えることができるんだ。

ビューポートの設定方法：HTMLに一行追加するだけ！

ビューポートの設定は、HTMLファイルの `` タグの中に、次のような特別な `` (メタ) タグを一行書くだけでOKなんだ。 この教室のHTMLファイルにも、実はもう全部書いてあるよ！

<meta name="viewport" content="width=device-width, initial-scale=1.0">

この一行の呪文の意味を少し見てみよう。

• name="viewport": 「これはビューポートに関する設定ですよ」という意味。
• content="...": ここに具体的な設定内容を書くよ。
  • width=device-width: 「ビューポートの幅（Webサイトが表示される幅）を、デバイスの画面の幅（device-width）に合わせてください」というお願い。これで、スマホならスマホの画面幅、PCならPCの画面幅が基準になるんだ。
  • initial-scale=1.0: 「最初にページが表示されるときのズーム倍率（initial-scale）を1.0（つまり等倍）にしてください」という意味。これで、勝手に縮小されたり拡大されたりせずに、1ピクセルが1ピクセルとしてちゃんと表示されるようになるんだ。

この一行があるだけで、スマートフォンでWebサイトを見たときに、文字が適切な大きさで表示されたり、横スクロールしなくてもコンテンツが画面内に収まったりするようになる、レスポンシブデザインの「土台」ができるんだ。とっても大事な一行だね！

その２：メディアクエリ (Media Queries) – ウェブサイトの「変身の呪文」！

ビューポート設定でWebサイトの「のぞき窓」の大きさを正しく設定したら、次はいよいよ、その窓の大きさに合わせて見た目を変えるための呪文、「メディアクエリ」の出番だ！

メディアクエリは、CSS（Webサイトの見た目を作る言語）の機能の一つで、「もし、画面がこんな条件だったら、このCSSスタイルを適用してね」という「条件分岐」を可能にするんだ。

例えば、天気予報で「もし、明日の天気が晴れで、気温が25度以上なら、半袖Tシャツがおすすめです。もし雨なら、傘と長袖を持っていきましょう」とアドバイスされるのに似ているね。 メディアクエリも、画面の幅や高さ、向き（縦向きか横向きか）などの条件に応じて、Webサイトの見た目をガラリと変えることができる「変身の呪文」なんだ。

メディアクエリで何ができるの？

メディアクエリを使うと、具体的にこんなことができるよ。

• 画面の幅が狭いとき（スマホなど）は、ナビゲーションメニューを縦一列に並べる。広いとき（PCなど）は横一列に並べる。
• 文字の大きさを、画面の大きさに合わせて調整する。
• スマホではシンプルな1列のレイアウトにし、PCでは複数の列を使った複雑なレイアウトにする。
• 特定の画像や情報を、スマホでは非表示にして、PCでは表示する（またはその逆）。

まさに、レスポンシブデザインの「動き」や「変化」を作り出すための中心的な技術なんだ。

メディアクエリの基本的な書き方

メディアクエリは、CSSファイルの中にこんな風に書くよ。

/* 例：画面の幅が 600ピクセル以下の場合に適用されるスタイル */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue; /* 背景色を水色にする */
  }
  h1 {
    font-size: 1.5em; /* 見出しの文字を少し小さくする */
  }
  /* ここに、画面幅が600px以下の時だけ適用したいCSSを書く */
}

この呪文を分解してみよう！

• @media: 「ここからメディアクエリが始まりますよー！」という合図。
• screen: 「このスタイルは『画面』を持つデバイス（PC、スマホ、タブレットなど）に対して適用しますよ」という意味の「メディアタイプ」。他にも印刷用の print などがあるよ。だいたいは screen か、全部のメディアタイプに適用の all を使うことが多いかな。
• and: 複数の条件をつなぐときに使う言葉。「かつ」っていう意味だね。
• (max-width: 600px): これが「メディア特性」と呼ばれる具体的な条件。「画面の最大幅（max-width）が600ピクセル（600px）の場合」つまり「画面の幅が600ピクセル以下の場合」という意味になるんだ。
• { ... }: この波括弧 { } の中に、条件に合ったときに適用したいCSSのルール（プロパティと値のセット）を書いていくよ。

この例だと、Webサイトを見ている画面の幅が600ピクセル以下だったら、body の背景色が水色になり、h1 タグの文字サイズが 1.5em になるんだ。もし画面幅が601ピクセル以上だったら、この { } の中のスタイルは無視されるよ。

さあ、メディアクエリで遊んでみよう！

下の箱は、メディアクエリを使って、ウィンドウの幅によって背景色やメッセージが変わるように作られているよ。 ブラウザのウィンドウの端をドラッグして、幅を変えてみて！どんな風に変わるかな？

このデモのCSSは、このHTMLファイルの上の方（<style>タグの中）に書いてあるから、興味があったら見てみてね！ 違う幅の時に違うスタイルが適用されるように、いくつかのメディアクエリが設定されているのが分かるはずだよ。

まとめ：レスポンシブの基本はビューポートとメディアクエリ！

さあ、今日のレッスンはどうだったかな？

• ビューポート設定: Webサイトが表示される「のぞき窓」の大きさをデバイスに正しく伝える、レスポンシブの「土台作り」。<meta name="viewport" content="width=device-width, initial-scale=1.0"> この一行を忘れずに！
• メディアクエリ: 「もし画面がこの条件なら、この見た目にしてね！」とCSSで指示を出す、「変身の呪文」。@media screen and (max-width: 〇〇px) { ... } の形で使う。

この2つの「呪文」を使いこなすことが、レスポンシブWebデザインをマスターするための大きなカギになるんだ。 最初は少し難しく感じるかもしれないけど、実際に手を動かしながら慣れていくのが一番！

次のページでは、このメディアクエリについて、もっと色々な条件の書き方や使い方を詳しく見ていくよ。 さらに強力な変身の呪文を覚えて、Webサイトを自由自在に操ろう！