スマートフォンの普及に伴い、従来のWebサイトが
スマートフォンに対応して見やすくなってきています。
このブログも、そのサイトの一つです。
しかし、iPhoneやAndroidでは画面の大きさが異なっているのに
どうして、どのデバイスで見ても見やすいのだろう…。と思った方いませんか?
それは、「レスポンシブ・ウェブデザイン」という仕様が実装されているからです。
レスポンシブ・ウェブデザインとは何か簡単に説明すると
デバイスの画面のサイズに応じて、サイトのデザインを最適化できる方法です。
例えば僕らのブログをPCで見ると
このような感じになりますが
iPod touchで見ると
レスポンシブ・ウェブデザインを実現するためには
Media QueriesでCSSを振り分けてレイアウトなどを切り替える必要があります。
もっと詳しく、丁寧な説明を知りたい方はこちらのサイトへ。
元々、この考え方の基礎を作ったのは、”Ethan Marcotte”という米国の開発者です。
彼のブログ「Unstoppable Ninja」で紹介されている「Fluid Grid」という記事が元になります。
彼はこの記事の中で「Fluid Image」という手法を紹介していますが、これが恐らくレスポンシブ・ウェブデザインの原型になったと言われています。
またWebアプリケーションを作る方は、必ずと言っていいほど必要な知識になると思います。
では。
0 件のコメント:
コメントを投稿