-本日のアジェンダ-
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 でデザインを整える
- 画面サイズに合わせた表示部品の導入
本日の課題
今日できたところまでのサイトをサーバに仮アップしてみましょう。