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 clamp() Fluid Scale
本文サイズ・見出し倍率・基準の余白から、連動するclamp()トークンをまとめて生成します。
CSS Underline Designer
リンクの下線を太さ・距離・線種・色・skip-inkで調整し、CSSとしてコピーできます。
CSS Background Pattern Builder
ドット・格子・ストライプなど5種類の背景を調整し、そのまま使えるCSSを生成できます。
モーション・スクロール
動きの仕組みを、操作しながら理解する
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カルーセルを試せます。
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を論理プロパティへ変換します。
フォーム・状態
標準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アプリ
ブラウザの機能を使った、触って遊べる実験
別のキーワードまたはカテゴリをお試しください。