8月12日 ✔︎wonderglobe完成🪄 基礎コーディングの課題作品が完成！ 先月から育休明けで本業も再開して、スローペースで進めていましたが… 無事ポートフォリオに仲間入りしました💎 今回は 初めてのPC→SP設計 に挑戦。やり易かった！ アニメーションや構造までこだわって丁寧に作ったので、ぜひ見てほしいです 👉pilina-work.com 以下、基礎コーディング課題の備忘録📝 ⚫︎ FVの見出しが画像に被る部分で白黒になっている →mix-blend-modeでは表現できない。 白に黒を重ねて、黒はoverhiddenでちょん切って再現✂︎ ⚫︎FVのアニメはパッと終わらせる。長いとストレスに。スクロールトリガーの出現タイミングも70％だと遅い。90％くらいが◎ ⚫︎reportセクションは沼脱ライブコーディングで紹介されてた、グリッドで規則性を見出したfor文で保守性UP→これが原因なのか不明だけど、spでグリッド解除した時に1番目と2番目以降の間にSafariで余計な余白が。Chrome等は問題なかった。→displayblockで解決 ⚫︎リキッドレイアウトに関して ブレイクポイントあたりで文字が小さくなりすぎるのをmax関数で制御してアクセシビティに配慮 spカンプ以下は制御なしにしたけど、ブラウザによっては一定の文字サイズ以下には縮まないよう制限がかかることがあるのを知った。逆に段々と値が大きくなる怪奇現象が起こった👻焦った。まぁそんな小さいデバイスは存在しないけど🙆‍♀️ ⚫︎品質チェックに関して safariだと若干の横スクロールや、余計な余白があるのを確認。各ブラウザでは値の計算が違ったりするんだと再認識。やぱ品質チェックは重要！特にiPhone持ってる人多数だしね。 その他、「基礎コーディング」と言えど、躓いたり、りょーさんに質問して初めて知ったこともあり、とてもとても勉強になりました🎊 これで沼脱割効いて¥19800だった！コスパ良き教材だった〜 #沼脱 #デイトラコミュニティ #基礎コーディング #ryohack

@a3_webcoder mix-blend-modeを使用したうえで白黒の幕を付けるといいのかな？？とかいろいろ考えてFVずっと沼ってました😅思い込みはよくないですね。 えーさんの実装はいつも参考になって、とても勉強になります😊