textareaをCSSで自動伸縮。field-sizingの使い方と伸びない条件を実装比較
文章を増やすと伸びて、消すと小さくなる入力欄を作りました。自動伸縮を担当するのは、CSSの field-sizing: content です。 同じ4行を入れると、標準の入力欄は高…
Read more→New space / UI Lab
見るだけじゃ、
もったいない。
ネオン、ゲーム風、ちょっと意外な動き。
触って遊べる実験作品と、Webで使えるUI素材をここに。
01 — Latest logs
最近、こんなこと。
- 01
WebGPUで「さわれる文字」を作る。6,000個の粒子をGPUで動かす実装ノート
文字にカーソルを近づけると粒子がほどけ、離すと元に戻る。ボタンを押すと、同じ6,000個の粒子が銀河やハートに集まります…
- 02
回復薬か、ランタンか。HTMLとCSSでゲーム風の選択UIを作ってみた
回復薬、ランタン、古い鍵。ひとつだけ持っていくなら、どれにしますか。 今回は小さな選択部品を作りました。名前は Pock…
- 03
ボタンを光らせたら、周りが電力不足になった。CSSとJSで蓄電するUIを作ってみた
光るボタンは好き。でも、ボタンも背景もカードも全部光っていると、どこを見ればいいのか分からなくなる。 そこで「ボタンを明…
- 04
ChatGPT Astraで3Dゲーム制作｜LAST SIGNALの実装・プロンプト
ChatGPT Astraで、ブラウザから遊べる3Dバトルロイヤル「LAST SIGNAL」を作ってみました。プレイヤー…
- 05
microCMSのリッチエディタはiframeを消す。CodePen埋め込みをNext.js側で復元する
CodePenの埋め込みコードをmicroCMSのリッチエディタに入れて保存し、公開した。でも記事には何も出てこない。 …
02 — Fields
今日は、どこから？
03 — Follow
SNSでも、つながる。
README.md
つくる毎日に、
ちょっとした発見を。
便利だったこと、つまずいたこと、思いがけず面白かったこと。
Yabi Labs は、技術とアイデアをめぐる個人の記録です。