レスポンシブWebデザインは建築用語がもとで、マルチデバイス対応のCSSフレームワークも豊富


現在、PC以外にもスマホやタブレットがたくさん登場しており、Webサイトのデザインをそれらすべてのデバイスに個別に対応することはコストが膨大となってしまう問題が出てきました。
 
そこで、レスポンシブWebデザイン、というWebサイト開発手法の出現です。
 

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

レスポンシブWebデザインとは、1つのHTMLソースで、デバイスの画面横幅に応じてレイアウトやデザインを変更する(すなわち、スタイルシートを変更する)手法です。
 
レスポンシブWebデザインを採用することで、1つのHTMLソースを管理することでOKとなり、多様なデバイスに個別に対応する必要がなくなるわけです。
 

レスポンシブWebデザインは建築用語

レスポンシブWebデザインは、2010年5月25日、アメリカのWebデザイナーのEthan Marcotte(イーサン・マルコッテ)が紹介したマルチデバイス対応のWebサイト制作手法です
 
なお、レスポンシブという言葉は、建築用語の「Responsive Design」(変化できる建築デザイン)からきています。
 

レスポンシブWebデザインで使われている技術は3つ

マルチデバイスに対応させるためにレスポンシブWebデザインで使われている技術は大きく3つです。

  • Media Queries
    (メディアクエリ)
  • Fluid Grid
    (フルードグリッド)
  • Fluid Image
    (フルードイメージ)

になります。

メディアクエリ

まず、Media Queries(メディアクエリ)とは、デバイスの横幅などを検知してCSSを切り替える技術です。
 
Media Queries(メディアクエリ)を使用することで、PC、スマホ、タブレットに応じたデザインレイアウトを実現します。なお、CSSの切り替えポイントを「ブレイクポイント」と呼びます。
 

フルードグリッド

次に、Fluid Grid(フルードグリッド)とは、グリッドの幅や数がデバイスの横幅に応じて変化する技術です。
 
通常はタテに均等間隔で分けたものがグリッドとなり、そのグリッドに沿って画像などのコンテンツを配置させる必要があります。デバイスの横幅によってグリッドの幅や数を変化させます。
 

フルードグリッド

そして、Fluid Image(フルードイメージ)とは、画像が縦横比を保ったままバイスの横幅に応じて伸縮する技術です。
 

レスポンシブWebデザイン対応のCSSフレームワークも

レスポンシブWebデザインでは、1つのHTMLソースを、PC・スマホ・タブレットといったマルチデバイス対応できるように作らなければならないわけで、設計・製造の難易度が高く、労力がかかるものです。
 
そこで、レスポンシブWebデザインに対応していて、デザインに使える豊富な機能を事前に用意したもの「CSSフレームワーク」が多く発表されています。
 

CSSフレームワークのメリット

CSSフレームワークを利用するメリットは、導入コストの軽減です。豊富な機能を事前に用意されているためです。
 
CSSフレームワークの代表例はこちらです。
 

  • Twitter Bootstrap
  • Foundation
  • HTML KickStart

 

まとめ・感想

レスポンシブWebデザインならば、1つのHTMLソースを管理することでOKとなり、多様なデバイスに個別に対応する必要がなくなります。さらにCSSフレームワークを活用すれば、レスポンシブWebデザインが導入しやすくなります。