プログラミング日記【12ヶ月目第1週】デイトラ40代アラフォー初心者

2024/10/1（火）プログラミング日記

【Web制作コース 332日目】卒業制作 35日目

作業：2時間

作業内容

P	上級編を進めるだけ進める
D	DAY31 〜 44 卒業制作課題　SHOPセクション　CONTACT（送信完了）セクション
C	SPレスポンシブ残り1セクション＆TOP（MV、ドロワー）ほぼ終わってきた、PCとSPの間のレスポンシブも含めて1週間位で完了か🤔 PerfectPixelはWordPress化の前後ともに必要❓️時間的にPOINT 少しずつ如意のコードが増えてきてるので嬉しい＆楽しいまずはレスポンシブ完成させる！ 👇️要チェックのパーツ　CONCEPTセクション　背景色（疑似要素）　MENUセクション　flex-wrap
A	DAY31 〜 44 卒業制作課題完了！

P	上級編を進めるだけ進める
D	DAY31 〜 44 卒業制作課題　TOPページ（ドロワー）
C	ん〜〜なぜかドロワーボタンの三 ⇔ ✕ が反対の表示🤔 innerに当てた overflow-x も効かず横スクロールが急に発生、理由🤔 ドロワーで時間かかってる感じ😱 スニペットも1つしか登録してない、幸いわかりやすい jQueryなのでなんとかここまでやるしかない🔥
A	DAY31 〜 44 卒業制作課題完了！

bakushin

👇️PerfectPixelとの照合は、WordPress化のあとで良いとメンターさんに質問して回答を確認！

作業の方向性を確認できたので、心置きなく進めることができる😊

【Web制作コース 334日目】卒業制作 37日目

作業：2時間

作業内容

P	上級編を進めるだけ進める
D	DAY31 〜 44 卒業制作課題　TOPページ（ドロワー）　　drawerのスニペット登録
C	drawer自体は実装できた！あとはオーバーレイで画面のどこをクリックしても閉じれるようにそれとスクロール後にハンバーガー登場この2点土曜日までには仕上げたい！
A	DAY31 〜 44 卒業制作課題完了！

【Web制作コース 335日目】卒業制作 38日目

作業：2時間

P	上級編を進めるだけ進める
D	DAY31 〜 44 卒業制作課題　TOPページ（ドロワー）
C	AI先生に聞きまくってなんとかドロワーの👇️を実装　オーバーレイで画面のどこクリックしても閉じる　ドロワーボタンの固定ドロワーのボタンとコンテンツを親子要素にしていないので、スクロールしたらボタンとコンテンツが分離😱 position: fixed で解決した😊fixedでもz-index効くんだって驚き
A	DAY31 〜 44 卒業制作課題完了！

【Web制作コース 336日目】卒業制作 39日目

作業：3時間

作業内容

P	上級編を進めるだけ進める
D	DAY31 〜 44 卒業制作課題　TOPページ（ドロワー、MV）　　スニペット登録（ドロワー 4パターン）
C	AI先生ありがたすぎる😁 　ドロワーの設定（表示開始位置、オーバーレイ、仕様を変えて下層ページへの反映）　mvのレスポンシブ全部、助けてもらった😄 height:100vh でビューポートの高さいっぱいに画像表示できるの知らなかった😳 とにかくこれでWordPress化へ突入！あと30日、出張など入れたら28日、ちょうど4週間なんとか1ヶ月近くWordPress化の時間を確保できた、頑張る🔥
A	DAY31 〜 44 卒業制作課題完了！

bakushin

スニペット登録したドロワーの動画です（4パターン）😄

パターン ①

パターン ②

パターン ③

パターン ④

bakushin

hoverしたらテキストと背景色が入れ替わるスタイル

hoverしたら border:1px の枠線つくので、hover時は padding を -2px に設定

👉️ブラウザでカクカク動く、どうやらカクカク動くけど同じ位置に戻ってる

border 1px をブラウザ表示するときに視覚的に動くけど、ボタンの位置は結局わかってない🤔

padding: -2px は正解だけど視覚的に✕ 👉️ なのでhoverする前にもborder:1px 背景と同色設定で完了！（AIに教えてもらった😅）

【Web制作コース 337日目】卒業制作 40日目

作業：3.5時間

作業内容

P	上級編を進めるだけ進める
D	DAY31 〜 44 卒業制作課題　スニペット登録（hoverで半透明）　復習（scaleでoverflow: hidden 有効化には imgの親要素にdivが必要）
C	LocalでWordPress化を開始！2回目の操作なので流れを上級編の動画で再確認 WordPressのダウンロードに 10-15分（こんなにかかった❓️🤔） LocalにWordPress インストールからの手順をメモで書き起こしながら進めた今日はで src , srcset の書き換えを完了！
A	WordPress化完了！