Webデザイン勉強記録：3月⑵

こんばんは！

今回、アイキャッチをちょっと男性向けバナーを意識して作ってみました。好きに作ると可愛い系ばっかりになって偏るので。

難しかった…カッコイイ系のフォントも入れてなかったし。
もっとネオンっぽい文字とか入れたら良かったかも。

それでは今週の勉強noteです。

◆卒業制作コーディング実装

デザインはOKを頂いたので、初めて０からHTMLとCSSを作成していきます！

最初は理性的に書けていたはずのコードが、進むにつれて…

（ここもdivで囲う？）（この閉じタグはどこの？）（imgタグとbackground-imageで混乱）（marginとposition何を使う？マイナス指定が多い気がするけどこんなもの？）（flexが効かない😂）（要素の%指定って効かない事が多い？）（CSSだけでトリミング(object-fit)、できない！）

と色々混乱状態に。

コードレビュー、どこかでしてもらわないと勉強無理だな・・・・。

全て解決はしてないけど、PC版のレイアウトは自分で想像したよりも早く組めたので嬉しかった！SHEの講座と、モダンコーディングの本のおかげ。

長い画像は貼れるのかな？

実装済みのサイトキャプチャです。

まだ微妙な余白が残ってるかも。

本当に苦労するのはこの後ですけどね・・・・・・・

ーーー

レスポンシブ対応

メディアクエリ、そんなに難しく無さそう？と思っていた過去の自分に教えてあげたい。

・モニターに繋いで作業していたのもあり、そもそもPCレイアウトすら大きすぎた（ちゃんと調べずwidth1400pxとかで作ってしまっていた…）

・横に広がるデザインにしていた

・余白やサイズを全てpx指定にしていた

・適切にwrap系クラスを作れていなかった

以上の要因で、作り直しに近い再設定対応をすることになってしまいました。

一旦、iPad縦向きレイアウトまで何とか終了。

「モニター大画面→デスクトップPC→iPad横」　これは同じCSSで対応出来た方が良いんだろうな。。まだまだ、全然ちゃんと伸び縮みしてくれないです。

本当難しい！！この後スマホ縦を組んでいくけど、その前に今のコードを見直したいな・・・。

アニメーション

画面内スクロールはコピペで実装できたけど、要素を動かすアニメーションが中々できません。

読み込みと同時に動いてしまう。

スクロールと連動させたいんだけど、スクロールマジックとか色々調べてやってみても実装できなかった…。

もともと、フロントエンドエンジニアというよりコード書ける分かる！デザイン寄りの人材！になりたいのです。

アニメーション 、どこまで深くやるか悩みどころです。

◆バナートレース

一つトレース。本当は週に2つくらいやりたいんだけど、卒制やってると中々時間取れず。

（元）

（トレース）

また好きなの選んで和風にしてしまった。これすごい可愛くないです？？

この外枠が気に入りました。フォントも和モダン。

背景のカラーリングも、可愛い・・・あまり和風だと（自分では）選べなそうな色の組み合わせ。良すぎる。

ーーー

自分で締め切りを切ろうと思って卒制発表会を先に予約しちゃったので、来週で仕上げなければ！

テレワークのおかげで時間取りやすくて、その点は助かっています🙏

もくもく会も予約したし、引き続きがんばろ！