Sabitlenmiş Tweet
#デイトラ #Web制作コース #実案件チャレンジ
課題と期限は自分にはハードなものでしたが合格することが出来ました😆
関係者の皆様、大変貴重な経験をさせていただき有難うございました🙇♀️
お忙しい中採点・講評をしてくださった、はにわまんさん、誠に有難うございました🙇♀️
今後も精進致します🔥
日本語
うるみく | わんこをこよなく愛するWEBコーダー🐶
165 posts
うるみく | わんこをこよなく愛するWEBコーダー🐶
@UruMiku
HP・LP・WordPress 制作/コーディング代行｜デイトラ 第4回実案件チャレンジ合格｜プログラマー3年→OA事務10年→デイトラWeb制作コース卒業｜第二種情報処理技術者｜お仕事のご相談は✉[email protected]へ
神奈川県 ポートフォリオサイトはこちら→ Katılım Mart 2025
64 Takip Edilen72 Takipçiler
#ウィークリーコーディング
「スクロールに合わせてSVGのグラデーション線が伸びていく表現」
絶景めぐりということで、SVGのパスを道のイメージに寄せてみました。
はにわまん@haniwa008
今週の #デイトラ #ウィークリーコーディング お題は「スクロールに合わせてSVGのグラデーション線が伸びていく表現」 LPの導線演出、サービス紹介のタイムライン、実績紹介、ストーリー設計などでかなり使える実装。 こういった「体験に落とし込める実装ができる人」は現場でも重宝されます！ 📝実装のヒント ✅ SVGのpathの長さを取得する ✅ 長さ分の線をずらして非表示→スクロールに連動して描画する ✅ スクロール量と進行度はGSAP + ScrollTriggerなどを同期が可能 SVGを作るところがまず難しいかもしれませんが...。まずは直線で動きを確認してみるだけでも大丈夫です🙆♂️ 「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！ 👇 可能な方は、ぜひリプ欄に実装後のURLを貼って教えてください😊 来週、みんなの参考としていくつかピックアップ紹介させてもらえると嬉しいです！ ---------- 👨💻 ウィークリーコーディングとは？ 流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨ ✅ 毎週月曜にお題 & 前週の実装例を公開 ✅ デイトラ生以外も参加歓迎 ✅ 実装スキルやスニペット集のレベルUPに！ ぜひ挑戦してみてください！💪
日本語
WordPressサイトへのアニメーション追加のご依頼を納品しました。
クライアント様から
「とても丁寧に作業していただき、こちらの意図も汲み取って対応いただけた」
と嬉しいお言葉をいただきました✨
無事に納品できてほっとしています😌
これからも丁寧な対応を大切にしていきます！
#独サポ
日本語
#デイトラ #ウィークリーコーディング
お題「切り替わる速度がわかるインジケーター付きスライダー」
Splideで挑戦してみました。
はにわまん@haniwa008
今週の #デイトラ #ウィークリーコーディング お題は「切り替わる速度がわかるインジケーター付きスライダー」 自動再生の残り時間が「円の進捗」で見えるUIを足してみてください！ 制作会社のLPやブランドサイトでもよく見る表現で、 ライブラリをベースにUIをカスタマイズする実装力を見せやすいUIです。 📝実装のヒント（※Splideの場合） ✅ svgのcircleで円周の線を準備（dasharrayとdashoffset） ✅ Splideのautoplay:playingで進捗率を取得 ✅ 進捗率を円周に換算してsvgのdashoffsetを更新 ✅ Splideのmoveのタイミングでスライド番号を更新 「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！ 👇 可能な方は、ぜひリプ欄に実装後のURLを貼って教えてください😊 来週、みんなの参考としていくつかピックアップ紹介させてもらえると嬉しいです！ ---------- 👨💻 ウィークリーコーディングとは？ 流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨ ✅ 毎週月曜にお題 & 前週の実装例を公開 ✅ デイトラ生以外も参加歓迎 ✅ 実装スキルやスニペット集のレベルUPに！ ぜひ挑戦してみてください！💪
日本語
うるみく | わんこをこよなく愛するWEBコーダー🐶 retweetledi
＼日本一周しながら全国各地で間借りカレー／
始めます！
5年間の間借りカレー営業の経験を活かし
今度は日本全国でカレー屋営業します！
「うちの地元に美味しい食材あるよ！」
「ここで間借りできるよ！」
という情報があればぜひ教えてください！
あなたの街でスパイスカレー作らせてください🍛
日本語
今週の #デイトラ #ウィークリーコーディング
お題：「フッターがめくれて登場」
GSAPのscrollTriggerで実装。
footerをfixedにしてbottom:0にする。
フッターの高さ分、直前のセクションにmargin-bottomを追加。
フッターの高さはjsで動的に取得することで保守性UP⤴️
日本語
今週の #デイトラ #ウィークリーコーディング
お題：「文字の一部を拡大してそのまま背景にしよう」
GSAPのScrollTriggerで実装。
スクロール量の調整で試行錯誤しました⚖️
うちのワンコの座り方おかしいです🙄
日本語
うるみく | わんこをこよなく愛するWEBコーダー🐶 retweetledi
✅ 僕が運営するコミュニティ #wpFUNNY 【無料体験】のご案内
期間限定・１０名限定で募集します！
コミュニティにご興味がある方は、ぜひ以下をご確認いただけたら嬉しいです！🙌
wiggly-eel-550.notion.site/2fff2874df5780…
この機会にぜひどうぞ！
日本語
うるみく | わんこをこよなく愛するWEBコーダー🐶 retweetledi
✅ WordPressブロックテーマで肝となる「theme.json」を少し解説
theme.jsonは、パッと見だとごちゃっとして目をそむけたくなります。
今回は、超シンプルな内容で、かつ、見やすいようにいったん細かい中身を折り畳んで理解していきましょう。
少しはお友達になれるかなぁと！
こちらになります。
👇️
もちろん、上記以外にももっともっといろんなことが設定できます。
ぜんぶの中身を開くと僕も大変なので、ここでは、上の図の先頭にある「settings → layout」を開いてみましょう
👇️
こんな感じになってます。
自ら数値を指定しなければ、これが基準となりサイト全体で統一されます。
ブロックエディタ上では、「なし」とか「幅広」といった指定ができますが、ここでも上記で指定した幅が基準となるので、この幅が保たれますね。
👇️
layoutで指定した通り、
なし（contentSize）→1080px
幅広（wideSize）→1280px
となっています
まずは大枠の構成と、そんな感じの指定ができるんだね！って感じで抑えておくとよいかもです！🙌
参考になれば幸いです🙏
日本語
#デイトラ #ウィークリーコーディング
お題：「写真にグリッチ効果をかけてみよう」
・画像に擬似要素を追加し、元の画像を重ねて表示。
・clip-path プロパティと transform を使用したキーフレームアニメーションを定義し、画像が断片的にズレるノイズ表現を実装。
・mix-blend-mode: hard-light を使用して、重なった部分の色味が変わるように調整。
日本語
うるみく | わんこをこよなく愛するWEBコーダー🐶 retweetledi
👨🏫 「サーバー引っ越し・ドメイン移管」が怖くなくなる講座
✅ 無料開催！
✅ ZOOMオンライン・ライブ
🗓️ 2月5日（木）20:00〜22:00
※ちょっと時間オーバーするかもです🙏寛大な心で受けとめてください🙇
Web制作で意外と避けて通れないのが「サーバー移転やドメイン移管」です。
この作業に自信がない方や不安を持つ方は多い印象です。
たしかに、これをミスすると「メールが使えなくなった」「いっこうにサイトが切り替わらない」などのトラブルに陥ることも全然ありえます。
こうした失敗は、「そもそも仕組みの理解不足」から起きると思っています。
学べる情報はたくさんあるけど、独学ではなかなか理解するのが難しい分野かとも思います。
Udemyやコミュニティ内の講座で「わかりやすい」と多くの評判をもらって調子づき始めている僕が、初心者でもしっかり理解いただき、サイト引っ越しやドメイン移管を恐れず自信をもって実施できるような講座を行います！
この機会にぜひどうぞ！
🔻 無料講座のお申し込みはこちらから！
forms.gle/njw5MhaE4Ls6pH…
お申し込み〜参加までは以下の３ステップのみ。LINEの登録とかはないので、お気軽にどうぞ〜
--
①上記のGoogleフォームからお申し込み
②メールにZOOMリンクを送ります
③あとは当日にご参加ください
--
🙏 できたら、拡散してもらえたら泣いて喜び...いや、すみません！泣きはしません！が、めっちゃ嬉しいです！ぜひよろしくお願いします！🙏
日本語
今週の #デイトラ #ウィークリーコーディング
お題：「3Dに写真を並べて回転させよう」
ヒントとAIを頼りに実装してみました。
日本語
#デイトラ #ウィークリーコーディング
「スクロールに追従するナビゲーションを表現しよう」
『世界の絶景スポット』で実装してみました。
日本語
#デイトラ #ウィークリーコーディング
お題「ホバー時に追従する画像を表示しよう」
requestAnimationFrameを使わなくても実装できるけど、
requestAnimationFrameのタイミングで更新した方が滑らかで軽くなるらしいので
requestAnimationFrameを使って実装しました。
画像はうちのワンコです🐶
日本語
@shibamodayo しばもさん、コメントありがとうございます！
そして、同世代で学んでいる方からの言葉は、なおさら励みになります🥹
「明けない夜はない」という言葉、沁みますね...。
お互いのペースで、一歩ずつ積み重ねていきましょう。
これからも一緒に頑張っていけたら嬉しいです☺️
日本語
オンラインスクール「デイトラ」Web制作コースを無事に卒業しました。
毎日の積み重ねが形になって、ようやくスタートラインに立てた気がします。
課題制作では、HTML/CSS/JavaScriptを使ったサイト構築やFigmaデザインの再現、WordPressでのテーマ制作にも取り組んできました。
思うように進まない日もありましたが、そのたびに少しずつ理解が深まっていくのが嬉しくて、気づけばここまで来られました。
これからは、実績を積みながら、誰かに喜んでもらえるサイトを届けていきたいです。
#デイトラ #デイトラコミュニティ #独サポ
日本語
@hayakawa_design ハヤカワさん、ありがとうございます！
そしておめでとうございます！🎊
週次MTGの最中に独サポmanaメン5人のうち3人が同時に卒業発覚して、わぁって盛り上がりましたよね😆
とても良い思い出になりそうです✨
今後ともよろしくお願いいたします☺️
日本語
ブロックテーマのライブ講義に参加しました！
事前知識ゼロだったので学びが多かったです。
・htmlベースのテンプレートだということ。
・ヘッダー、フッター、サイドバーなどの領域もブロックエディタで編集するということ。
・theme.jsonでテーマのスタイルなどを管理するということ。
次回は実際にサイトを作っていくとのことなので、また楽しみにしています😄
よしお👨🏫Udemy講師@yesmyoshi
ブロックテーマ講座をやりました！ 今後も連載でやっていきますので、お楽しみに！🙌 ※最近コミュニティ内では、「ここまでOKですか？」ときくと「り」と返答を頂くのがはやっています（「了解」の略で「OK」を意味している、と思う）
日本語
#デイトラコミュニティ #独サポ
＼決意表明！／
2026年はネガティブ思考から卒業することを宣言します🔥
🐶コツコツ生活を整え、自己肯定感UP
🐶1月中にポートフォリオサイトを完成させる
🐶何事も自信を持って全力で取り組む
🐶人とのつながりに感謝しご縁を大切にする
🐶ウィークリーコーディングに取り組む
🐶4月までに0→1を達成させる
本年もよろしくお願いいたします🙇♀️
日本語
今日は #wpFUNNY のオフ会でした！
直接お会いするからこそガッツリ話ができて、めっちゃ楽しかったです🙌
コミュニティがあるのは当たり前じゃないんやな〜って改めて感じました。
自分にできることをやっていこう。
お会いできた皆様、ありがとうございました！
日本語