デイトラweb制作コース挫折？40代プログラミング日記【20ヶ月目第4週】

2025/6/23（月）デイトラweb制作コース挫折しない！ 567日目

作業：5時間

作業内容

【Web制作コース 567日目】

P	【コーディング】　bakushins-portfolio制作　Blogsのレスポンシブ　FVの修正
D	【コーディング】　bakushins-portfolio制作　Blogs（アーカイブ）のレスポンシブ　FV（SVGの位置ズレ修正）
C	レスポンシブはほぼ完了！残りは 404,などだが、シンプルな構成なので1日もあれば終わるはず🧐 ということで、 TOPページの最終の修正を優先する！なぜか、FVのDOMにあるSVGが別コンポーネントのWorksに表示される親要素のrelativeもFVの中にあるのに🧐 摩訶不思議、、、AIでも調整つかないみたい、、、なのでabsoluteのimgとSVGを同じに囲んだとりあえず静止ではFVにデザインカンプ通り配置できた
A	今週中にデブロイ！

bakushin

Animationの数が多いので、@conteianer に挑戦することにした！

やっぱりClaudeに聞いても最適解という回答だった

clamp, @media で対応していたので、FVは複雑になってしまったので初挑戦ながら、@containerに期待！

プロンプトもうまくいかないし、理解まだなので、明日は @container の教授をAIに受けることから始めよう😊

作業：6時間

作業内容

【Web制作コース 568日目】

P	【コーディング】　bakushins-portfolio制作　FVの修正
D	【コーディング】　bakushins-portfolio制作　FV（SVG, animation）レスポンシブ
C	よし！TOP完了！やや強引に @media でレスポンシブを組み上げたけどOK！ @container に挑戦して一発でレスポンシブしたかったなー DOM構成に反省だ😅 innerをrelativeにして10個くらいのimgをausoluteしてた 2−3個のimgが連動して一つのAnimationを構成しているのに連動するimgをdivで囲んでないしかもJavaScriptの構成も完成してたので、DOM構成を崩したくない Gemini、本当にありがとう！まじでCSS, JavaScriptに異常なくDOM再構成してくれて！🙏
A	今週中にデブロイ！

bakushin

これでデザイナーさんにAnimationチェックを提出できる！

今週中にデブロイだ‼️