実技 WEBデザイン実習③

-本日のアジェンダ-

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

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

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

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

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


本日のポイント

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

PCスペック確認大会

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

フォントカルタ大会

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

参考サイト

https://www.fontkaruta.com/about

本日の課題

課題提出はありません。

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

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

実技 WEBデザイン実習②

-本日のアジェンダ-

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

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

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

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

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


本日のテーマ

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

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

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

Webページ制作実践⑤

Webページ制作実践で作成したページをレスポンシブWebデザイン対応をさせましょう。

【資料】

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

レスポンシブWebデザインまで完了したファイルを下記に格納してあります。
必要に応じてダウンロードして確認してください。
chapter5.zip」 

  1. メディアクエリの記述
  2. レスポンシブWebデザインの対応

本日の課題

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