Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

clockmaker's profile picture

池田 泰延

30,398 subscribers

76,897 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

4 Kommentare

Profilbild von 池田 泰延
池田 泰延vor 1 Jahr

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

Profilbild von 池田 泰延
池田 泰延vor 1 Jahr

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

Profilbild von Safari Web Extensions
Safari Web Extensionsvor 1 Jahr

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

Profilbild von dewmap
dewmapvor 1 Jahr

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

Ähnliche Videos

体験版では主にコントローラーを推奨していますが キーボードでの操作も対応しています。 カメラのズームは現状キーボードのみ対応です。 酒場前の樽に操作説明があります！ 確認してみてね！！ #VanySlash #体験版 #SteamNextFest
0:21

体験版では主にコントローラーを推奨していますが キーボードでの操作も対応しています。 カメラのズームは現状キーボードのみ対応です。 酒場前の樽に操作説明があります！ 確認してみてね！！ #VanySlash #体験版 #SteamNextFest

リョウ / Ryo117 / Atelier Delion

38,548 Aufrufe • vor 1 Jahr

形状変化で出現する今どきなメニューUI。 HTMLとCSSと、少しのJSで。 HTMLのpopover属性と、 CSSのアンカーポジショニングで作っています。
0:24

形状変化で出現する今どきなメニューUI。 HTMLとCSSと、少しのJSで。 HTMLのpopover属性と、 CSSのアンカーポジショニングで作っています。

池田 泰延

51,763 Aufrufe • vor 5 Monaten

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

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

池田 泰延

112,756 Aufrufe • vor 10 Monaten

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

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

池田 泰延

293,811 Aufrufe • vor 5 Monaten

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

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

TAKUYA YONEZAWA ｜ 画家

242,450 Aufrufe • vor 1 Monat

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

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

池田 泰延

27,831 Aufrufe • vor 1 Monat

ファミコンで人気を博したガチャポンシリーズのスーファミ版「スーパーガチャポンワールドSDガンダムX」。モビル―スーツや戦艦も追加され、更にやり応えがアップ。本作も友達との対戦が熱いですが、白熱しすぎて揉める事もありましたね＾＾；
1:33

ファミコンで人気を博したガチャポンシリーズのスーファミ版「スーパーガチャポンワールドSDガンダムX」。モビル―スーツや戦艦も追加され、更にやり応えがアップ。本作も友達との対戦が熱いですが、白熱しすぎて揉める事もありましたね＾＾；

レトロゲーマー・アジャキング

76,415 Aufrufe • vor 7 Monaten

「もちふぃった～」の対応に参加させていただいてますがこれはまごう事無き神ツールです！！ Precious School Uniformsを着せてみましたがワンボタンでこれです神です😭 ツールリリース後にはなるはやでスキミアを対応アプデしますのでお楽しみにー！！ #もちふぃった～ #Skimmia3D
0:26

「もちふぃった～」の対応に参加させていただいてますがこれはまごう事無き神ツールです！！ Precious School Uniformsを着せてみましたがワンボタンでこれです神です😭 ツールリリース後にはなるはやでスキミアを対応アプデしますのでお楽しみにー！！ #もちふぃった～ #Skimmia3D

Lat｜ラト

60,333 Aufrufe • vor 10 Monaten

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,107 Aufrufe • vor 3 Monaten

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

122,655 Aufrufe • vor 6 Monaten

Happy New Year 2026 !! 今年も年始のご挨拶コンテンツを作ったので、ぜひ遊んでみてください！ 今年はWebサイト制作以外にも、体験コンテンツなどの制作にももっと携われたらいいなと思っています！ それでは本年もよろしくお願いいたします！ ※カメラをONにすると、ハンドジェスチャで操作できるようになっています。詳しくはアクセス時に操作方法が表示されるので、試してみてください！ スマホではちょっとパフォーマンスが悪いかも… #webgl #webgpu #threejs #creativecoding
1:11

Happy New Year 2026 !! 今年も年始のご挨拶コンテンツを作ったので、ぜひ遊んでみてください！ 今年はWebサイト制作以外にも、体験コンテンツなどの制作にももっと携われたらいいなと思っています！ それでは本年もよろしくお願いいたします！ ※カメラをONにすると、ハンドジェスチャで操作できるようになっています。詳しくはアクセス時に操作方法が表示されるので、試してみてください！ スマホではちょっとパフォーマンスが悪いかも… #webgl #webgpu #threejs #creativecoding

Takumi HASEGAWA (unshift Inc.)

18,469 Aufrufe • vor 6 Monaten

ガールズスラッシュアクション『魔女ガミ』PS5版が5月28日に発売決定。やり込み要素として12種類の試練モード追加 クリアータイムを競うランキングに対応、既存プラットフォーム版でも無料アプデとして実装される。シロハたちが描かれた新規イラストの特典情報も判明。
1:20

ガールズスラッシュアクション『魔女ガミ』PS5版が5月28日に発売決定。やり込み要素として12種類の試練モード追加 クリアータイムを競うランキングに対応、既存プラットフォーム版でも無料アプデとして実装される。シロハたちが描かれた新規イラストの特典情報も判明。

ファミ通.com

91,237 Aufrufe • vor 5 Monaten

#UE5 用の物理プラグイン「#KawaiiPhysics」をv1.16.0 にアップデート！ 今回『New External Force』機能を追加！揺れに変化を出すには仕込みが必要でしたが、パラメータ設定だけで実現可能に！ 他はUIを改善したり、Boothでの配布開始！あと、デモ動画を作ってみました！
1:31

#UE5 用の物理プラグイン「#KawaiiPhysics」をv1.16.0 にアップデート！ 今回『New External Force』機能を追加！揺れに変化を出すには仕込みが必要でしたが、パラメータ設定だけで実現可能に！ 他はUIを改善したり、Boothでの配布開始！あと、デモ動画を作ってみました！

おかず

75,399 Aufrufe • vor 1 Jahr

最近作ったもの 2025年4月版 映画アンダーニンジャのOKを頂けたので制作物でポートフォリオを更新しました！ blender4.4のデモリールに過去の動画が採用されました。いつどこで拾われるかわからんもんですね Doroniさんのコンセプトを動画化してみました。楽しい！！！
1:29

最近作ったもの 2025年4月版 映画アンダーニンジャのOKを頂けたので制作物でポートフォリオを更新しました！ blender4.4のデモリールに過去の動画が採用されました。いつどこで拾われるかわからんもんですね Doroniさんのコンセプトを動画化してみました。楽しい！！！

lobolabo

15,043 Aufrufe • vor 1 Jahr