-本日のアジェンダ-
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サイトを制作できます。
【資料】
Dropboxにある資料をダウンロードしましょう。
作品制作のポイントをまとめた資料です。
［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP3】/Webページの理解/「マルチデバイス対応の教科書①.pdf」・・・資料①【STEP4】/Webページの制作/「マルチデバイス対応の教科書②.pdf」・・・資料②
【動画】「マルチデバイス対応の教科書①」
- RWDとは・ボックスモデルについて
https://www.youtube.com/watch?v=K1PcxtiiObc（12：19） - ボックスモデルの復習①「width」「height」
https://www.youtube.com/watch?v=UiOlkIahkT8（8:46） - ボックスモデルの復習②「padding」「margin」
https://www.youtube.com/watch?v=kVjUE1xI9tY（9:41） - ボックスモデルの復習③ 「border」「 float」「clear」
https://www.youtube.com/watch?v=uwNyg_GLYWM（7:37） - ボックスモデルの復習④「position」「overflow」「display」
インライン、インラインブロック、ブロック要素の違い・まとめ
https://www.youtube.com/watch?v=7_Ez0F5WKd8
【動画】「マルチデバイス対応の教科書②」
- レスポンシブWEBデザインの歴史・基本設定「Viewport」
https://youtu.be/nC_uQqegU1U（6:48） - 「Media Queries」ブレイクポイントの設定について
https://youtu.be/-5CErQOS4zU （10:12） - UI/UXについて・迷子にさせない導線づくり
https://youtu.be/t0jDgeL3LtU（8:27） - ページの表示スピード対策・使いやすさの追求とまとめ
https://youtu.be/4VjAorauRLM（7:47）
ワンポイントアドバイス
昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。
参考サイト
- 【入門】レスポンシブWebデザインとは？概要と作り方を丁寧 …
- Responsive Web Design JP | 日本国内の秀逸なレスポンシブ …
- レスポンシブWebデザインとは？メリットとデメリット …
Viewport とは？
viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。
ワンポイントアドバイス
viewport はサイト制作の時最初の1度しか書かないので、単純に入れ忘れに注意しましょう。
参考サイト
- 実践！スマホサイトのviewport設定 | 第1回 viewportとは …
- viewportを理解して正しいレスポンシブデザインを設定しよう …
- viewportとは？HTMLのmeta要素の設定方法など徹底解説！
Media Queries とは？
メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。
ワンポイントアドバイス
メディアクエリは様々な記述方法がありますが、まずは1つのルールで書いてみましょう。
参考サイト
本日の課題
ワイヤーフレームから「デザインラフ」の作成に進み、
今日できたところまでの成果をDropboxに上げてください。
※ファイル名は、work_xxxx_20230717.jpg