レスポンシブWebデザイン

レスポンシブWebデザインとは

PCやスマホなどデバイスのサイズの違いに対応する方法として、同一のHTMLに対してCSSの機能を活用して実現する方法です。導入した際、ブラウザの横幅を変えたりするとダイナミックにデザインが変わる特徴があります。

他に、サーバーから戻ってくるHTMLの中身を変更してしまうような方法もありますが、最近は少なくなってきたと思います。

レスポンシブにする為のポイント

viewportを指定する

metaタグにあるviewportを指定することで、画面の横幅に追随する指定が行えます。指定しない場合、PCのサイズを縮小して描画されるため、サイト全体が小さくなってしまい、ピンチなどで拡大しないと読みづらいデザインになってしまいます。

メディアクエリを利用する

メディアクエリには、デバイスの横幅に合わせて適用するCSSを変更できる機能が備わっているので、この機能を利用することで横幅の変化が起きた時にCSSの内容が変わり、デザインの変更が行えます。

その他

float

CSSのfloat指定をうまく活用すると、横幅サイズに合わせて流動的なデザインを作ることができます。リキッドデザインのような言葉を調べると参考になるでしょう。

Flexbox

Flexboxが利用できる最近のブラウザでは、以前ほど工夫しなくても要素が横に並ぶデザインが作りやすくなりました。今後は新規で作り始める際にはFlexboxが活用されるシーンは増えると思います。

古いサイトをメンテナンスする場合にはFlexboxを利用せず、float、positionなどを利用して同様の表現をしている場合がある為、仕事内容によってはこれらの古い知識も大事になるでしょう。

解説に利用したコード ~ Sample code ~

https://github.com/CircleAround/pgonline/tree/master/src/20210213responsivesite