レスポンシブデザインって何？（RWD, Responsive Web Design）意味と作り方

レスポンシブデザインって知っていますか？

レスポンシブデザインは、次のように表記されることもあります。

最近、よく聞く言葉なので、レスポンシブデザインの意味、作り方を調べてみました。

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

レスポンシブデザインとは一つのWEBページのデザインで様々なデバイスに対応することです。

2013年頃から、WEBページを制作する上で流行となっていることです。

2009年以前のスマホが流行る以前は、WindowsのIEにさえ対応しておけばほとんどのWEBページはそれで運用上問題ありませんでした。

他の端末やブラウザを使うケースは稀だったからです。

この辺りの時代による変遷は以下をご覧ください。

現在は、iPhone/iPad/Androidを始め、解像度も様々で多種の端末とIE以外にSafari/Firefox/Chromeのシェアもそこそこあるために多種のブラウザに対応する必要があります。

そこでCSSを使って、多種の端末、ブラウザに対応するレスポンシブデザインが主流になっています。

それでは、簡単なレスポンシブデザインの実装方法を見てみましょう。

レスポンシブデザインの簡単な実装方法

私が使っているこのページの場合、CSSの中で

のような記述がありますが、表示されているサイズにより表現する方法を制御しているようです。

レスポンシブデザインは今後もWEBページの標準になっていくと思われます。

とは言え、最近のWordPressのテーマは全部、レスポンシブ対応になっているようなのでほとんどの場合、ユーザーが意識する必要はないようです。

意識する必要があるのは、開発者ですね。

CSS　レスポンシブデザインのおすすめの本

↓CSS レスポンシブデザインのおすすめの本はコチラ
CSS レスポンシブデザイン

最後まで読んでいただきありがとうござました。

この記事が気に入っていただけたらシェアしてくれると嬉しいです。