スマホで見ても崩れない！「レスポンシブデザイン」って何？の超基本
問題提起：なぜスマホでサイトは「崩れる」のか？
従来のWebサイト制作では、PCの画面サイズ（たとえば横幅 1000 px）に合わせてデザインを 固定 していました。この「固定されたデザイン」を、横幅 375 px 程度のスマートフォンで見るとどうなるでしょうか？
サイト全体が縮小されて文字が判読不能になったり、画面からはみ出して横スクロールが必要になったりします。これは、サイトが 「お皿の大きさ（画面サイズ）に合わせて料理（コンテンツ）の形を変える」 という柔軟性を持っていなかったために起こる現象です。
ユーザーにとって操作しにくいサイトは、すぐに離脱の原因となり、Webサイトの成果を大きく損ないます。
解決策：「レスポンシブデザイン」の超基本
レスポンシブデザイン（Responsive Web Design）とは、「反応する」「応答する」という意味の通り、ユーザーがアクセスしているデバイスの画面サイズに応じて、サイトのレイアウト（配置）やデザインを自動的に最適化する 手法です。
PCで見れば広くゆったりとしたデザインに、スマホで見れば縦長でタップしやすいボタンと大きな文字のデザインに、瞬時に形を変えます。これにより、どのデバイスからアクセスしても「使いやすい」と感じる一貫したユーザー体験を提供できるのです。
レスポンシブデザインを支える３つの技術
レスポンシブデザインは、魔法ではなく、以下の３つの基本的な技術の組み合わせによって成り立っています。
1. 可変グリッド（Flexible Grid）：レイアウトを流動的にする
従来の固定された幅（例： 1000 px）ではなく、「パーセント（%）」 を使ってレイアウトの幅を指定します。 たとえば、「横幅の 80 %」と指定すれば、PC画面（幅 1000 px）では 800 px の幅になり、スマホ画面（幅 400 px）では 320 px の幅になります。このように、画面サイズの変化に合わせてレイアウト全体が 流動的（フルイド） に伸縮するため、表示がはみ出したり崩れたりしにくくなります。
2. 可変メディア（Flexible Images）：画像も一緒に伸縮させる
レイアウトだけが伸縮しても、画像が固定サイズ（例： 500 px）のままでは、スマホ画面からはみ出してしまいます。
画像に対しても、CSSというスタイル指定の仕組みで、「画像の最大幅を 親要素の 100 % にする」という指示を与えます。これにより、画像はコンテナ（箱）のサイズに合わせて自動的に縮小・拡大し、常に画面内に収まる ようになります。
3. メディアクエリ（Media Queries）：レイアウトを切り替える「スイッチ」
可変グリッドだけでは、「PCでは横並びだった要素を、スマホでは縦に積み重ねる」といった 大胆なレイアウト変更 に対応できません。そこで登場するのがメディアクエリです。
メディアクエリは、「もし画面の横幅が 600 px 以下になったら」という 条件を設定できる「スイッチ」 の役割を果たします。
- PC向け指示（通常時）: 要素Aと要素Bを「横並び」にしなさい。
- メディアクエリによる追加指示（スマホ時）: 画面幅が $600 \text{px}$ 以下になったら、要素Aと要素Bを「縦に積み重ねる」レイアウトに変更しなさい。
このメディアクエリを使うことで、PCとスマホで 全く異なるデザイン を、一つのHTMLファイルで実現できるのです。
レスポンシブデザインは「もう一つの必須要件」
レスポンシブデザインは、もはや最新の技術ではなく、Webサイト制作の 必須の前提条件 です。Googleもモバイルフレンドリーなサイトを高く評価しており、SEO（検索エンジン最適化）の観点からも不可欠です。
ユーザーにストレスなく快適にコンテンツを届けるために、レスポンシブデザインの基本を理解し、制作に活かしましょう。