レスポンシブデザインって何?(RWD, Responsive Web Design)意味と作り方

スタイルシート
スポンサーリンク

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

 

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

  • レスポンシブWebデザイン
  • RWD
  • Responsive Web Design

 

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

 

スポンサーリンク

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

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

 

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

 

 

スマホ

 

タブレット

 

パソコン

 

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

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

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

 

Windows, スマホ OS (Android, iOS) の歴史、シェアの推移、衰退、パラダイム
どのような世界にも栄枯盛衰はあります。 特に、コンピュータ、パソコン業界、インターネット業界の動きは激しい業界です。 日々新しい企業が生まれては消えていきます。 動きを止めたり、道を間違えるとすぐに衰退していきます。 全速力でマ...

 

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

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

 

 

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

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

 

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

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

 

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

 

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

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

 

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

 

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

 

 

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

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

 

コメント

タイトルとURLをコピーしました