-本日のアジェンダ-
1限目
実技 スマートフォンサイト作成実習
コーディングに向けて
2限目
実技 スマートフォンサイト作成実習
課題制作
3限目
実技 スマートフォンサイト作成実習
課題制作
4限目
実技 スマートフォンサイト作成実習
課題制作
5限目
実技 スマートフォンサイト作成実習
課題制作
本日のテーマ
デザインラフができたらコーディングを進めましょう。
WebサイトはPCで閲覧よりもスマートフォンで閲覧する割合が増加しています。
Webサイトを多くの人に見てもらうためにははスマートホン対応がされていることが重要です。
スマートフォンで閲覧しても快適に閲覧できるようにWebサイトを作成してください。
例えば、以下のようなサイトではスマートホンでの閲覧に不向きです。
- 文字が小さすぎて拡大しないと読めない
- 横スクロールしないと全体が読めない
- 横幅が狭い場合にレイアウトが乱れて読みにくい
- ボタンやバナーの大きさや間隔が小さくて指で押せない
スマートフォン対応（レスポンシブWebデザイン）の実施方法が明確でない人は「学科 CSS基礎⑥」の内容を再度確認しましょう。
【学科 CSS基礎⑥のカリキュラム再掲】
Box modelについて（RWD）
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「マルチデバイス対応の教科書①.pdf」
【動画】
- Box Model
https://youtu.be/K1PcxtiiObc（12分19秒） - ボックスの幅（width）と高さ（height）の制御
https://youtu.be/UiOlkIahkT8（8分46秒） - ボックスの余白（padding/margin）の制御
https://youtu.be/kVjUE1xI9tY（9分41秒） - ボーダー（border）と横並び（float）の制御
https://youtu.be/uwNyg_GLYWM（7分37秒） - ボックスの配置と表示形式の制御
https://youtu.be/7_Ez0F5WKd8（9分13秒）
RWD 対応のサイトについて
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入
本日の課題
今日できたところまでのサイトをサーバに仮アップしてみましょう。