CSS OVERFLOW LAB

Native Carousel Lab

JavaScriptなし。CSSだけで動くカルーセル。

対応状況を確認中
02

LIVE COMPARISON

対応ブラウザなら、ここまでできる

SAME CARD MARKUP
BASELINE

Scroll Snap

SWIPETRACKPAD
  • 01
    VISUAL SYSTEM

    Signal

    色と形で、次の情報へ誘導する。

  • 02
    INTERACTION

    Orbit

    スワイプした位置へ、カードが揃う。

  • 03
    LAYOUT STUDY

    Bloom

    次のカードを見せて、続きを伝える。

  • 04
    CSS OVERFLOW

    Frame

    操作UIを、ブラウザの仕組みへ任せる。

  • 05
    PROGRESSIVE

    Echo

    非対応でも、内容とスクロールは残る。

HTML + 基本CSS横スクロールだけでも内容へアクセスできます。

PROGRESSIVE ENHANCEMENT

Native Controls

BUTTONSMARKERS
  • 01
    VISUAL SYSTEM

    Signal

    色と形で、次の情報へ誘導する。

  • 02
    INTERACTION

    Orbit

    スワイプした位置へ、カードが揃う。

  • 03
    LAYOUT STUDY

    Bloom

    次のカードを見せて、続きを伝える。

  • 04
    CSS OVERFLOW

    Frame

    操作UIを、ブラウザの仕組みへ任せる。

  • 05
    PROGRESSIVE

    Echo

    非対応でも、内容とスクロールは残る。

同じHTML + 拡張CSS矢印キーでもマーカー間を移動できます。

SCROLL BUTTONS2generated
MARKERS5generated
JAVASCRIPT0for carousel
FALLBACKSNAPalways usable
03

PROGRESSIVE ENHANCEMENT

土台を残して、操作を足す

01

Semantic list

カードは通常のリスト

02

Scroll snap

止まる位置を揃える

03

Native controls

ボタンとドットを生成

KEYBOARD矢印キーで移動

マーカーはまとまったナビゲーションとして扱われます。

BOUNDARY端で自動的に無効化

前後へ進めないボタンの状態をブラウザが管理します。

NO SUPPORT横スクロールへ戻る

コンテンツも基本操作も失われません。

04 · CSS RECIPE

同じHTMLへCSSを重ねる