正在加载视频...

视频加载失败

返回首页

JS無し！ HTMLとCSSのみでカルーセルUIを作れます。 Chrome・Edge 135（2025年4月）で追加された ::scroll-button()、::scroll-marker疑似要素がポイント。 スクリーンリーダーやキーボード操作にも対応。 デモ by naomi

clockmaker's profile picture

池田 泰延

31,452 subscribers

78,006 次观看 • 1 年前 •via X (Twitter)

科学技术教育
LIVE

Anya Rossi• Live Now

Private livecam show

4 条评论

池田 泰延 的头像
池田 泰延1 年前

ICS MEDIAで記事が公開されたのでご覧下さいませ。 JavaScript不要! HTMLとCSSでつくるカルーセルUI - ICS MEDIA 担当：@naomai___

池田 泰延 的头像
池田 泰延1 年前

新しいCSSは今のところChrome・Edgeのみです。 SafariやFirefox向けにもカルーセルを使いたい方は次の記事を参考に。 カルーセルUIを実現するJSライブラリまとめ アクセシビリティーに対応したJSライブラリ「Splide」も紹介しています。

Safari Web Extensions 的头像
Safari Web Extensions1 年前

Discover the top Safari web extensions to boost productivity, enhance workflow, and customize your browsing experience on Mac, iOS, and iPadOS.

dewmap 的头像
dewmap1 年前

@naomai___ Great job I used it on my site thanks 🫡😉

相关视频

来月リリースのChrome 135でサポートされる`::scroll-marker`、`::scroll-marker-group`、`::scroll-button()`疑似要素。 動画のようなスライダーが「CSSのみ」で作成可能となる😱 それでいて記述量もそこまで多くない。 #Web制作
0:26

来月リリースのChrome 135でサポートされる`::scroll-marker`、`::scroll-marker-group`、`::scroll-button()`疑似要素。 動画のようなスライダーが「CSSのみ」で作成可能となる😱 それでいて記述量もそこまで多くない。 #Web制作

TAK

32,695 次观看 • 1 年前

CSSだけでスクロール連動アニメーションを作れる Scroll-driven Animations のジェネレーターを作りました。 設定を変えると、プレビューとCSSが一緒に変わります。 現在開いているブラウザが対応しているかもでます！ #CSS
0:51

CSSだけでスクロール連動アニメーションを作れる Scroll-driven Animations のジェネレーターを作りました。 設定を変えると、プレビューとCSSが一緒に変わります。 現在開いているブラウザが対応しているかもでます！ #CSS

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

60,029 次观看 • 2 个月前

ローグライト3Dアクションゲーム『リングスガード』を開発中です #スーパーゲ制デー #indiedev フルコントローラーサポートに対応し、 コントローラーのみで全ての操作が行えるようになりました スキルツリーでは操作がしやすいように キーボード/マウスとコントローラーでは少し挙動が異なっています また、キーボード/マウスとコントローラー操作は いつでも切り替えることができます
0:36

ローグライト3Dアクションゲーム『リングスガード』を開発中です #スーパーゲ制デー #indiedev フルコントローラーサポートに対応し、 コントローラーのみで全ての操作が行えるようになりました スキルツリーでは操作がしやすいように キーボード/マウスとコントローラーでは少し挙動が異なっています また、キーボード/マウスとコントローラー操作は いつでも切り替えることができます

Tomat

231,391 次观看 • 1 个月前

HTML・CSSで作るメニューUI。 ヒットエリアを▷に拡張することで、マウス操作での使い勝手が良くなります。
0:39

HTML・CSSで作るメニューUI。 ヒットエリアを▷に拡張することで、マウス操作での使い勝手が良くなります。

池田 泰延

79,843 次观看 • 1 个月前

AIが「自律的に」ワールドやアイテムを制作するツール『resoloop』を公開しました🤩🎉🎊 ・ワールドもギミックもUIも、なんでも作れる ・Resonite特有のコンポーネント知識を理解した設計に対応 ・MOD不要 作りたいものを口にするだけで次々とワールドが作られていく体験、試してみて🥳
0:44

AIが「自律的に」ワールドやアイテムを制作するツール『resoloop』を公開しました🤩🎉🎊 ・ワールドもギミックもUIも、なんでも作れる ・Resonite特有のコンポーネント知識を理解した設計に対応 ・MOD不要 作りたいものを口にするだけで次々とワールドが作られていく体験、試してみて🥳

オレンジ🍊

122,492 次观看 • 11 天前

HTMLとCSSのみで作る、羽ばたく蝶々。 JS未使用ですが、立体的に動きます。
0:30

HTMLとCSSのみで作る、羽ばたく蝶々。 JS未使用ですが、立体的に動きます。

池田 泰延

112,756 次观看 • 1 年前

「3D操作時のアングルによっては隠れちゃう部位を操作したい。でも、カメラアングルも変えたくない！」の対応方法 ① カメラアングルを複製して、元のアングルを保存すればOK！ 操作しやすいカメラアングルに設定しても、カメラアングルを選択すれば元に戻ります これはProもEXでも対応可です
0:39

「3D操作時のアングルによっては隠れちゃう部位を操作したい。でも、カメラアングルも変えたくない！」の対応方法 ① カメラアングルを複製して、元のアングルを保存すればOK！ 操作しやすいカメラアングルに設定しても、カメラアングルを選択すれば元に戻ります これはProもEXでも対応可です

へいたろう/平井太朗

279,330 次观看 • 23 天前

HTMLの新しいinterestfor属性が便利！ JavaScript無しで、ホバーUIを作れます。
0:23

HTMLの新しいinterestfor属性が便利！ JavaScript無しで、ホバーUIを作れます。

池田 泰延

294,212 次观看 • 8 个月前

「つまみ」を作れるテープカッターがすごくいい。作品や商品を梱包する時、テープの端を折って作る「つまみ」。指紋がついたり、手間取ることが多かったけど、これだと手のひらサイズで手軽＆素早く「つまみテープ」が作れる！マステにも対応してるのが◎。思いやりから生まれたような素敵文具でした
0:25

「つまみ」を作れるテープカッターがすごくいい。作品や商品を梱包する時、テープの端を折って作る「つまみ」。指紋がついたり、手間取ることが多かったけど、これだと手のひらサイズで手軽＆素早く「つまみテープ」が作れる！マステにも対応してるのが◎。思いやりから生まれたような素敵文具でした

TAKUYA YONEZAWA ｜ 画家

242,798 次观看 • 4 个月前

キャッチアップしたい2026年のCSSをまとめました。 JavaScruot無しで作れる機能がふえ、コード量が減り、モーションを作りやすくなっているのが特徴です。
1:28

キャッチアップしたい2026年のCSSをまとめました。 JavaScruot無しで作れる機能がふえ、コード量が減り、モーションを作りやすくなっているのが特徴です。

池田 泰延

28,326 次观看 • 4 个月前

HTML in Canvas でクリック時に歪みをつけた例。 キーボード操作も反映できて、CSS Transition のアップデートも検知できる いにしえの CSS Shader より自由がききそう 世の中の Web がみんな <canvas layoutsubtree="true"> で括られる日がくるかもしれない
0:45

HTML in Canvas でクリック時に歪みをつけた例。 キーボード操作も反映できて、CSS Transition のアップデートも検知できる いにしえの CSS Shader より自由がききそう 世の中の Web がみんな <canvas layoutsubtree="true"> で括られる日がくるかもしれない

Akihiro Oyamada

10,174 次观看 • 5 个月前

Claude Code 2.0.72 から Chromeが操作できるようになりました。 /chrome コマンドでStatusとExtensionが有効になっていることを確認した上で、ブラウザ操作をお願いすると、MCPツール(mcp__claude-in-chrome__) を使用してブラウザを操作してくれます。 claude --chrome でも有効にできます。
0:58

Claude Code 2.0.72 から Chromeが操作できるようになりました。 /chrome コマンドでStatusとExtensionが有効になっていることを確認した上で、ブラウザ操作をお願いすると、MCPツール(mcp__claude-in-chrome__) を使用してブラウザを操作してくれます。 claude --chrome でも有効にできます。

Oikon | Claude Code深掘りガイド

122,882 次观看 • 9 个月前

1985年8月9日はFC「アストロロボSASA」が発売された日です ショットとは反対方向に移動+慣性が操作を難解にしてますがこれはもう慣れるしかないですね
3:46

1985年8月9日はFC「アストロロボSASA」が発売された日です ショットとは反対方向に移動+慣性が操作を難解にしてますがこれはもう慣れるしかないですね

bee71🕹

12,691 次观看 • 1 个月前