-本日のアジェンダ-
1限目
学科 レイアウトデザイン基礎③
文字と余白について
2限目
学科 レイアウトデザイン基礎③
レイヤー管理
3限目
学科 レイアウトデザイン基礎③
課題制作
4限目
学科 レイアウトデザイン基礎③
課題制作
5限目
学科 レイアウトデザイン基礎③
課題制作
サイト制作課題
10月9日（金）までに提出・「デザインカンプ」★
10月16日（金）までに提出・「WebサイトPC版（途中報告） 」
10月23日（金）までに提出・「Webサイトスマホ版（途中報告）」
10月27日（火）第４回成績考査・「Webサイト（出来たところまで！）」
本日のテーマ
読みやすさに配慮したサイトを制作しましょう
文字について
- 伝わるデザイン｜文字
- Webサイトにおける文章を読みやすくするデザインのポイントについて
- 読みやすいWebタイポグラフィとデザインルール設計について
- CSS line-heightの書き方３つを初心者向けに図で解説！
- 【CSS】letter-spacingで字間を調整する方法まとめ
併せて、今のリセットCSSの仕組みも確認してみましょう
Webフォント
Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、表示するCSS3から策定された技術です。
源ノ角ゴシック（Noto Sans JP）・源ノ明朝（Noto Serif JP）は、AdobeがGoogleと共同開発したオープンソースのフォントファミリーです。
Google Fonts
参考サイト：
今回の課題では、自分（デザイナー兼コーダー）のために、
PSDのデザインカンプで レイヤー管理 を心がけてみましょう。
- 【サンプルPSDデータ配布中！】デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみた
- コーディングしにくいwebデザインを改善する12の方法
- そのデザインがコーディングしにくい理由と、改善ポイント詳説
便利ツール
HTMLの記述をチェックしてみよう
Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
HTML5リファレンス
CSS フレックスボックスの仕様
CSS フレックスボックスレイアウト
CSS Flexboxチートシート
色の名前とカラーコードです
HTMLカラーコード: WEB色見本 原色大辞典
Googleフォント（ウェブフォント）
Google Fonts
画像圧縮ツール
TinyJPG