box-shadowレイヤーエディター
複数の外側・内側shadowを追加、複製、無効化、並び替えし、カードやボタン用の影を作ります。
ARCHIVE
使用技術: HTML
CSS Keyframes Animation Studio
複数keyframeと要素trackを編集し、loop、alternate、delay、fill-mode、reduced motionを含むコードを作ります。
WordPressおすすめCSS Studio
見出し、ボタン、画像、表、引用などを選び、追加CSSからtheme.jsonまで6種類の実装方法へ変換します。
CSS Box Shadow Layer Editor
Add, duplicate, disable, and reorder multiple outer and inset shadows for cards and buttons.
CSS Keyframes Animation Studio
Edit multiple keyframes and element tracks with loop, alternate, delay, fill mode, and reduced-motion output.
WordPress CSS Studio
Style headings, buttons, images, tables, and quotes, then export six WordPress implementation formats.
text-shadowレイヤーエディター
複数の文字影、文字色、背景色、フォント設定を組み合わせ、読みやすさを確認しながらCSSを作ります。
文字数・SEOテキストアナライザー
grapheme、単語、byte、行、空白・改行条件別の文字数を数え、titleとdescriptionの検索表示を確認します。
アクセシビリティ・ブラウザ対応Checker
contrast、focus、touch target、motion、scope、specificity、overflow、ブラウザ対応を一画面で検査します。
CSS Text Shadow Layer Editor
Combine multiple text shadows, text colors, backgrounds, and typography while checking readability.
Text and SEO Analyzer
Count graphemes, words, bytes, lines, and whitespace variants, then preview search titles and descriptions.
Accessibility and Browser Compatibility Checker
Check contrast, focus, touch targets, motion, scope, specificity, overflow, and browser compatibility in one panel.
WordPress Rescue Mode：困りごとから安全な修正コードを生成
WordPressの見出し、ボタン、画像、表、余白などの困りごとを12レシピから選び、適用範囲と安全性を検査して、追加CSS、Block Style、theme.json、子テーマ、プラグインなど8形式へ変換します。
CSS枠線・角丸エディター
上下左右・論理方向の枠線、線種、色、角ごとのradiusを設定し、レスポンシブな枠を生成します。
text-clip・グラデーション文字
グラデーション文字を作り、通常色、@supports、接頭辞、reduced motionを含む安全なCSSを出力します。
WordPress Rescue Mode: Diagnose and package safe fixes
Choose from twelve common WordPress repair recipes, validate scope and safety, and export the same fix as Additional CSS, a block style, theme.json, a child theme, a micro-plugin, or one of eight guided outputs.
CSS Border and Radius Editor
Configure physical and logical borders, styles, colors, and per-corner radii for responsive components.
Background Clip Text Generator
Create gradient text with readable fallback colors, @supports, prefixes, and reduced-motion handling.
Section Composer：Webページの構成を設計・出力
ヒーロー（主見出し）、特徴、事例、料金、よくある質問、CTA（行動を促す導線）など13種類のセクションを並べ、文章・見出し・色や余白の設計値・品質を1つのプロジェクトで管理し、HTMLやWordPress向けの8形式へ変換します。
CSS Filterエディター
画像またはHTMLへ複数のfilterを適用し、順番、before・after、ローカル画像を比較できます。
フロントエンド・コンポーネントStudio
カード、見出し、バッジ、通知、フォーム、表、Accordion、Tabs、Navigation、Heroを編集します。
Section Composer: Design and export complete web pages
Compose thirteen semantic page sections, manage content, headings, design tokens, and quality in one local project, then export eight HTML and WordPress implementation formats.
CSS Filter Editor
Apply multiple filters to an image or HTML element and compare effect order, before/after states, and local uploads.
Frontend Component Studio
Build cards, headings, badges, notices, forms, tables, accordions, tabs, navigation, and hero sections.
GSAP Timeline & Scroll Story Studio：動きを設計・検証・出力
GSAP TimelineとScrollTriggerの時間軸・スクロール軸を同じAnimation Projectで可視化し、position parameter、label、callback、stagger、pin、scrub、reduced motionを検証して9形式へ出力します。
backdrop-filterエディター
ガラス表現などの背面filterを編集し、背景、透明度、fallback、ブラウザ対応を同時に確認します。
レスポンシブ・レイアウトStudio
Flexbox、Grid、Subgrid、Container Queries、clamp()を、3つの画面幅とresize canvasで設計します。
GSAP Timeline & Scroll Story Studio: Design, validate, and export motion
Design GSAP timelines and ScrollTrigger stories in one Animation Project, validate position parameters, labels, callbacks, stagger, pin, scrub, and reduced motion, then export nine implementation formats.
CSS Backdrop Filter Editor
Edit glass-like backdrop effects while checking backgrounds, opacity, fallbacks, and browser support.
Responsive Layout Studio
Design Flexbox, Grid, Subgrid, Container Queries, and clamp() layouts across three viewport previews.