パソコン出張修理ニュース

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

TOPパソコン・インターネットニュース > レスポンシブWebデザイン

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

最近のインターネットの閲覧はパソコンばかりでなく、スマートフォンやタブレットなどの情報端末でホームページを閲覧する人が増えてきました。 そこで気になるのが、表示されるWebサイトが閲覧する情報端末の画面サイズに合っているかという事です。 ホームページを作成する場合は、携帯サイト専用にするような場合を除いて通常はパソコン用として設計します。 もちろんパソコン用の画面サイズとして設計したホームページでも、そのままスマートフォンやタブレットにも表示されますが、 タブレットでは横向きで何とか表示できても、スマートフォンとなるとそのほとんどは横向きでも文字が小さく、 読むには拡大しなければなりません。拡大すると縦スクロールはまだよいとして、 横スクロールを頻繁にしなければならなくなって結構疲れます。

スマートフォンで拡大しなくても(横スクロールせずに)読める文字の大きさで表示させるには、 スマートフォン用として表示するWebサイトを別に用意して、アクセスされる端末の種類がスマートフォンなら スマートフォン用のページを表示させる方法があります。 しかし、この方法は当然ながらパソコン用、タブレット用、スマートフォン用と3つのHTMLページを用意しなければならない為、 サイト作成作業量は単純に3倍に増える事になり、また変更する時も3つのファイルを変更しなければなりませんので管理も大変になります。

これを、1つのHTMLページにで閲覧する端末に合った文字の大きさやレイアウトで表示されるようにするのが「レスポンシブWebデザイン」です。 つまりレスポンシブWebデザインで作成したWebページは、同じページにもかかわらず閲覧する端末の画面サイズに最適化されて表示されるようになるので 画面サイズ毎のページを作成する必要がなく、管理もしやすくなります。 ではレスポンシブWebデザインで作成するにはどうしたらよいのでしょうか。 レスポンシブWebデザインは何か特別なものを使うという事ではなく、 サイズ毎に最適化するようにHTMLとスタイルシート(CSS:Cascading Style Sheets)を組み合わせて実現する技術となります。 これにより、1つのWebページをいろいろな画面サイズの情報端末に合ったレイアウトで自動的に表示できるようになります。
(2012年10月31日)
参考)レスポンシブWebデザインとは(ASCII.jp)

パソコン・インターネットニュースTOP


パソコントラブル出張修理 お問い合わせフォーム パソコントラブル出張修理の料金表 業務ソフト開発 アプリケーションソフト開発 ?