-本日のアジェンダ-
1限目
学科 スマートフォンサイト制作基礎
デバイスについて
2限目
学科 スマートフォンサイト制作基礎
各デバイス検証について
3限目
学科 スマートフォンサイト制作基礎
コーディングに向けて
4限目
学科 スマートフォンサイト制作基礎
課題制作
5限目
学科 スマートフォンサイト制作基礎
課題制作
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：デバイス検証について
内容1：スマートフォンサイトについて
内容2：デバイス検証について
内容3：レスポンシブWebデザインについて(復習)
課題：なし
（注記）
・後半に、復習としてレスポンシブ対応の動画も再掲しております。動画視聴に関しては講師の先生のご判断、さじ加減にお任せします。
本日のテーマ
デバイス検証は最後にしっかりと
デバイスとは？
デバイスとは、ホームページ（Webサイト）を閲覧するための端末のことです。パソコン（Windows、Macなど）、タブレット（Android、iPhoneなど）、スマートフォン（Android、iPhoneなど）などがあります。
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「各デバイス検証.pdf」
【動画】「各デバイス検証」
- デバイス復習・Chromeデベロッパーツールの活用
https://youtu.be/AcsQLCdnA2I（8:29） - 実機検証を行いましょう・デバイス検証まとめ
https://youtu.be/oiSlUKld7t8（8:33)
実機検証 について
スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。
ワンポイントアドバイス
サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。
参考サイト
スマートフォン利用を意識してコーディングを進めましょう。
WebサイトはPCで閲覧よりもスマートフォンで閲覧する割合が増加しています。
Webサイトを多くの人に見てもらうためにははスマートホン対応がされていることが重要です。
スマートフォンで閲覧しても快適に閲覧できるようにWebサイトを作成してください。
例えば、以下のようなサイトではスマートホンでの閲覧に不向きです。
- 文字が小さすぎて拡大しないと読めない
- 横スクロールしないと全体が読めない
- 横幅が狭い場合にレイアウトが乱れて読みにくい
- ボタンやバナーの大きさや間隔が小さくて指で押せない
スマートフォン対応（レスポンシブWebデザイン）の実施方法が明確でない人は「学科 CSS基礎⑥」の内容を再度確認しましょう。
【学科 HTML/CSS基礎⑨のカリキュラム再掲】
レスポンシブWebデザインについて
【資料】
カリキュラム資料 ダウンロード用サイト
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 でデザインを整える
- 画面サイズに合わせた表示部品の導入
本日の課題
提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。