デバイス毎に形を変えるレスポンシブデザイン

Webサイトのページレイアウトを閲覧する環境に応じて自動で変換させることができるレスポンシブデザイン。
多様化するデバイスに対応できるwebデザインとして大手企業のサイトに導入されるなど大きな注目を集めています。
そのデザインやレイアウトは、一体どのような技術によって実現されているのでしょう？

レスポンシブデザインを支える技術

1．メディアクエリ
メディアクリエとは、簡単に言うとレスポンシブデザインのスタイルの振り分けを可能にする技術だという事ができます。
レスポンシブデザインは、画面サイズを判断基準にして表示するwebサイトのレイアウトやデザインを調整します。
これは、画面の解像度、ウィンドウの幅、デバイスの向き等の指定条件に合わせて別々のCSSを適応することができるメディアクリエの働きによるものです。

2．フルードグリッド
フルードグリッドとは、フルードデザインとグリッドデザインを合わせたものです。フルードデザインは、ブラウザの横幅が変わったとしてもレイアウトを維持した状態で、それぞれの要素のサイズを自動で調整する手法です。
一方、グリッドデザインとは、webサイトの要素を罫線や升目にそって配置していく手法のことを言います。
この2つを合わせたものが、フルードグリッドです。

3．フルードイメージ
フルードデザインとは、画像サイズをブラウザのウィンドウの幅に合わせる方法のことを言います。ウィンドウのサイズに応じて縦横比を保持したまま拡大・縮小をさせます。

この3つの技術は、レスポンシブデザインの基本的な技術だといえます。
レスポンシブデザインは、この他にも様々な技術に支えられ、成り立っています。