フロントエンド初心者である自分がWebページをHTMLとCSSで実装するときに、「レスポンシブに対応した」とは具体的にどのような状態？どう実装すれば良いの？と頭の整理が必要だったのでまとめました。
レスポンシブデザインとは？
まず、改めてレスポンシブデザインとは「どんな端末のブラウザで表示しても見やすいWebページのデザイン」です。
PCやスマホ、タブレットと異なるディスプレイの大きさの端末で同じWebページを表示したときに、全部の端末でPC向けのデザインで表示すると、スマホだと画面が小さすぎて見辛かったりします。
逆に、スマホだけを想定して実装したページは、大きなPCのディスプレイで見ると間延びして見えるかもしれません。
これらの問題を解決し、表示するディスプレイの大きさに応じて見やすいデザインを表示するのが「レスポンシブデザイン」です。
各要素の「サイズ」をどう対応するのがベストか
デザインに関することなので、Webページによってどう見せるのがベストなのかは異なるかと思うのですが、ベースとなる考え方は整理しておこうと思います。
ここでは、各要素の「サイズ」について整理します。
サイズについての対応方法を大きく次の3つに分けました。
- パターン1・・・ディスプレイサイズに関わらず、一定のサイズを表示する。
- パターン2・・・切替えるポイント(ディスプレイの横幅が〇〇px以上/以下の場合)を設定し、ディスプレイの大きさによってサイズを切替える。
- パターン3・・・ティスプレイのサイズに応じて常に表示するサイズを変動させる。
各要素について、次のように対応するのがベストではないかと整理してみました。
各パターンの実装方法
パターン1（一定）
px・rem・em・% などの単位を使ってサイズを指定します。
単位の詳細はこちらに記載しています。
どの単位を選ぶかによってサイズの設定方法は変わりますが、ディスプレイを拡大/縮小しても初期表示のサイズから変わりません。
パターン2（ポイントで切替)
CSSの「メディアクエリー」という設定を追加することにより、指定したサイズ以下のディスプレイ表示の場合にCSSを切り替えることができます。
具体的な設定方法は、こちらのサイトが詳しくて分かりやすいです。
切替ポイント(max-width)をどれくらいのサイズにするかですが、大体600px前後で切り替わるように設定していることが多いようです。
パターン3(スムーズに変動)
vw・vhなどの単位を使ってサイズを指定します。ディスプレイのサイズに対する割合で各要素のサイズが決まるため、ディスプレイを拡大・縮小すると各要素も拡大・縮小します。
単位の詳細はこちらの記事が分かりやすいです。
サイズ以外の対応について
各要素のサイズ以外にも、デザインにおいて考慮すべき点はあります。
例えば、ディスプレイのサイズによってボックス要素を横に並べるか、縦に並べるか・・1列表示なのか、3列表示なのか・・・など、レイアウトそのものを切替えたい場合もあるかと思います。そのような場合はパターン2のメディアクエリーを使って、CSSを切り替える必要があります。
その辺りはまた整理が必要になれば書こうと思います。