学科 スマートフォンサイト制作基礎【オンライン】
講師:湊 有加里
-本日のアジェンダ-
1限目
学科 スマートフォン制作基礎
デバイスについて
2限目
学科 スマートフォン制作基礎
各デバイス検証について
3限目
学科 スマートフォン制作基礎
レスポンシブ対応について(復習)
4限目
学科 スマートフォン制作基礎
課題制作
5限目
学科 スマートフォン制作基礎
課題制作
本日のテーマ
デバイス検証は最後にしっかりと
デバイスとは?
デバイスとは、ホームページ(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サイトやアプリをリリースするための重要な作業の一つです。
ワンポイントアドバイス
サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。
参考サイト
RWD 対応のサイトについて【復習】
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入