-本日のアジェンダ-
1限目
実技 スマートフォンサイト作成実習①
Viewportついて
2限目
実技 スマートフォンサイト作成実習①
Media Queriesについて
3限目
実技 スマートフォンサイト作成実習①
課題制作
4限目
実技 スマートフォンサイト作成実習①
課題制作
5限目
実技 スマートフォンサイト作成実習①
課題制作
本日のテーマ
スマホ対応はCSSの延長線です。
レスポンシブWEBデザイン（RWD）とは？
「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。
ワンポイントアドバイス
昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。
参考サイト
- 【入門】レスポンシブWebデザインとは？概要と作り方を丁寧 …
- Responsive Web Design JP | 日本国内の秀逸なレスポンシブ …
- レスポンシブWebデザインとは？メリットとデメリット …
Viewport とは？
viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。
ワンポイントアドバイス
viewport はサイト制作の時最初の1度しか書かないので、単純に入れ忘れに注意しましょう。
参考サイト
- 実践！スマホサイトのviewport設定 | 第1回 viewportとは …
- viewportを理解して正しいレスポンシブデザインを設定しよう …
- HTMLのviewportについて分かりやすく書いてみた | Dev …
Media Queries とは？
メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。
ワンポイントアドバイス
メディアクエリは様々な記述方法がありますが、まずは1つのルールで書いてみましょう。
参考サイト
就職活動に役立つサイト
練習課題
オンライン期間中のコーディング練習
Dropboxの練習用ファイルで力をつけましょう！
ファイル場所・・・資料 /【4】コーディング / 「コーディング練習 」
【練習①】「cording_saito_20201001.zip」
PDFにある問題を解いてみましょう。
【練習②】「cording_nakano_20210902.zip」
JPEGのデザインラフを目指して、CSSの「プロパティ」と「値」を組みましょう。
・完成したものは訓練中の成果としてポートフォリオに載せていただいて構いません。
・画像やバナーの入れ替えなど、自由にアレンジを加えていただいても構いません。
・提出課題ではありませんのでご自身のペースで挑戦してみて下さい。
本日の提出物はありません。