鹿野壮 Takeshi Kano's banner

鹿野壮 Takeshi Kano

@tonkotsuboy_com • 20,091 subscribers

Staff Product Engineer @ubie_ai / 『TypeScriptコードレシピ集』『JavaScriptコードレシピ集』著者 / 九州大学芸術工学部音響設計学科卒 / CSSNite ベストセッション / 登壇・執筆・技術相談はDMへ / https://t.co/VqY9naBpoy

Shorts

毎年クリスマスには、いいお肉を買ってきてローストビーフをデプロイしている。今年は日本橋今半でモモブロックを買い、塩・胡椒・すりおろしにんにくを刷り込み一晩寝かし、65度で1:45低温調理した。柔らかく、美味しすぎて口から日本橋が出そうだった。ソースはGitHubです。 #カノメシ

毎年クリスマスには、いいお肉を買ってきてローストビーフをデプロイしている。今年は日本橋今半でモモブロックを買い、塩・胡椒・すりおろしにんにくを刷り込み一晩寝かし、65度で1:45低温調理した。柔らかく、美味しすぎて口から日本橋が出そうだった。ソースはGitHubです。 #カノメシ

912,405 просмотров

:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。参考: #CSS #cssnite #朝までマークアップ

:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。参考: #CSS #cssnite #朝までマークアップ

33,703 просмотров

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった😱 1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など 2. Applyを押す 3. コードがそのまま実現💐 「Figmaで描いた絵を再現する」時代から「Figmaである程度デザインを作って、Cursor上で最終成果物を直接いじってAIにコードを書かせる」時代になった。なお、ビジュアルエディターのUIはどうみてもFigmaです。ありがとうございます #Figma #Cursor

CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった😱 1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など 2. Applyを押す 3. コードがそのまま実現💐 「Figmaで描いた絵を再現する」時代から「Figmaである程度デザインを作って、Cursor上で最終成果物を直接いじってAIにコードを書かせる」時代になった。なお、ビジュアルエディターのUIはどうみてもFigmaです。ありがとうございます #Figma #Cursor

鹿野壮 Takeshi Kano

198,555 просмотров • 9 месяцев назад

フロントエンドエンジニアの私、最高のAIデザイナー「Pencil」君を雇った💐 Claude Code経由で「ブログのデザイン作って」と言ってデザインファイルを作らせてみた。Claude Codeが動いてるのが神だし、デザインファイルが残るのが神。 Claude CodeからMCP経由で色んな対話をしながらデザインファイルを作った。 - サムネ追加して - 詳細ページもついでに作って - やっぱり白ベースにして - やっぱり黄色ベースにして今まで何回かこの手のAIエージェントにデザインを作ってもらったけど、（私の使い方が下手なので）一度にドンと完成品を渡され、微調整できず、調整履歴も残らず、何回も泣いた。 Pencilのおかげで ✅ .penファイルでGit管理できる ✅ 対話しながら少しずつ組み上げ可能 ✅ 作ったファイルも後から編集OK ✅ 自前のデザインキット持ち込みOK ✅ Figmaファイルをimportできるそしてもちろん、作ったファイルはそのままClaude Codeから好きなコードに変換してくれる😻 今回はNext.jsで書き出してもらった。エンジニアが一人でUI作るときの救世主すぎる。生きててよかった。みんな使おう！

フロントエンドエンジニアの私、最高のAIデザイナー「Pencil」君を雇った💐 Claude Code経由で「ブログのデザイン作って」と言ってデザインファイルを作らせてみた。Claude Codeが動いてるのが神だし、デザインファイルが残るのが神。 Claude CodeからMCP経由で色んな対話をしながらデザインファイルを作った。 - サムネ追加して - 詳細ページもついでに作って - やっぱり白ベースにして - やっぱり黄色ベースにして今まで何回かこの手のAIエージェントにデザインを作ってもらったけど、（私の使い方が下手なので）一度にドンと完成品を渡され、微調整できず、調整履歴も残らず、何回も泣いた。 Pencilのおかげで ✅ .penファイルでGit管理できる ✅ 対話しながら少しずつ組み上げ可能 ✅ 作ったファイルも後から編集OK ✅ 自前のデザインキット持ち込みOK ✅ Figmaファイルをimportできるそしてもちろん、作ったファイルはそのままClaude Codeから好きなコードに変換してくれる😻 今回はNext.jsで書き出してもらった。エンジニアが一人でUI作るときの救世主すぎる。生きててよかった。みんな使おう！

鹿野壮 Takeshi Kano

60,347 просмотров • 7 месяцев назад

「Kanary」が良すぎる🐲 ありがとう、 Kenn Ejima さん

「Kanary」が良すぎる🐲 ありがとう、 Kenn Ejima さん

鹿野壮 Takeshi Kano

29,739 просмотров • 3 месяцев назад

今日リリースされたCursor 2.0のマルチエージェント、私が本当に求めていたものだ。超わかりやすいUI。これだよこれ感がすごい。

今日リリースされたCursor 2.0のマルチエージェント、私が本当に求めていたものだ。超わかりやすいUI。これだよこれ感がすごい。

鹿野壮 Takeshi Kano

41,734 просмотров • 10 месяцев назад

CSSの「cqw」単位がアツい💐 コンテナクエリのコンテナ幅を基準とした横幅です。「font-size: 20cqw」と指定すれば、コンテナに対して必ず全角5文字になるフォントサイズを指定できます🥰 中心のテキストが親に対して必ず5文字サイズになるメインビジュアルデモを作った。イマドキCSS2024は12/6（金）開催！ #イマドキCSS

CSSの「cqw」単位がアツい💐 コンテナクエリのコンテナ幅を基準とした横幅です。「font-size: 20cqw」と指定すれば、コンテナに対して必ず全角5文字になるフォントサイズを指定できます🥰 中心のテキストが親に対して必ず5文字サイズになるメインビジュアルデモを作った。イマドキCSS2024は12/6（金）開催！ #イマドキCSS

鹿野壮 Takeshi Kano

69,198 просмотров • 1 год назад

先日のCSS Niteで好評だったキラキラ✨カードアニメーションの作り方とコードを公開します。 1. conic-gradientでグラデーション 2. propertyでグラデーションの開始角度をアニメーション 3. background-clipとbackground-originでborder部分だけグラデーション 4. 完成デザインは Eri Matsushita 松下絵梨が作ってくださいました。 #イマドキCSS

先日のCSS Niteで好評だったキラキラ✨カードアニメーションの作り方とコードを公開します。 1. conic-gradientでグラデーション 2. propertyでグラデーションの開始角度をアニメーション 3. background-clipとbackground-originでborder部分だけグラデーション 4. 完成デザインは Eri Matsushita 松下絵梨が作ってくださいました。 #イマドキCSS

鹿野壮 Takeshi Kano

38,401 просмотров • 1 год назад

Больше нет контента для загрузки