ゆういち@webコーダー

大阪在住｜不動産業界会社員→フリーランスWEBコーダー｜HTML/CSS/JavaScript/WordPressを用いたHP・LP制作をしています。

[ゆういち@webコーダー @yuichi1708]

ポートフォリオサイト新しくしました。
Web制作のコーディング（HTML / CSS / WordPress）を中心に、ご相談・ご依頼を受け付けています。
ご興味がありましたら、ご覧ください。
https://t.co/yMIALRhgwP

[ゆういち@webコーダー @yuichi1708]

display:grid; を使ったレイアウトで子要素が予想外にはみ出す現象に遭遇しました。

原因：グリッドトラックのデフォルト最小値は auto（= コンテンツの min-content サイズ） → コンテンツが大きいとグリッドが膨らんでしまう

解決策は子要素の最小値を0にすること💡

// 親要素で指定
.parent {
　grid-template-columns: repeat(3, minmax(0, 1fr));
}

// または子要素で指定
.child {
min-width: 0;
}
グリッドレイアウトの落とし穴、覚えておきたい。
#web制作 #デイトラ

[ゆういち@webコーダー @yuichi1708]

@VTmfM7tGJBfgcB6 はじめまして。
Webコーダーとして活動しております、ゆういちと申します。
募集の投稿を拝見し、ご連絡させていただきました。
コーディングでお役に立てればと思っております。
DMにて詳細のやり取りをさせていただけますと幸いです。 よろしくお願いいたします。

[ゆういち@webコーダー @yuichi1708]

AI生成コードの修正案件を対応していたら、他のコーダーさんのコードにCSS変数（カスタムプロパティ）が綺麗に使われていて「これいいな！」と思ったので自分のコーディングにも取り入れました。

色・フォント・サイズを変数で一元管理することで、修正が1箇所で済むようになりました。

案件対応しながら現場の書き方を学べるのは、最高の学習だと思いました。
#web制作 #コーディング

[ゆういち@webコーダー @yuichi1708]

案件の相談いただきました。
残念ながら受注に至りませんでしたが、アニメーションの引き出しが増え、いい勉強になりました。
添付の映像は今回試作したファーストビュー用のアニメーションです。
#Web制作

[ゆういち@webコーダー @yuichi1708]

■ デイトラ実務編 DAY49（ブライダルプランナーLP）
ドロワーメニューを実装しました。

今回はキーボードアクセシビリティを意識して実装：
・メニューを開いた時、最初のフォーカスを閉じるボタンへ
・Tabキーでフォーカスがメニュー外に抜けないフォーカストラップ
・Escキーでメニューを閉じる

マウスを使えないユーザー、キーボードメインで操作するユーザーに配慮しました。
動画でフォーカストラップの動きが確認できます。

#デイトラ #Web制作

[ゆういち@webコーダー @yuichi1708]

■デイトラ実務編DAY49（ブライダルプランナーLP）
ドロワーのメニューをAIにコーディングをお願いしてみました。

スマホ ✅
PC ✅
タブレット ❌（とんでもなく崩壊）

次は
・ブレークポイントを明示
・余白の取り方等を具体的に伝える
という使い方を試してみようと思います。
#デイトラ #web制作

[ゆういち@webコーダー @yuichi1708]

最近の案件でお問合せフォームの確認画面の実装があったので、自分のサイトにも実装しました。
JavaScriptで実装しております。
#web制作

[ゆういち@webコーダー @yuichi1708]

■デイトラ実務編DAY48（家具・家電販売風LP）完了
今回は以下の点に気をつけて制作しました。
・一部AIにコーディングを任せてみる。
・ブラウザで文字を大きくする設定をした際に、レイアウトが大きく破綻しない
添付動画はブラウザの設定で文字の大きさを最大にした時の映像です。
#デイトラ #web制作

[ゆういち@webコーダー @yuichi1708]

今回のお題 「円の拡大縮小で画面を覆う画面遷移」
・内部リンクの場合のみ有効
・アニメーションの最中は操作を無効
・ページ遷移時にちらつきが起きないように工夫
・GPU処理になるようにclip-path での実装
上記を意識して制作しました。
#デイトラ #ウィークリーコーディング

[ゆういち@webコーダー @yuichi1708]

今週のお題
「ホバー時に背景が連続したメニューを作ってみよう」
Anchor Positioning初めて使いましたが、サイズも位置もアンカー要素を基準に決められるので、とても便利でした。
#デイトラ #ウィークリーコーディング

[ゆういち@webコーダー @yuichi1708]

今週のお題 「メガメニューを段階的に表示しよう」
CSSで実装しています。
transitionでhover時にコンテンツが浮き出るタイミングに差をつけています。
メガメニュー内のコンテンツは当初display:flex;で作成していましたが、display:grid;の方が安定しました。
#デイトラ #ウィークリーコーディング

[ゆういち@webコーダー @yuichi1708]

今週のお題 「フッターがめくれて登場」
CSSで実装しています。
フッター分の余白は変数にして、JavaScriptで設定するようにしました。
スマホ幅だとフッターの上部が見切れてしまったのでPC幅のみの演出にしております。
#デイトラ #ウィークリーコーディング

[ゆういち@webコーダー @yuichi1708]

今週のお題 「文字の一部を拡大してそのまま背景にしよう」
CSSのアニメーションで実装できました。
タイミングを合わせるのが大変でした。
scaleの値をかなり大きくしたので処理が重たくないか気になります。
#デイトラ #ウィークリーコーディング

[ゆういち@webコーダー @yuichi1708]

今週のお題
「写真にグリッチ効果をかけてみよう」
CSSで実装できました。
translateのxとyで振動を加えて、skewで歪みを加えました。
過度にやりすぎると気分が悪くなってしまうので、いい感じに調整するのは難しいですね。
#デイトラ #ウィークリーコーディング

[ゆういち@webコーダー @yuichi1708]

先週のお題
「3Dに写真を並べて回転させよう」
CSSとJavaScriptで実装できました。
ほとんどの部分をChatGPTに聴きつつ作りましたが、リサイズ時に再計算されたり、カードの数に関わらず、動くように作れました。
ようやく仕組みが腹落ちするようになりました。
#デイトラ #ウィークリーコーディング

[ゆういち@webコーダー @yuichi1708]

・最近の取り組み ：ポートフォリオサイトのWordPress化
・本日の学び：プラグイン"Category Order and Taxonomy Terms Order"は、とても便利
デイトラのカリキュラムを見直していると上記プラグインが記載されていました。
とても簡単にタクソノミーの並び替えができました。
今まで表示順を並び替えるコード、管理画面に並び順のカラムを付け加えるコードを記述しておりましたが、これらから解放されるとなると、とても有意義な学びになりました。
#デイトラ #Web制作

[ゆういち@webコーダー @yuichi1708]

今週のお題
「スクロールに追従するナビゲーションを表現しよう」
対象が画面に入ったら、それに応じたメニューにクラスを付与。
付与したクラスにスタイルを充てることで、実装できました。
scroll-behavior: smoothを記述するだけでスムーススクロールになるのでとても便利でした。
サイトが見やすくなりました。
#デイトラ #ウィークリーコーディング

[ゆういち@webコーダー @yuichi1708]

今週のお題 「ホバー時に追従する画像を表示しよう」
対象にホバーしたら、それに応じたクラスを付与。
付与したクラスにbackground-imageでそれぞれ画像を充てる。
こんな感じで実装できました。
#デイトラ #ウィークリーコーディング

[ゆういち@webコーダー @yuichi1708]

・最近の取り組み ：ポートフォリオサイトの作り直し・WordPress化
・本日の学び：ボタン等の幅の指定について
width: 200px;
max-width: 100%;
以前まで書籍等を参考にして上記のように指定していましたが、親要素にdisplay:grid;を指定することも多い現在では、以下のように記述する方がレイアウト崩壊が起こりにくいことがわかりました。
width: 100%;
max-width: 200px;
#web制作