HTML学習第6回：スマホ対応（レスポンシブデザイン）入門

1. なぜスマホ対応が必要なのか

今では、多くのユーザーがスマホからWebサイトを見ています。パソコン用だけを想定してページを作ると、次のような問題が起きます。

そこで、画面の幅にあわせてレイアウトを変えるレスポンシブデザインという考え方が使われます。

スマホでの表示は、まず <meta name="viewport"> の設定から始まります。

このページの <head> には、次の1行が入っています。

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

この指定によって、「画面の幅にあわせてページを表示する」「最初の拡大率を1にする」といった動きになります。

このサンプルでは、PCでは左側に本文、右側にポイントまとめが並びます。

スマホの幅まで縮めると、2つのカラムが縦に並ぶ1カラムレイアウトに変化します。

画面の幅によってCSSを切り替えるには、@media（メディアクエリ）を使います。

このページの最後には、次のようなCSSが書かれています。

@media (max-width: 768px) { ... }

この中にあるスタイルは、「画面の幅が768px以下のときだけ」適用されます。

ブラウザの横幅を変えながら、「どのタイミングでレイアウトが変わるか」を確認してみましょう。

下のボックスは、画面の幅によって色や文字サイズが変わるようにしてあります。

このボックスは @media (max-width: 768px) の中の指定で、幅が狭いときだけ色や文字サイズが変わります。
ブラウザの横幅を広げたり狭めたりして、変化を確認してみてください。

アフィリエイト広告を貼るときも、スマホでの見え方を意識しておくことが大切です。