レスポンシブデザインの仕組みについて、ビギナーの方を対象に解説します。仕組みについて理解していると、レスポンシブデザインをもっと活用できます。メリットやデメリットについてもまとめているので、あわせて参考にしていただければと思います。
レスポンシブデザインの基礎
レスポンシブデザインとは？
パソコンだけでなく、スマホやタブレットなどさまざまな端末でインターネットが使われるようになった昨今。ホームページも、スマホなどの端末に対応することが急務になってきています。2015年4月には、Googleもスマホ対応を検索順位の決定要因としてとりいれています。
今回のテーマであるレスポンシブデザイン（レスポンシブウェブデザイン）は、スマホ対応するためのWebデザイン手法のことです。端末の画面サイズによって、自動でレイアウトを調整できます。スマホやタブレットなどの端末でも、見やすく使いやすいかたちでページが閲覧できるのです。
レスポンシブデザインの仕組み
レスポンシブデザインは自動でレイアウトを調整するのですが、その時に使うのがCSS3のメディアクエリです。メディアクエリとは、指定した画面サイズによってCSSを切り替える機能のこと。一つのページに対してHTMLは一つなのですが、CSSは複数あることになります。
ちなみに、CSSを切り替えるサイズのことをブレークポイントと呼びます。ブレークポイントごとにCSSファイルを分けてもいいですし、一つのCSSファイルにまとめてしまっても大丈夫です。
レスポンシブデザインの方法
それではレスポンシブデザインの方法について、具体的にみてみましょう。
@media screen and (max-width: 640px) {
.text {
color: #f00;
}
}
上のように記載すると、640pxまでの画面サイズだけに適用させるスタイルが指定できます。ブレークポイントは640px、ということですね。
max-widthという記述がありますが、これは指定した数値より小さい画面サイズに適用させるCSSを書くためのものです。逆に、指定したサイズより小さい画面サイズに適用させるCSSはmin-widthを使って記述します。max-widthとmin-widthを同時に使って、640px以上1024px以下、のように指定することも可能です。
レスポンシブデザインのメリット・デメリット
メリット
レスポンシブデザインを導入すると、サイトの制作コストが抑えられることがあります。ページごとのHTMLファイルが一つで済むことがその理由。端末ごとにHTMLファイルを用意する必要がないので、管理の手間が減るのです。
またHTMLが一つになることで、SEOにもプラスの効果があります。ページのURLが一つになるのでアクセスが分散しませんし、TwitterやFacebookなどのSNSでのシェアもされやすくなります。
デメリット
レスポンシブデザインは、ページに使うCSSを切り替えているだけで、CSS自体は読み込んでいます。スマホでページを表示している場合でも、パソコン用のCSSやタブレット用のCSSが読み込まれているのです。こういったことが理由で、ページの表示速度に影響する場合があります。
また、すでにあるサイトにレスポンシブデザインを導入する場合、制作に時間がかかってしまう場合があります。制作コストが上がってしまう場合もあるので、レスポンシブデザインはサイトの制作時に導入するのが望ましいですね。
まとめ
スマホに対応する方法は、レスポンシブデザインだけではありません。あえてレスポンシブデザインを避けることもありますし、プログレッシブエンハンスメントなどの考え方も登場しています。自社のWeb方針に沿った方法を選択していってください。