こんにちは！Webサイト探検家のみんな！
はじめまして、ウルトラ先生です！ この教室では、みんなが普段見ているWebサイトが、どうやって色々な画面サイズ（パソコン、スマホ、タブレットなど）で見やすくなっているのか、その秘密「レスポンシブWebデザイン」について、一緒に楽しく学んでいくよ。
「なんだか難しそう…」って思った君も大丈夫！例え話をたくさん使って、分かりやすく解説するから、安心してついてきてね！
レスポンシブデザインって、いったい何？
想像してみて。君が持っているお気に入りのTシャツが、君が大きくなっても小さくなっても、いつもピッタリサイズに変わってくれたら、すごく便利だよね？
レスポンシブWebデザインは、まさにそんな「魔法の洋服」みたいなものなんだ。 Webサイトを見ている画面の大きさに合わせて、Webサイトの見た目（レイアウトや文字の大きさ、写真のサイズなど）が自動的に「変身」して、いつでも見やすくて使いやすい状態にしてくれる技術のことを言うんだ。
（↑これはイメージ図だよ。実際のサイトはもっとかっこよく変身するんだ！）
昔のWebサイトだと、パソコン用の大きな画面に合わせて作られたサイトをスマホで見ると、文字が米粒みたいに小さくて読めなかったり、横に長ーくスクロールしないと全部見れなかったりしたんだ。逆に、スマホ専用のサイトをパソコンで見ると、なんだかスカスカした感じに見えたりもした。
レスポンシブデザインがあれば、そんな悩みは解決！一つのWebサイトで、どんな大きさの画面でも快適に見られるようになるんだ。
なぜレスポンシブデザインが必要なの？
じゃあ、どうしてそんな「魔法の洋服」が必要なんだろう？理由はいくつかあるよ。
-
スマホが当たり前の時代だから！
今や、たくさんの人がパソコンよりもスマホでインターネットを見ているよね。電車の中でも、お布団の中でも、いつでもどこでも情報を探せるスマホはとっても便利。だから、スマホで見やすいWebサイトはとっても大切なんだ。
-
色々な大きさの画面が登場したから！
昔はパソコンの画面サイズくらいしか考えなくてもよかったけど、今は小さいスマホから大きなテレビまで、本当に色々な大きさの画面でWebサイトが見られるようになった。タブレットみたいに、中くらいの画面もあるよね。レスポンシブデザインなら、どんな画面にも対応できるんだ。
-
使う人が気持ちよく使えるようにするため！ (ユーザー体験の向上)
見にくいサイトや使いにくいサイトは、すぐに閉じられちゃうかもしれない。レスポンシブデザインで、いつでもどこでも快適に使えるWebサイトにすれば、たくさんの人に喜んでもらえるし、伝えたい情報もしっかり届くんだ。
-
検索エンジンにも好かれるから！ (SEO効果)
Googleみたいな検索エンジンも、スマホで見やすいレスポンシブデザインのWebサイトをオススメしているんだ。つまり、レスポンシブ対応すると、検索結果で上のほうに表示されやすくなるかもしれない、ってこと！
この教室で学べること
この「ウルトラ先生のレスポンシブWebデザイン教室」では、レスポンシブデザインを実現するための具体的な方法を、順番に分かりやすく解説していくよ。
- 画面の大きさをWebサイトに伝える「ビューポート」の設定方法
- 「もし画面がこの幅なら、こうしてね！」と命令する「メディアクエリ」の使い方
- 画面サイズに合わせてレイアウトを柔軟に変えるCSSのテクニック（Flexbox や Grid）
- 写真や文字も画面に合わせて見やすくする方法
たくさんのサンプルコードや、時には簡単なJavaScriptを使ったデモも用意するから、実際に手を動かしながら学べるように工夫しているよ。
サイトマップ（この教室の冒険マップ！）
さあ、どんな内容を学んでいくのか、下の冒険マップで確認してみよう！クリックすると、そのページにジャンプできるよ。
準備はいいかな？ 次のページ「もくじ」で、この教室の全体像をもう一度確認したら、いよいよレスポンシブデザインの探検に出発だ！