-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎②
RWDの歴史・基本設定Viewportについて

2限目
学科 レイアウトデザイン基礎②
Media Queries・UI/UXについて

3限目
学科 レイアウトデザイン基礎②
課題制作

4限目
学科 レイアウトデザイン基礎②
課題制作

5限目
学科 レイアウトデザイン基礎②
課題制作

本日のテーマ

スマホ対応はCSSの延長線です。

レスポンシブWEBデザイン(RWD)とは?

「レスポンシブWEBデザイン(Responsive WEB Design)」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML(ワンソース)で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。

動画】「マルチデバイス対応の教科書②」

ワンポイントアドバイス

昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。

参考サイト