学科（レイアウトデザイン基礎） – ページ 2 – DEAUアカデミー WEBデザイナー養成(午前)科

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎④
min-widthとmax-width

2限目
学科レイアウトデザイン基礎④
スマートフォンサイトの制作について

3限目
学科レイアウトデザイン基礎④
課題制作

4限目
学科レイアウトデザイン基礎④
課題制作

5限目
学科レイアウトデザイン基礎④
課題制作

本日のテーマ

スマートフォンサイトについて学習しましょう

サイト制作課題

10月9日（金）までに提出・「デザインカンプ」★
10月16日（金）までに提出・「WebサイトPC版（途中報告）」
10月23日（金）までに提出・「Webサイトスマホ版（途中報告）」
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」

max-widthとmin-width

レスポンシブデザイン（スマホでもPCでも、どんな大きさの端末で見てもちょうどいい大きさに表示されるWebデザインのこと）を作るためには、min-widthとmax-widthを避けては通れません。

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
CSS フレックスボックスの仕様
　CSS フレックスボックスレイアウト
　CSS Flexboxチートシート
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典
Googleフォント（ウェブフォント）
　 Google Fonts
画像圧縮ツール
　TinyJPG

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎③
文字と余白について

2限目
学科レイアウトデザイン基礎③
レイヤー管理

3限目
学科レイアウトデザイン基礎③
課題制作

4限目
学科レイアウトデザイン基礎③
課題制作

5限目
学科レイアウトデザイン基礎③
課題制作

読みやすさに配慮したサイトを制作しましょう

併せて、今のリセットCSSの仕組みも確認してみましょう

Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、表示するCSS3から策定された技術です。

源ノ角ゴシック（Noto Sans JP）・源ノ明朝（Noto Serif JP）は、AdobeがGoogleと共同開発したオープンソースのフォントファミリーです。
Google Fonts

今回の課題では、自分（デザイナー兼コーダー）のために、
PSDのデザインカンプで レイヤー管理 を心がけてみましょう。

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
CSS フレックスボックスの仕様
　CSS フレックスボックスレイアウト
　 CSS Flexboxチートシート
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本原色大辞典
Googleフォント（ウェブフォント）
　 Google Fonts
画像圧縮ツール
　TinyJPG