連載
» 2013年01月28日 14時24分 UPDATE

5分で絶対に分かる:5分で分かるレスポンシブWebデザイン (1/5)

流行りのレスポンシブWebデザインを、いくつかのカテゴリに分けて説明する。スマートフォン向けサイト制作を学びたいという方も必読だ。

[菊池崇,Web Directions East]

2013年に本格的に普及するレスポンシブWebデザインとは?

 2012年からWeb業界で話題になっているレスポンシブWebデザイン。一度は聞いたことがあったり、なんとなく知っていたりする方も多いだろう。その中には「ただ、言葉だけが流行っているだけでは?」とか、「業界が盛り上がっているだけではないか?」と思われている方も多いはず。

 レスポンシブWebデザインについて、「メディアクエリ」「フルードグリッド」「フルードイメージ」に分けて説明する。もちろん、スマートフォン向けサイト制作について学びたいという方も必読だ。

mq.jpg マルチデバイスに対応する「メディアクエリ」
fg.jpg いろいろな画面サイズに、液体のように伸縮対応する「フルードグリッド」
fi.jpg 画像が縦横比を保ったまま伸縮する「フルードイメージ」

 レスポンシブWebデザインとは単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法をいう。2010年に誕生し、今も進化をしている。言葉だけを引用するとレスポンシブとは“反応/変化”なので、それに環境に応じて変化するWebと広く理解する方もいるかもしれないが、基本的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させる手法がレスポンシブWebデザインだ。

 欧米でも2012年にはリニューアルとともにレスポンシブWebデザインをする大企業のサイトも続々とローンチされている。世界的に有名なオンライン・メディア「Mashable」でも、ポストデスクトップ時代の終わりとモバイル時代の幕開けを理由の1つとしてレスポンシブWebデザインが2013年のメガトレンドと予想している。

nt01.jpg Mashableの記事
       1|2|3|4|5 次のページへ

Copyright© 2016 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

素材感が溢れるツートンカラーの「VAIO C15」、プレゼント!

この記事に関連するホワイトペーパー

編集部からのお知らせ

@IT編集部では、編集記者を募集しています。ご興味のある方は奮ってご応募ください。

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。