シン｜Village Web Forest

Village Web Forestという屋号で個人Webデザイナー・制作プランナーとして活動しています | 制作を通じて学んだ事や日常から得た気づきをゆるくツイート | RunとBBQ と写真が好き | Shibajuku11期生 | wpFUNNY |

[長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro @hiro_ghap1]

全世界1億人の #GSAP erの皆さま、お待たせしました！
お待たせしすぎたかもしれません！

ScrollTriggerを、プレビューを見ながら設定できるジェネレーターです。

Reveal/Scrub/Pin/Horizontal/Parallax/Maskのプリセットから、スクロール位置・追従・固定・Snapを調整。

コードはコピペでOK！↓

[たにぐち まこと／ちゃんとWeb withAI @seltzer]

WordPressのAll-in-One Migration、バックアップ機能は便利な半面、一個罠があるのが、バックアップを取ってコアをバージョンアップしたらテーマに不具合があったからバックアップから戻そうと思っても、コアのバージョンは戻らないんですね。

ファイルとしてもバックアップを取っておいて、コアのバージョンも戻せるようにしないと結構リスク。＜はまった

[シン｜Village Web Forest @SHIN__Webforest]

@hilosiva シバタさんすごいの作って下さってありがとうございます✨個人的にポモドーロありがたいです！全てはWeb制作のために🔥もっと頑張りますー✨👍

[シン｜Village Web Forest @SHIN__Webforest]

新しくなったShibajukuのバーチャルスペース！ポモドーロでめっちゃ集中できるぞ！

[シバタヒロノリ | Webクリエイター @hilosiva]

昨夜は #Shibajuku Home内のバーチャルスペースをサロンメンバーのみなさんにお披露目してました〜。

近くの人とおしゃべりしたり、みんなでチャット（読み上げ機能付き）したり、一緒に録画授業見たり、記事を読んだり、波動拳打ったりできます〜！

楽しく勉強できる機能をどんどん入れていきます💪

[せきゆおう🇯🇵Web制作とAIのことを発信する人 @wurst_design]

UIパーツが集まる海外のサイト「Uiverse」

アニメーションもサイトで確認できるし、スタイルの編集もその場でできる。

パーツのCSSも見れるので、コーダーさんに「この動きで」と共有できるから実装どうするねん問題の心配もない！

さらにFigmaにパーツをコピペできるのも嬉しい☺️

[YAT@Rish inc. @yat8823jp]

Gemini の Google Workspace 連携がメチャクチャ便利で、これを設定しておけば
「○○から届いている領収書を1年分まとめて」とか指示できる

[Webクリエイター ボックス @webcreatorbox]

自分もこれでした→ AntigravityのGemini3.1Proが使えなくなった？？？ https://t.co/DlUP0bNqJS

[たにぐち まこと／ちゃんとWeb withAI @seltzer]

CSS本！

ステップ・バイ・ステップ形式で

・レイアウト
・UIパーツ
・グラフィック
・アニメーション

を学ぶことができるのだそう。良さげ。
https://t.co/H7MMQlcN1s

[シン｜Village Web Forest @SHIN__Webforest]

うーん、Markuplintが @media (width >=768px) な書き方でエラー出すようになってる。昨日まではエラー出てなかったのに！赤い波線出るとめっちゃ気になる！！

[シン｜Village Web Forest @SHIN__Webforest]

@so_ainsight ロードマップ

[CeeBeeDee（CSS Nite/DTP Transit） @ceebeedee_jp]

Web制作（コーディング）の現場で、いまでは前提が変わりつつある考え方や手法について、長谷川喜洋さん、相原典佳さんに解説いただきます。

出演：
・長谷川 喜洋 @hiro_ghap1
・相原 典佳 @noir44_aihara

今回、取り上げる内容（予定）

・html { font-size: 62.5%; } は、いま積極的に採用すべき手法ではない（見直し対象）
・target="_blank" に対して「常に rel="noopener" が必須」という理解は誤り（前提と条件を整理）
・address は「住所を書くためのタグ」ではない（役割の誤解を解く）
・ファビコンは .ico 固定でなくてOK（現行の定番に合わせる）
・type="text/javascript" は不要（いまの書き方に統一）
・dvh はスマホ環境でレイアウトシフトの原因になり得る（使いどころに注意）
・outline: none; はしない（アクセシビリティの観点で整理）
・詳細度の「は1000点、. は10点、タグは1点」みたいな覚え方は誤解を招く（正しい理解に更新）
・変数宣言で var は使わない（let / const を前提に整理）

2026年2月27日（金）21:00 - 23:00 オンライン開催
#デジタルお焚き上げ 2026 Web制作（コーディング）の常識をアップデート
https://t.co/Az6mPgHQdk

[けんすう @kensuu]

Macでトラックパッドを使っている人におすすめなんですが、

システム設定 → アクセシビリティ → ポインタコントロール → トラックパッドオプション
→「ドラッグ方法：3本指」

という設定があります。これをオンにしておくと

・クリックせずにウィンドウ移動やテキスト選択

というのが可能になります。

そうすると、指の力が要らず、長時間作業で疲れにくくなります。

これ結構違ってくる上に、トラックパッドという項目にはない設定なので、見落としがちなんですが、オススメです！

[シン｜Village Web Forest @SHIN__Webforest]

@hiro_ghap1 わー！わざわざ教えて下さりありがとうございます✨いまVSXから.vsixをダウンロードし Cursorに読ませて『Update Image Size for Source and Img Tags』をインストールしましたー✨ありがたく使わせて頂きます🙇🙇🙇

[シン｜Village Web Forest @SHIN__Webforest]

わー！すごい！早速vscode入れました！これCursorでは使えないのかな？Cursor側で検索しても出てこない。最近Cursorを使い始めたのでCursorでもこういう便利な拡張機能が充実してほしい！とはいえ自分では作れないので感謝して使わせて頂きます✨

[長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro @hiro_ghap1]

VS Codeでimgにwidthとheightを設定するの、面倒じゃないですか…？
Emmetもsourceタグには対応していないし…

ということで、img,sourceタグ両対応のwidth/height設定拡張機能を作りました！
タグ上でショートカットキーを押すだけ！
loading="lazy"にも対応してます。

https://t.co/ES7hU21DuQ

[シン｜Village Web Forest @SHIN__Webforest]

@hiro_ghap1 わわ！返信のリプライまで下さりありがとうございます🙇とてもとてもありがたく使わせて頂きます🙇次回のリリース楽しみにしております🙇

[シン｜Village Web Forest @SHIN__Webforest]

前回の講座も購入してめっちゃわかりやすかったので復習用にリニューアル版もゲット！年末年始の休みは少し短めだけど時間見つけてゴリゴリ復習していきます！もっと安定感を持ってWPこなせるように頑張ろう！

[よしお👨‍🏫Udemy講師 @yesmyoshi]

🎉 新作Udemyをリリースしました（５日間限定の最安クーポン）

【2025年最新版】挫折しない、はじめてのWordPress自作テーマ講座

過去に同じ講座を出しましたが、それの完全リニューアル版です！
ところどころ改善したり、題材サイトも新しく用意したので復習にも良いかと！

👇５日間限定クーポン
https://t.co/RyrZJBM9Em

[シン｜Village Web Forest @SHIN__Webforest]

自分もimgにはクラス付けない派だな〜

[セカヤサ@AI×Web制作💻小林 秀樹 @hideki_climax]

【「電話番号 バリデーション」検索1位🥇】

HTMLにおける電話番号のバリデーション（ユーザーに正しく入力させるための検証機能）について徹底的にまとめた記事、かなり読まれてます。

ここを知らないと実務で使えないフォームになってしまうのでぜひ読んでみてください。
https://t.co/rcAvI5vvBJ

[セカヤサ@AI×Web制作💻小林 秀樹 @hideki_climax]

【レスポンシブにおける最強のテクニック】

今でも特にLP制作の時によく使うんですが、

✅ ブレイクポイントを1つも増やさずに
✅ 完全に画面幅に合わせる

方法があります。

CSSのclamp関数を使うんですが、記事で詳しく紹介しています。
https://t.co/RNTYGsp4Q8