従来のWebサイトをスマホに対応させる「レスポンシブ・ウェブデザイン」とは？

ども、Falconです。
スマートフォンの普及に伴い、従来のWebサイトが
スマートフォンに対応して見やすくなってきています。
このブログも、そのサイトの一つです。

しかし、iPhoneやAndroidでは画面の大きさが異なっているのに
どうして、どのデバイスで見ても見やすいのだろう…。と思った方いませんか？

それは、「レスポンシブ・ウェブデザイン」という仕様が実装されているからです。



レスポンシブ・ウェブデザインとは何か簡単に説明すると
デバイスの画面のサイズに応じて、サイトのデザインを最適化できる方法です。





例えば僕らのブログをPCで見ると

このような感じになりますが








iPod touchで見ると

こんな感じになって、見やすくなっています。








レスポンシブ・ウェブデザインを実現するためには

Media QueriesでCSSを振り分けてレイアウトなどを切り替える必要があります。

Media Queriesとは、読み込まれるCSSや、CSSの記述のインラインに条件を加えることが出来るようになる仕様です。

もっと詳しく、丁寧な説明を知りたい方はこちらのサイトへ。

http://designblog.ecstudio.jp/design-2/responsive-design.html

去年あたりから注目されるようになったこの方法。
元々、この考え方の基礎を作ったのは、”Ethan Marcotte”という米国の開発者です。

彼のブログ「Unstoppable Ninja」で紹介されている「Fluid Grid」という記事が元になります。

彼はこの記事の中で「Fluid Image」という手法を紹介していますが、これが恐らくレスポンシブ・ウェブデザインの原型になったと言われています。

これからスマートフォン、タブレット端末、PCなどのWebサイト

またWebアプリケーションを作る方は、必ずと言っていいほど必要な知識になると思います。

では。

Posted in: HTML,iPhone・iPad,テクノロジー