【WEBデザイン学習日記-63】 オンライン授業の復習

8/26（土）～8/27（日）の学習記録です。待ちに待った週末。今週は旅の疲れも抜け切れていないのに連日の早出出勤＆残業はさすがにきつかったです😢今週末から本格的にWEBデザインの学習再開しました。

☆★☆　☆★☆　☆★☆

2023年8月26日（土）　前回のオンライン授業の復習：1時間20分

昨日は最後のオンライン授業だったのですが、先生の体調不良により急遽１週間延期になりました。
実は残業続きで疲れがピークに達しており、21時からの2時間のオンライン授業に寝落ちせず耐えられるようにコーヒーを飲んでスタンバイしてたのですが、延期を知って内心少しほっとした自分がいました。と言うのも１週間の旅行＆残業続きの日々で約２週間WEBデザインの学習が止まってしまっていたので学習が遅れ気味でかなり焦っていました。この１週間の間に遅れをしっかり取り戻して、来週の最後の授業に臨みたいと思います。ちなみに昨晩は遅い時間にコーヒーを飲んために１時半まで眠れませんでした…💦

☆★☆　☆★☆　☆★☆

2023年8月27日（日）　前回のオンライン授業の復習：4時間

今日は途切れ途切れではありましたが、4時間コーディングの復習。旅行中に1日欠席した授業のアーカイブ動画を見ながら、一緒に手を動かしコーディングをしてみましたが、内容が今までで一番難しい。。。画面環境にあったデザインに切り替えるCSSの記述の@media（メディアクエリ）と言うものが新登場、ますます混乱💦

スマホ対応ページに対応するためのコーディングを学び、何度も巻き戻し再生しゆっくり理解しながら進めていく。宿題として比較的シンプルなつくりの下層ページを自らコーディングしてみようということだったので、さっそくやってみることに。Figmaのデザインを見て、まずはどことどこが箱に入っているのか、class名は何にするのか、どのCSSでその形にするのかを考えながらスケッチブックに書いてみる。

色々自分なりにコーディングし、それらしき形になるもやはり基本的なことが完全に理解できていない(display, position, margin:autoなど）から画像の中央寄せや画像と画像の間の余白づくりなどに苦戦中。

（苦戦中のところ）

• class名の命名に頭を悩ませる

• メインビジュアルをhtmlではなく、CSSのbackground-imageで表示させるのに相対パスの書き方がよく分からず、画像を表示させるのにかなり時間がかかった

• メインビジュアル画像を左右の余白を保ちながら画面いっぱいに表示させる　→未だにできず・・・・

• ２つ横並びの画像はFlexでできたが、間に余白を作り、中央に配置ができない　→まだ分からず、二つの画像がくっつき左に配置されている

明日は、もう一度基本的なプロパティを復習し、再度コーディングに挑戦してみます。おやすみなさい。

☆★☆　☆★☆　☆★☆

＜8/26（土）～9/1（金）の学習目標＞　

• 個人制作のコンセプト＆デザイン作り

• CSSの復習＆パーツコーディング復習

• アーカイブ動画でコーディングの復習　

• バナー制作1つ

＜8月末までの目標＞

• 毎週の授業の予習＆復習をしっかりする

• 制作物（少なくとも３つはレビューに出す）→あと１つ！

• 個人制作のコンセプト作り

#転職
#海外
#オンライン
#Webデザイン
#主婦
#制作
#Photoshop
#未経験
#学習日記
#クリエーターズファクトリー
#デザイン
#Figma
#サイトトレース