レスポンシブ

🐾 猫で例えると？

得意の柔軟性を活かして、ヨガの達人のような「ありえないポーズ」で毛づくろいをする茶トラ猫。まるで「どんな形の空間に入れられても、それに合わせて自分の形をスライムのように変えられる」と言わんばかりです。この液体のように柔軟な性質は、閲覧する画面の横幅に合わせてテキストや画像の配置をヌルッと変化させる「レスポンシブ」の挙動そのものです。

💻 IT現場における「レスポンシブ」とは？

かつてのWeb制作現場では、PC用のページ（index.html）とスマホ用のページ（sp/index.html）を別々に作成し、アクセスしてきた端末を判定してURLを振り分けるのが主流でした。しかし、この方法では修正のたびに2つのファイルを更新しなければならず、作業量が2倍になってしまいます。

同じURLと内容を使いながら、利用可能な幅に合わせて配置を変えるのがレスポンシブWebデザインです。デザインの保守や端末間の共有をしやすくしますが、採用するだけで検索順位が上がるという意味ではありません。

⚠️ レスポンシブの仕組みと注意点

メディアクエリに加え、割合の幅、Flexbox、Grid、伸縮する画像などを組み合わせます。条件が見ているのは通常ビューポートの幅であり、「この幅なら必ずスマートフォン」と端末種類を判定しているわけではありません。

メディアクエリによる実装例

下のCSSはcontainerの子要素を縦から横へ切り替える断片です。HTMLのheadにwidth=device-widthを指定したviewportのmeta要素があることを前提とします。768pxは一例で、内容が窮屈になる位置を見て分岐点を決めます。

/* 基本のスタイル（スマートフォン向けを先に書くモバイルファースト） */
.container {
  display: block;
  width: 100%;
}

/* 画面幅が768px以上（タブレット・PC）の場合のみ適用されるスタイル */
@media screen and (min-width: 768px) {
  .container {
    display: flex; /* 横並びに変更 */
    justify-content: space-between;
  }
}

同じPCでもウィンドウを狭めれば縦並びになります。ブレイクポイントの直前・直後だけでなく、長い見出しや文字の拡大でも崩れないか確認します。大きな表などは、読みやすさを保つための横スクロールも選択肢です。

🛠️ レスポンシブを賢く使うためのポイント

画面内に収まっていても、画像の読み込みが重かったり操作しにくかったりする場合があります。レイアウトに加えて、通信量と操作方法も確認します。

• 狭い幅から内容を整理する：小さな画面で主要な操作を完了できるようにしてから、広い画面で配置を広げます。重要な情報を小さい画面だからという理由だけで隠さないことが大切です。
• 画像の重さに注意： 見た目はスマホサイズに縮小されていても、裏ではPC用の巨大な画像を読み込んでいるケースがあります。pictureタグなどを使って、スマホには軽い画像を配信する工夫が必要です。
• 入力方法も確認する：画面幅だけでタッチかマウスかは決まりません。ホバーしないと現れない必須操作を避け、キーボードとタッチの両方で使えるかを確認します。

箱に合わせて体勢を変える猫のように、レスポンシブでは画面幅に応じて配置を調整します。小さい画面で収まるかに加え、文字を拡大しても読めるか、ボタンを操作できるかを確かめましょう。画面が小さくても大きな画像を読み込んでいないかも確認点です。