FRONTEND TOOL DIRECTORY
実装を、
すぐ試せる。
CSS、UI、モーション、フォーム。触って確かめられる実用ツールを、目的から探せます。
MINI GAMEFrontend Dungeonゲームをはじめる →
EXPLORE
ツールを探す
tools
ジェネレーター
調整して、そのまま使えるコードや素材を作る
CSS Spring Easing
バネのような動きをプレビューとグラフで調整し、linear()のCSSを生成・共有できます。
Squash & Stretch Generator
横移動と落下の変形・衝突・バウンドを調整し、@propertyを使ったCSSを生成できます。
Transform Origin Playground
基準点を9点プリセットやドラッグで調整し、同じtransformの手触りを比較してCSSを生成できます。
Motion Path Generator
アンカーとベジェハンドルを直接編集し、offset-pathのCSSを生成・共有できます。
CSS Corner Shape
角の形と半径を四隅ごとに調整し、corner-shapeのCSSを生成・共有できます。
Animated SVG Wave
3枚の波を重ね、形・色・速度を調整してアニメーションSVGを書き出せます。
Scroll Animation Generator
スクロールアニメーションの効果・範囲・軸を選び、CSSを生成できます。
Responsive Shape Generator
固定座標のpath()と、要素幅に追従するshape()を比較しながら形を作れます。
CSS Chevron Generator
幅・高さ・太さ・色を調整して、clip-pathで作る矢印のCSSを生成します。
Responsive Grid Generator
カードの最小幅・gap・最大列数から、画面幅に応じて組み替わるCSS Gridを生成します。
CSS Grid Template Areas Builder
ヘッダー・本文・サイドバー・フッターを配置。短い内容でも1画面を確保するCSSを試せます。
CSS clamp() Fluid Scale
本文サイズ・見出し倍率・基準の余白から、連動するclamp()トークンをまとめて生成します。
CSS Underline Designer
リンクの下線を太さ・距離・線種・色・skip-inkで調整し、CSSとしてコピーできます。
CSS Background Pattern Builder
ドット・格子・ストライプなど5種類の背景を調整し、そのまま使えるCSSを生成できます。
CSS Elevation System Builder
4種類の影を比較し、色や強さを調整。6段階のCSS変数をまとめて生成できます。
CSS Skeleton Loading Builder
カード・リストの読み込み表示を作成。動きとイージングを比較し、HTMLとCSSをコピーできます。
CSS Image Focal Point Lab
残したい位置を選び、同じ画像の切り抜きを4種類の枠で比較。表示中のCSSをコピーできます。
CSS Blend Mode Lab
写真に重ねた図形や文字の色を6つの合成モードで比較。合成グループも切り替えられます。
CSS Mask Composite Lab
2枚のマスクの重なり方を4種類で比較。位置と大きさを調整し、表示中のCSSをコピーできます。
CSS Backdrop Filter Lab
左は背景レイヤーにfilter、右はパネルにbackdrop-filterを適用。効果が見える範囲を操作して確認できます。
CSS Shape Outside Lab
四角い領域と図形の輪郭を比較。円・かぼちゃ・自分のSVGで文章の回り込みを試せます。
CSS Border Image Slicer
画像の分割位置と枠幅、辺の繰り返し方を比べ、CSSをコピーし、SVGをダウンロードできます。
CSS 3D Card Studio
視点・回転・奥行き・裏面の表示を操作して比較。表示中のHTML・CSS・JSをコピーできます。
モーション・スクロール
動きの仕組みを、操作しながら理解する
animation-range Guide
entry・cover・contain・exitが、どのスクロール区間を示すのか確認できます。
scroll() vs view()
スクロール領域基準と要素の表示位置基準、2つのタイムラインの違いを比較します。
Scroll State Header
追従ヘッダーが最上部を離れた状態を、scroll-state()でスタイルへ反映します。
@starting-style Dialog
dialogの表示開始時から、自然に出現するトランジションをCSSで作ります。
Anchor Scroll Offset
固定ヘッダーでアンカー先が隠れる問題を、scroll-paddingとscroll-marginで解決します。
CSS Scroll Boundary Lab
内側の端から外側へ伝わるスクロールを、auto・contain・noneで操作しながら比較します。
Halloween SVG Parts
12種類のハロウィン素材。SVGは配色と動きを選んで保存。透過PNGの静止画や、Lottie版の登場・退場も使えます。
Scrollbar Gutter Modal
モーダル表示時にスクロールバーが消えて、画面が横へずれる問題を比較できます。
View Transition Card Sort
通常のカード並び替えと、同じ要素を新しい位置まで滑らかにつなぐ動きを比較します。
Squash & Stretch
加速中は横に伸び、終着点では縦に伸びる形の変化を、位置だけの動きと比較します。
CSS Native Carousel
JavaScriptなしで、左右ボタンと現在位置のドットを生成するCSSカルーセルを試せます。
CSS Scroll Snap Studio
カードの吸着と両端で止まる位置をCSSで比較。強さ・揃え方・余白を切り替えて試せます。
random() Type Scatter
同じクラスの文字を、CSSのrandom()で位置・角度・色だけバラバラに散らせます。
CSS sibling-index()
JSで番号を振らなくても、兄弟の何番目かがCSSの数値になります。
Reduced Motion Pattern Lab
移動・拡大・視差・連続再生を、短いフェードや静的表示へ置き換える実装を比較できます。
Typed attr() Data UI
HTMLのdata属性を、数値・角度・色・長さとしてCSSへつなげます。
GSAP Plugin Gallery
無料で使えるGSAPプラグインを、名前ではなく実際の動きから探せます。
ScrollTrigger Generator
start・endの境界線と動きを確認しながら、Scrub・Pin・Snapを設定できます。
CSS Sticky Scroll Gallery
重ねる・見せ続ける・下端で止めるなど、Stickyで11種類のスクロール表現を試せます。
Text Motion Generator
48種類の完成プリセットから選んで、SplitText・Scramble・Typewriterの動きと実装コードを生成できます。
GSAP Timeline Builder
映像編集のようなタイムラインで、複数素材の動きと順番を組み立てて書き出せます。
レイアウト
幅やコンテンツ量が変わっても崩れにくい設計を試す
Box Alignment Playground
align・justify・placeと、items・content・selfの役割をまとめて確認できます。
cqw Component Sizing
viewportではなくコンテナ幅を基準に、コンポーネント内部を拡縮する違いを比較します。
Intrinsic Sizing Guide
min-content・max-content・fit-contentが作る幅を、同じ内容で比較できます。
Switcher Layout
余裕があるときだけ横並びにし、狭くなると自然に縦積みへ切り替えます。
Sidebar Layout
本文幅を守りながら、十分な幅がない場合は1カラムへ切り替えるレイアウトです。
Text Wrap Comparison
balance・pretty・auto-phraseの折り返しを比較し、日本語での注意点を確認します。
CSS text-box-trim
Figmaの上下トリミングを、text-box: trim-both cap alphabetic で左右比較できます。
Anchor Positioning Tooltip
基準要素へ追従し、画面端では収まる位置へ自動で切り替わるツールチップです。
Container Style Query Density
親の密度トークンを条件に、子コンポーネントの余白や文字サイズを切り替えます。
Subgrid Card Alignment
文章量が違うカードの見出し・説明・機能一覧・CTAを、同じ行へ揃えます。
CSS Grid Lanes / Masonry
高さの違うカードを短いレーンから詰め、通常のGridとの空白の違いを比較します。
CSS text-fit Headline Lab
文字数とフレーム幅を変え、見出しの拡大・縮小と複数行の合わせ方を比較します。
Horizontal Overflow Finder
横スクロールの原因候補と超過量を検出し、赤枠で特定できる診断ツールです。
Stacking Context Inspector
z-indexが効かない原因を、親Contextの経路と競合するレイヤーから診断します。
Cascade Layers Visualizer
@layer・詳細度・!important・レイヤー外CSSのどこで勝敗が決まるかを確認できます。
inline-startLogical Properties Converter
横書き・縦書き・RTLで辺の対応を確認し、物理方向のCSSを論理プロパティへ変換します。
Responsive Navigation Pattern Lab
同じナビをFlexの折り返し・横スクロール・Grid・メニュー切り替えの4通りで比較できます。
フォーム・状態
標準HTMLとCSSで、UIの状態を分かりやすく表現する
accent-color Forms
checkbox・radio・range・progressのアクセント色をまとめて変更します。
field-sizing: content
inputやtextareaを、入力内容に合わせて自然に伸縮させる挙動を試せます。
Field Sizing Playground
固定サイズと内容サイズを並べ、textarea・input・selectの伸縮と上限・下限を比較します。
::file-selector-button
標準のfile inputを活かしながら、ボタン部分だけをCSSで整えます。
:has():has() State Card
子要素の状態を使って、親カード全体の見た目をCSSだけで変えます。
:has(:invalid) Form
入力エラーを含むカードやフォーム全体へ、エラー状態を反映します。
:has(details[open]) FAQ
開いているdetailsを含むFAQパネル全体へ、選択状態を反映します。
:has(input:checked) Cards
radioの選択状態に合わせて、外側の選択カードを強調します。
Input State Cards
未入力・OK・エラーの3状態を、inputを含む親カードへCSSで反映します。
Custom Highlight Search
検索語をmarkで囲む方法と、DOMを変えないCustom Highlight APIを比較します。
Screen Reader Starter
OS標準の読み上げを起動し、HTMLの聞こえ方とSkip Linkによるページ内移動を体験できます。
aria-live Announcement Lab
カート・検索・保存・入力エラーを使い、off／polite／assertiveの通知方法を比較します。
Accessible Name Inspector
要素の名前・役割・状態と、Accessible NameがどのHTMLから決まるかを比較します。
Reading Order Inspector
見た目と読み上げの順番を比較し、DOMとreading-flow／reading-orderで解決します。
:focus-visible Focus Ring Lab
マウスとTabの違いを比較し、背景に合うフォーカスリングのCSSを作れます。
Focus Not Obscured Lab
固定・フロートUIが隠すTabの現在地を再現し、安全領域を確保するCSSを作れます。
Forced Colors Pattern Lab
強制カラーモードで消える状態・アイコン・フォーカス・選択を、修正前後で比較します。
CSS Target Size Inspector
操作領域と隣との間隔を測り、AAの24pxとAAAの44pxで判定を比較します。
CSS Reflow Inspector
400%ズーム相当の320 CSS pxで、ページ全体の横スクロールと修正方法を比較します。
CSS Hover / Focus Content Lab
HoverやFocusで現れる内容を、ポインター移動・Esc・表示時間の3条件で比較します。
Accessible Dialog Menu
dialogの標準動作を使い、JSあり／なしのハンバーガーメニューを比較します。
Dialog or Popover?
背景を止めるdialogと、背景操作を残すpopoverの標準動作を比較します。
Customizable Select
標準selectを保ったまま、Rich optionや区切り、グループ化を比較します。
Validation Timing
:invalidと:user-invalidを、初期表示・確認後・修正後の3段階で比較します。
Form Owner Playground
フォーム外のボタンから、標準バリデーションと送信先の切り替えを試します。
submit() vs requestSubmit()
入力チェック・submitイベント・送信ボタン情報が、2つの送信経路でどう変わるか比較します。
Multi-action Form
ひとつのformから、送信ボタンごとに行き先・メソッド・検証・表示先を切り替えます。
Details Animation Lab
detailsの標準機能を保ちながら、Grid方式と内在サイズ方式の開閉アニメーションを比較します。
Submit Button Payload
通常の入力値と、押した送信ボタンのname・valueだけが送られる仕組みを試します。
Form State Matrix
disabled・readonly・aria-disabledの編集、フォーカス、送信値、制約検証を比較します。
カラー・トークン
色を増やしすぎず、UI全体へ展開する
color-mix() UI Tokens
1つのブランドカラーから、背景・border・hover・shadowの派生色を作ります。
Color Mixing Comparison
同じ2色を4つの色空間で補間し、グラデーションと任意位置の混合色を比較します。
OKLCH Palette Scale Generator
1つの基準色から、50〜950の11段階とコントラストをまとめて生成します。
Semantic Color Token Builder
段階色をUIの役割へ割り当て、Light／Darkの配色とコントラストを同時に確認します。
contrast-color() Comparison
背景色に対して、白と黒のうちコントラストが高い文字色を自動選択します。
実験・Webアプリ
ブラウザの機能を使った、触って遊べる実験
別のキーワードまたはカテゴリをお試しください。