カテゴリー: 実技 WEBデザイン実習

実技 WEBデザイン実習③

-本日のアジェンダ-

1限目
実技 WEBデザイン実習③
PCスペック確認

2限目
実技 WEBデザイン実習③
PCスペック確認

3限目
実技 WEBデザイン実習③
PCスペック確認

4限目
実技 WEBデザイン実習③
フォントカルタについて・カルタ大会

5限目
実技 WEBデザイン実習③
カルタ大会

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：教室で講師とディスカッション
内容1：PCスペック確認　※事前にオンラインでPCスペックの動画を視聴済み
内容2：フォントカルタ　※お隣D0349は午前にフォントカルタです。
内容3：予備日程
課題：職務経歴書（ブラッシュアップしたものの提出）

【注釈】
■PCスペック確認
・事務所PC(低スペック4台)を使用し、グループワークで低スペックPCの扱いを体感してもらってください。※PCスペック確認については「△デザイン概論②」オンラインで動画を視聴済みです。
・目的：勤務先で低スペックPCを支給され、納品物の制作に当たらなければならない場合を想定した対処方法、扱い方の工夫を実践すること。
・齋藤先生より、「仕切りは講師の先生に任せします」とのこと。

★ヒント(例)としての課題設定
4グループに分け、最終目標「Photoshopではがきサイズのグループ札」を制作する。など、例ですので制作物は何でもOKです。
作品制作までたどり着かないことも想定内です。
PCの立ち上げ、Adobeソフトのインストール、Adobeアカウントログイン等、コツコツとプロセスを踏んでもらってください。より先に進める為に、適切な範囲でできることに取り組んでもらう。

■カルタ大会
・カルタ大会はワイワイ盛り上がってください。(by 齋藤先生)

■職務経歴書の提出を促してください。
※1回目の提出から更新がある人のみで可です。事前告知済み。

本日のポイント

グループワークです。楽しくやりましょう！

PCスペック確認大会

支給されたPCで作品制作を目指しましょう。

フォントカルタ大会

読み上げられたフォント名と解説をヒントに、そのフォントの札を取るというかるたゲームです。ゲーム形式でフォントの違いを見分ける感性を身に付けましょう！

参考サイト

・https://www.fontkaruta.com/about

本日の課題

課題提出はありません。

職務経歴書の提出について

本日は職務経歴書の2回目の提出日です。

実技 WEBデザイン実習②

-本日のアジェンダ-

1限目
実技 WEBデザイン実習②
RWD 対応のサイトについて

2限目
実技 WEBデザイン実習②
メディアクエリについて

3限目
実技 WEBデザイン実習②
Webページ制作実践

4限目
実技 WEBデザイン実習②
Webページ制作実践

5限目
実技 WEBデザイン実習②
本日の講義のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：WEBデザインについて
内容2：予備日程
内容3：予備日程
課題：練習問題提出
【注記】
・学科 HTML/CSS基礎⑨で学んだ内容を実践します。
・RWD対応で実施しなければいけない内容を理解してもらえるように進めてください。

本日のテーマ

Webページ制作実践で作成したページをRWD対応させましょう

RWD 対応のサイトについて【復習】

  • 幅広デザインでの Web ページ作成
  • viewport 定義の指定
  • 横幅変動時のコンテンツ幅を設定
  • Media Querie でデザインを整える
  • 画面サイズに合わせた表示部品の導入

Webページ制作実践⑤

参考元を確認し、ブラウザの画面幅を変えて背景色が変わる事を確認しましょう。

body{
	background:#ccc;
}
@media only screen and (max-width: 1280px){
	body {
		background:#999;
	}
}
@media only screen and (max-width: 960px){
	body {
		background:#666;
	}
}

@media only screen and (max-width: 640px){
	body {
		background:#333;
	}
}

1280px（PC）、960px（タブレット）、640px（スマホ）と認識してみましょう。

PC表示の場合は横並びのレイアウト、スマホ表示の場合は縦積みのレイアウトとし、flexプロパティを使ってレイアウトを自在に切り替えてみましょう。

トレーニング-５

実際のWebページを作成しましょう。

トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。

カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/

下記のファイルをダウンロードしましょう。
「training-5.zip」　

本日の課題

Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）