広告は表示されますか？

運営維持のため一部ページに広告を表示していますが、ツール本体の動作を妨げない範囲に留めています。ブロッカーを利用されても機能は動作します。

使い方を教えてください。

画面の入力欄に処理したい値を入れるだけで、CSSスクロールスナップが即座に結果を表示します。コピーボタンで結果をワンクリックでクリップボードに送れます。

デザイン・CSS無料登録不要

CSSスクロールスナップ

CSSのscroll-snapプロパティの使い方とプリセット集を表示する無料オンラインツール。CSSスクロールスナップをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

入力

結果

--- 水平カルーセル ---
.container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
}
.item {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

--- 縦スクロール(全画面セクション) ---
.container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.section {
  height: 100vh;
  scroll-snap-align: start;
}

--- scroll-snap-type ---
x mandatory   水平・必ずスナップ
y mandatory   垂直・必ずスナップ
x proximity   水平・近い時のみ
y proximity   垂直・近い時のみ
both mandatory 両方向

--- scroll-snap-align ---
start    要素の開始位置に合わせる
center   要素の中央に合わせる
end      要素の終了位置に合わせる

FAQ

よくある質問

はい。CSSスクロールスナップが出力するCSSはTailwind CSSの任意のクラスと共存でき、必要に応じて任意値クラス（[xxx]記法）への変換も可能です。

こちらもおすすめ

CSS角度単位

CSS角度単位を表示する無料オンラインツール。CSS角度単位をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

animation-direction

animation-directionを表示する無料オンラインツール。animation-directionをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

animation-fill-mode

animation-fill-modeを表示する無料オンラインツール。animation-fill-modeをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

CSSアニメーション生成

CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。Web開発に便利な無料ツール。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...