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

375px未満のデザイン維持（HTMLのviewportの設定）で参考になった記事です😊

【Web制作コース 263日目】
作業：9時間
中級編最終課題(87日目)
375px未満デザイン維持はHTMLのviewportで完了
メンターのjs指導👉解決糸口💡HTMLで解決
明日は家族と思い出作り遊園地👉作業確保不明
何ヶ月も休みなくデイトラ👉たまには⭕とした#デイトラ #WEB制作デイトラ #デイトラコミュニティ pic.twitter.com/WEjGorEavs

— バクシン@初心者親子でWeb制作をマスター (@bakushin_x) July 23, 2024

【HTML】viewport widthで横幅を固定する方法【解説】

こんな疑問にお答えします。 通常横幅を小さくしたとき、下記のようにレイアウトが変わりますよね。 ただ案件によってはスマホの時も、PC表示のレイアウトをそのまま反映したいときがあるはず。 こんな感じで↓ そんな時はmeta ...

jito-site.com

中級編の最終課題を通して思うことは、

• 最終課題の作成を始めたとき
• 最終課題を終える直前

両者を比べると、

• どこをどうやったら作れるのか、修正できるのかがけっこう意のままになってきたと実感できることが大きな違い
• すっごく実力があるわけじゃないけど、このレベルの課題は3ヶ月かかったけど作成できることがわかった（これは大きい果実🍎）
• おそらく次から同じようなサイトを作れと言われたらこの半分もあったらできそうな気がする（なので1ヶ月半くらい、、いや1ヶ月でもできそうな気はする）

いずれにしても、明日か遅くても明後日には最終課題を提出する❗

明日は、最終課題をBasic認証して公開👉レビュー依頼で提出する！

その後、スニペット登録など下記の復習も行う

• スムーススクロール・同時にドロワー非表示
• HTMLのviewport
• 大画面で背景画像を画面の左端に寄り切らさない・画像サイズを崩さないフッター下の余白をなくす

問題発生の原因はhtmlのコードミス（ルートパスが原因）

• 正解⭕　srcset=”img/PC/entry/entry-background-image.png”
• ミス❌　srcset=”/img/PC/entry/entry-background-image.png”

原因　imgの前に / をつけてたから👈検証ツールで削除してみたけど反応しなかったから原因じゃないと誤認してた

上級編DAY1〜DAY3では

• 文字列表示
• 計算
• 変数
• 関数（function）
• 条件式（if、else、elseif）
• 配列（Array）
• 連想配列

総論としてこれらを学んだけど、ちゃんと整理されている状態はやっていきながら

デイトラコミュニティのオンライン自習室を利用中、bento.meを使っているコミュニティメンバーがいらした！
すっごく魅力的に思えたので、営業面からもSEOからもオンライン名刺みたいな感じで作成したいな🤔

すっごく勉強になった、〇〇さん（デイトラコミュニティー入ってるのマル秘かもしれないので匿名表示）ありがとうございます！Xもフォロー！

中級編の最終課題のレビュー結果が届いた👉大変素晴らしい出来栄え🎉だと評価いただき安堵した！
一点だけ教えていただきたくレビュアーに質問
webp化した画像を本当は使用したかった👉中級編最終課題までに画像を圧縮する方法の説明はなかったかと思う
そのため、pngを主に使用して画像を使用した
WordPressなら EWWW Image Optimizer などプラグインでwebp化できる
WordPressを使用しない場合はwebp化するなど、画像圧縮する方法はどういった方法があるのか、ご指導いただきたい
こんな内容で質問

👇レビューの内容

PHPの復習画像です👇